页面的重绘和回流（重排）以及优化

拼搏现实的明天。 2022-05-29 07:11 238阅读 0赞

## 一.html页面呈现流程 ##

> 1.  浏览器把获取到的html代码解析成一个dom树，其中的每个`tag`都是dom树中的一个节点，根节点就是我们常用的document对象。dom树里包含了所有html标签，包括`display:none`隐藏东西，还有用js动态添加的元素等等。  
>     
> 2.  浏览器将所有css样式解析成样式结构体，在解析的过程中去掉浏览器不能识别的样式。  
>     
> 3.  dom树和样式结构体组合后构建`render tree`,能够识别样式的`render tree`。每个node都有自己的style，但是render  
>     tree不包含隐藏的节点。因为不会呈现。（注：`visibility:hidden`隐藏的元素还是会包含到render  
>     tree中，因为其样式会影响布局，占有空间。render tree中的每个节点都称为`box`。）  
>     
> 4.  一旦render tree构建完成，浏览器就根据其开始绘制页面。

## 二.回流与重绘 ##

> 1.当render tree中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。称为`回流（reflow）`。每个页面在加载的时候都会出现一次回流，浏览器会使渲染树中受到影响的部分失效，并且重新构造这部分渲染树，完成汇流后，浏览器会重新绘制受到影响的部分到屏幕中，该过程称为重绘。  
> 
> 
>   
> 2.当render tree中的一些元素需要更新属性，而这些属性只会影响元素的外观，而不印象布局，比如背景色等等，称为`重绘`。
> 
> ##### \*\*注：重流一定引起重绘，重绘不一定引起回流。\*\* #####

#### 何时发生回流： ####

> 1.  添加或者删除可见的Dom元素
> 2.  元素位置发生改变
> 3.  元素尺寸发生改变
> 4.  元素内容改变，比如文本改变或者图片大小改变而影响计算值宽度和高度的改变。
> 5.  页面渲染初始化
> 6.  浏览器窗口尺寸改变-resize事件发生。

## 三.优化（减少回流，重排） ##

###### 1.浏览器本身放入优化策略： ######

浏览器会维护一个队列，把所有的引起回流，重绘的操作放入这个队列，等队列中的操作到了一定数量或是到了一定时间，浏览器就会flush队列，进行一个批处理。

###### 2.我们要做的就是减少对render tree 的操作，减少一些style信息的请求。 ######

1.  将多次改变样式的操做合并成一次。
2.  将需要多次重排的元素，position属性设为absolute或者fixed，这样次元素就脱离文档流，变化不会影响其他元素。
3.  在内存中多次操作节点，完成后再添加到文档中去。比如，异步获取表格数据，再添加到页面中，我们可以先获取数据，在内存中构建整个表格的html结构，再一次性的添加到文档中去。而不是循环添加。
4.  由于display属性为none的元素不在渲染树中，对隐藏元素的操作不会引发其它元素的重排。如果要对一个元素进行复杂操作，可以先影藏，操作完成后再显示。触发两次重排。
5.  取浏览器重排的属性值，缓存到变量。

[参考原文][Link 1]

[Link 1]: http://blog.csdn.net/yummy_go/article/details/50696328