什么叫回流和重绘?

我们先举个简单的栗子“栗子”，以便帮助我们的这么理解，

1，

当Render树中的一部分(或全部)因为元素的规模尺寸、布局、显隐等改变而需要重新构建，这就称为回流。

当Render树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不影响布局，比如background-color，就称为重绘。

    注意：回流必将引起重绘，而重绘不一定会引起回流。

    以上，其实理解起来很容易，所谓的Render树就是识别了几何属性的Dom树，好像我们画人体的时候，Dom树是先确定都有什么，比如四肢，头部，身体，其他器官等；而Render树则是确定这个人的高矮胖瘦，头发是否盖眼睛等。如果我们在绘画过程中发现脖子长了那就惨了，脖子下面都要重画，如果发现只是手指画的有问题，我们只需要重画手指，这就是回流了。当我们的Render树完事了，也就是人体大概轮廓我们都画好了，就可以上色了，换个发色这种我们叫重绘。

 

 

再比如：

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));

 

一 ：回流何时发生？ 

当页面布局和几何属性改变时就需要回流，下述情况会发生浏览器回流：

 

页面渲染初始化

 

添加或者删除可见的DOM元素；

 DOM元素的几何属性变。

 

内容改变。

 

浏览器窗口尺寸改变。

 

获取某些属性

 

 二 ：  怎么减少回流和重绘？

 1、在内存中多次操作节点，完成后再添加到文档中去。

2、将那些改变样式的操作集合在一起，直接改变className。如果动态改变样式，则使用cssText。

3、将需要多次重排的元素，脱离文档流。

4、尽量不要使用表格布局。

 

5、让要操作的元素进行”离线处理”，处理完后一起更新。

 6、在需要经常取那些引起浏览器重排的属性值时，要缓存到变量。