重绘和回流

标签：

1、浏览器把获取到的html代码解析成1个Dom树。

2、浏览器把样式解析成样式结构体，在解析过程中会去掉各自浏览器不能识别的样式比如-moz,-webkit等。

3、2者结合后构建呈现render tree。

4、render tree构建完毕，浏览器就可以根据render tree绘制页面。

其中脚本执行过程可能阻塞Dom的解析和构建和阻塞css处理，（比如遇到同步一个document.write或者javascript脚本查询任何元素的计算样式）。结果导致Dom和CssDom的构建频繁的交织在一起，Dom构建在javascript执行完毕前无法进行，而javascript在cssDom构建完成前也无法进行。

首次加载的渲染时间、脚本执行都会受到样式表的阻塞，因此必须让css以最快的速度下载。也就是为什么要使用的“样式放在head里，js脚本放在最后/body前”。

重绘和回流

1、当render tree中的元素的尺寸、显隐等改变而需要重新构建，称为回流。每个页面至少需要一次回流，也就是页面第一次加载的时候。

2、当render tree中的元素的属性改变只影响外观、风格，而不影响布局，称为重绘。

那么回流必定引起重绘，而重绘不一定引起回流。

任何对render tree元素的操作都会引起重绘或者回流，所以减少对render tree的操作能减少重绘、回流。

比如：javascript修改元素style属性，如果已经定义好的样式，用js操作改变className；

新建一个最外层的大div，这个div会首先添加所有新元素，最后才把这个div append到页面上；

或者先display：none隐藏元素，然后对这个元素进行操作，最后显示该元素；

有些属性值可以定义到变量中进行缓存，需要用的时候读取这个变量。

重绘和回流

标签：

原文地址：http://www.cnblogs.com/wanbi/p/4176090.html