36.为什么 transform 性能要好，简述一下浏览器渲染流程不需要太详细了,这些过程中涉及哪些线程，会出现跨进程操作吗，栅格化操作简单介绍一下;

书诚小驿2025/02/25前端面经Css

transform 不会触发重排和重绘，因为它是在合成层处理的，可能利用 GPU 加速。而像 top、left 这些属性会触发布局变化，导致重排，性能差一些。

解析 HTML 构建 DOM 树，解析 CSS 生成 CSSOM，合并成渲染树，布局计算（Layout），绘制（Paint），合成（Composite）。重点在合成阶段 transform 如何作用。

浏览器有主线程（负责 JS、样式计算、布局、绘制），合成线程（处理合成层，栅格化），可能还有光栅线程。主线程和合成线程是分开的，这样可以非阻塞。

回答

. 为什么 transform 性能更好？ transform 属性的修改会跳过浏览器的布局（Layout）和绘制（Paint）阶段，直接进入合成（Composite）阶段。这是因为：

硬件加速：浏览器会将被 transform 修改的元素提升为独立的合成层（Compositing Layer），交由 GPU 处理动画，避免主线程的计算负担。

避免重排/重绘：传统属性（如 top/left）会触发布局更新（重排），而 transform 仅触发合成器的轻量级计算，性能损耗更低。

关键步骤：

解析：HTML → DOM 树，CSS → CSSOM 树。

样式计算：合并 DOM 和 CSSOM 生成渲染树（Render Tree）。

布局（Layout）：计算元素的位置和尺寸（重排）。

绘制（Paint）：生成像素数据（绘制指令，非实际像素）。

合成（Composite）：将图层分块（Tiling）并栅格化为位图，最终由 GPU 合成输出。

主线程：负责解析、样式计算、布局、绘制（单线程，阻塞敏感）。

合成线程：管理合成层、处理滚动/变换、栅格化调度（独立于主线程，避免阻塞）。

光栅化线程：将图层分块转换为位图（可能多个线程并行）。

定义：将图层的绘制指令（矢量）转换为位图（像素），便于 GPU 处理。

过程：

合成线程将图层分割为图块（Tiles，通常 256x256）。

光栅化线程优先栅格化视口附近的图块。

结果存储为 GPU 纹理（Texture），供合成时快速调用。