浏览器渲染机制
在面试中我们常遇到这样的一个问题:从输入 url 到页面展示这一过程(浏览器)做了什么?
渲染机制
1.处理 HTML 并构建 DOM 树
2.处理 CSS 构建 CSSOM 树
3.将 DOM 与 CSSOM 合并成一个渲染树
4.根据渲染树来布局,计算每个节点的位置
5.调用 GPU 回执,合成图层,显示在屏幕上
重绘(Repaint)和回流(Reflow)
回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,
导致性能问题:
- 改变 window 大小
- 改变字体
- 添加或删除样式
- 文字改变
- 定位或者浮动
- 盒模型
什么会引起回流
1.页面渲染初始化
2.DOM 结构改变,比如删除了某个节点
3.render 树变化,比如减少了 padding
4.窗口的 resize