浏览器渲染机制

在面试中我们常遇到这样的一个问题:从输入 url 到页面展示这一过程(浏览器)做了什么?

渲染机制

1.处理 HTML 并构建 DOM 树

2.处理 CSS 构建 CSSOM 树

3.将 DOM 与 CSSOM 合并成一个渲染树

4.根据渲染树来布局,计算每个节点的位置

5.调用 GPU 回执,合成图层,显示在屏幕上

重绘(Repaint)和回流(Reflow)

回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,

导致性能问题:

  • 改变 window 大小
  • 改变字体
  • 添加或删除样式
  • 文字改变
  • 定位或者浮动
  • 盒模型

什么会引起回流

1.页面渲染初始化

2.DOM 结构改变,比如删除了某个节点

3.render 树变化,比如减少了 padding

4.窗口的 resize

参考资料

Last Updated:
Contributors: johan