[JavaScript知识库]性能优化系列之浏览器渲染过程

1、浏览器解析 HTML，生成 DOM Tree（Parse HTML）。

2、浏览器解析 CSS，生成 CSSOM（CSS Object Model） Tree。

3、JavaScript 会通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree，浏览器将 DOM Tree 和 CSSOM Tree 合成渲染树（Render Tree）。

4、布局（Layout）：根据生成的 Render Tree，进行回流，以计算每个节点的几何信息（位置、大小、字体样式等等）。

5、绘制（Painting）：根据渲染树和回流得到的几何信息，得到每个节点的绝对像素。

6、展示（Display）：将像素发送给图形处理器（GPU），展示在页面上。

微信扫描二维码，关注前端老L