前端性能优化第二篇-回流和重绘
先给自己持续更新的专栏打个广告,欢迎大家读一读专栏中的其他文章,戳一戳->前端性能优化
浏览器渲染过程
先请今天的主角“回流”和“重绘”在后台等一下,我们先来看看浏览器渲染页面的过程,不要跳过这个重要的部分啊~
当浏览器得到页面的时候,就开始了它的渲染过程:
1. 解析HTML,构建DOM树(包括了发起http请求来获取链接的内容)
2. 解析CSS
3. 合并DOM树和CSS规则树,生成reader树
4. 布局render树(Layout/reflow),计算元素的位置,大小
5. 绘制render树,绘制页面像素信息
上面就是大致的流程了,进行一点简单的解释
构建DOM树
- 单个节点的构建经过了
Bytes -> characters -> tokens -> nodes -> object model
的过程 - 整个树的构建利用了栈结构,当一个元素的所有子节点构建完成后才去构建下一个兄弟节点(类似深度优先遍历树)
构建CSSOM树
当计算每个节点样式的时候,浏览器会根据优先级从低到高的顺序设置这个节点的属性,从全局属性开始,一直寻找到这个节点的具体属性。这个CSS