前端性能优化第二篇-回流和重绘

前端性能优化第二篇-回流和重绘

先给自己持续更新的专栏打个广告，欢迎大家读一读专栏中的其他文章，戳一戳->前端性能优化

浏览器渲染过程

先请今天的主角“回流”和“重绘”在后台等一下，我们先来看看浏览器渲染页面的过程，不要跳过这个重要的部分啊～

当浏览器得到页面的时候，就开始了它的渲染过程：
1. 解析HTML，构建DOM树（包括了发起http请求来获取链接的内容）
2. 解析CSS
3. 合并DOM树和CSS规则树，生成reader树
4. 布局render树（Layout/reflow），计算元素的位置，大小
5. 绘制render树，绘制页面像素信息

上面就是大致的流程了，进行一点简单的解释

构建DOM树

• 单个节点的构建经过了Bytes -> characters -> tokens -> nodes -> object model的过程
• 整个树的构建利用了栈结构，当一个元素的所有子节点构建完成后才去构建下一个兄弟节点（类似深度优先遍历树）

构建CSSOM树

当计算每个节点样式的时候，浏览器会根据优先级从低到高的顺序设置这个节点的属性，从全局属性开始，一直寻找到这个节点的具体属性。这个CSSOM会部分替换浏览器自己的默认样式表。

生成render树

这个渲染的过程是从DOM的根节点开始进行render过程，在这个过程中会跳过不占据空间的节点，比如设置了display:none的元素，不包括那些有大小但设置了visi