浅谈浏览器的渲染过程

浏览器的渲染过程

  • 解析 HTML 生成 DOM 树,解析 CSS 并生成 CSSOM 树
  • 将 DOM 树和 CSSOM 树结合,生成渲染树(Render Tree)
  • 根据生成的渲染树进行回流,得到节点的位置,大小等信息
  • 根据渲染树以及回流获取的信息进行重绘,得到节点的像素信息
  • 将像素信息发送给 GPU,展示在页面上

回流(Reflow)

渲染树生成后,计算渲染树的节点在视口(viewport)内的确切位置、大小和样式等信息,这个计算过程就是回流

重绘(Repaint)

通过构造渲染树和回流阶段,可以获取到可见节点的位置、大小、样式等信息,然后将渲染树的每个节点都转换为屏幕上的实际像素,这个转换过程就叫做重绘

何时发生回流重绘

  • 页面一开始渲染的时候
  • 浏览器窗口尺寸变化
  • 元素的位置、大小、边距、内容等变化
  • 添加或删除 DOM 元素

回流一定会触发重绘,而重绘不一定会回流(比如 background-color 变化)

优化方案

  • 合并多次对样式的修改(使用 cssText 或修改 class 等)
  • 批量修改 DOM (脱离文档流 -> 批量处理 -> 恢复到文档流)
    • 使用 display:none,绝对定位、浮动等脱离文档流
    • 使用 DocumentFragment API 在 DOM 外构建子树,然后添加回 DOM
  • 避免使用 offsetWidth、scrollWidth、clientWidth 等
  • 使用 transform、opacity、filters、will-change 等属性触发 GPU 加速(缺点:太多占用内存,文字抗锯齿失效)
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1101.html
京ICP备19044523号-1