- 渲染进程讲HTNL内容转换为可读懂的DOM树结构
- 渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。
- 创建布局树，并计算元素的布局信息
- 对布局信息进行分层，并生成分层树
- 为每个图层生成绘制列表，并将其提交到合成线程
- 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
- 合成线程发送绘制图块命令DrawQuad，给浏览器进程
- 浏览器进程根据 DrawQuad 消息生成页面，呈现在浏览器上
在优化 Web 性能的方法中，减少重绘、重排是一种很好的优化方式，那么结合文中的分析，你能总结出来为什么减少重绘、重排能优化 Web 性能吗？那又有那些具体的实践方法能减少重绘、重排呢？
- 使用 class 操作样式，而不是频繁操作 style
- 避免使用 table 布局
- 批量dom 操作，例如 createDocumentFragment，或者使用框架，例如 React
- Debounce window resize 事件
- 对 dom 属性的读写要分离
- will-change: transform 做优化