渲染引擎负责把 HTML、CSS 和页面资源转化成屏幕上的像素。Chrome 的 Blink、Safari 的 WebKit 都属于渲染引擎。

主要流程

  1. 解析 HTML 生成 DOM。
  2. 解析 CSS 生成 CSSOM。
  3. 合成 Render Tree。
  4. Layout 计算位置和尺寸。
  5. Paint 绘制。
  6. Composite 合成图层。

学习意义

理解渲染引擎有助于解释页面卡顿、重排、重绘、布局闪动和 CSS 性能问题。

本文归档于个人知识库 · 领域：CS & AI · 模块：04 Project_CS_AI/Web