渲染过程
- html 解析，构建 dom 树
- css 解析，构建 cssom 树
- 将 dom 树和 cssom 树结合构建 render 树
- layout 布局：得到 render 树后，计算每个节点在浏览器中的位置和大小
- 从渲染树的根节点开始遍历，采用盒子模型的模式来表示每个节点与其他元素之间的距离，从而确定每个元素在屏幕内的位置与大小
- Paint 绘图：遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件（在绘制或光栅化阶段，浏览器将在布局阶段计算的每个框转换为屏幕上的实际像素
- Composite 合成: 浏览器将绘制好的像素进行合成，生成最终的页面。这个过程包括多个步骤，如合并图层、应用滤镜效果等
layout、paint 和 composite 阶段
在浏览器的渲染过程中，渲染引擎会按照一定的顺序执行布局（layout）、绘制（paint）和合成（composite）三个阶段，最终将页面内容呈现在屏幕上。
- Layout（布局）阶段
在布局阶段中，渲染引擎会计算出每个元素在页面中的准确位置和大小，以及它们相互之间的关系。渲染引擎会遍历 DOM 树，收集每个元素的尺寸、位置、边距、填充、边框等信息，并将它们转化成一个个盒模型。布局阶段的计算通常涉及多个因素，比如元素的尺寸、样式、位置等。
- Paint（绘制）阶段
在绘制阶段中，渲染引擎会将元素的盒模型转化为屏幕上的像素点，这个过程就是绘制。渲染引擎会按照布局阶段计算出的位置和大小，将每个元素绘制成屏幕上的一个个像素点，包括元素的背景、边框、文字等。这个阶段通常会调用底层的图形库完成绘制，如 Skia 等。
- Composite（合成）阶段
在合成阶段中，渲染引擎会将所有绘制好的像素点按照它们在 DOM 树中的顺序进行合成，以生成最终的图像。这个阶段通常是由操作系统或硬件加速完成，因为它需要将多个图层进行组合并生成最终的可视化输出。
值得注意的是，这三个阶段并不是互相独立的，它们之间相互影响，也可能相互交错。例如，当一个元素的布局信息发生变化时，渲染引擎需要重新计算该元素的位置和大小，从而触发重新绘制和合成操作。另外，为了提高渲染性能，渲染引擎可能会采用一些优化手段，如分层渲染、图像缓存等，以便在渲染过程中尽可能地减少不必要的计算和操作。
优化方案
优化渲染关键路径
优化页面渲染性能，减少页面白屏时间
优化 JS：JavaScript 文件加载会阻塞 DOM 树的构建，可以给< script >标签添加异步属性 async，这样浏览器的 HTML 解析就不会被 js 文件阻塞。
优化 CSS：浏览器每次遇到< link>标签时，浏览器就需要向服务器发出请求获得 CSS 文件，然后才继续构建 DOM 树和 CSSOM 树，可以合并所有 CSS 成一个文件，减少 HTTP 请求，减少关键资源往返加载的时间，优化渲染速度。
其他优化方案
- html、css、js 文件压缩，删去多余字符（换行、注释、空格符等）
- 图片加载优化（懒加载、雪碧图等
- 浏览器缓存
参考
贡献者
jiechen