渲染流水线大总结

  1. 渲染流程将HTML内容转化为能够读懂的DOM树结构
  2. 渲染引擎将CSS样式表转化为浏览器可以理解的styleSheets,计算出DON节点样式。
  3. 创建布局树，并计算元素的布局信息。
  4. 对布局树进行分层，并生成分层树
  5. 为每个图层生成绘制列表，并将其提交到合成线程
  6. 合成线程将图层分成图块，并在光栅化线程池中将图块转化成位图
  7. 合成线程发送绘制图块命令DrawQuad给浏览器进程
  8. 浏览器进程根据DrawQuad消息生成页面，并显示在显示器上。

image.png

为什么减少重绘、重排是一种很好的优化方式？

减少重绘重排，相当于少了渲染进程的主线程和非主线程的很多计算和操作，能够加快web的展示。