回流(reflow)与重绘(repaint)

回流(reflow)与重绘(repaint)

很早之前就听说过回流与重绘这两个名词，但是并不理解它们的含义，也没有深究过，今天看了一套网易的题目，涉及到了这两个概念，于是想要把它们俩弄清楚。。。

一、概念

首先我们要明白的是，页面的显示过程分为以下几个阶段：

1、生成DOM树(包括display:none的节点)

2、在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none，head节点，但是包括visibility:hidden的节点)

3、在render树的基础上继续渲染颜色背景色等样式

reflow:当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程，叫做回流

repaint:当诸如颜色背景等不会引起页面布局变化，而只需要重新渲染的过程叫做重绘

通过上述定义，可以很明显看出，重绘的代价要比回流小，毕竟重绘只涉及样式的改变，不涉及到布局。重绘就好像给人染了一个头发，而回流相当于给人做了一次抽脂手术

二、什么会引起回流

这也是网易题目的出法

1. 页面渲染初始化
2. DOM结构变化，比如删除了某个节点；骨头都被打断了，肯定比抽脂更严重，所以会引发回流
3. render树变化，比如减少了padding；也就是进行抽脂手术
4. 窗口resize事件触发
5. 最复杂的一种：获取某些属性，引发回流 很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。 但是除了render树的直接变化。 当获取一些属性时，浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了
   这些属性包括
   1. offsetTop, offsetLeft, offsetWidth, offsetHeight
   2. scrollTop/Left/Width/Height
   3. clientTop/Left/Width/Height
   4. width,height
   5. 调用了getComputedStyle(), 或者 IE的 currentStyle

我在别处抄来了一段代码，嘻嘻

?

1 2 3 4 5 6 7 8

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!'));

可以看出，回流一定伴随着重绘，而重绘却可以单独出现

可以理解为，路人甲摔断了腿或者抽脂之后，病怏怏导致头发也变白了(回流+重绘)；但是炮灰乙却仅仅是去村口王师傅那里烫了头(重绘)

回流对性能产生了一定的影响，尽管浏览器机智地帮我们进行了批处理，但是仍然存在着上述诸多阔怕的属性，一获取就回流。怎么解决？

三、减少回流

1. 避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
2. 避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
3. 避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。
4. 将复杂的元素绝对定位或固定定位，使它脱离文档流。否则回流代价十分高

补充：改变字体大小会引发回流

回到网易的问题，并适当做延伸：display:none和visibility：hidden会产生回流与重绘吗？

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint

visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint