前端性能优化 —— reflow(回流)和repaint(重绘)

随着前端技术的发展，各种技术和框架也不断更新完善，产品也越来越酷炫，动画、交互等没有你想不到，只有你做不到的，随着而来的就是写不完的需求，改不完的bug（当然这只是开玩笑，毕竟我们都是很专业）。产品不断更新迭代，交互、特效不断往上面加，有一天我们的页面突然就变得很卡了，这是为什么呢？

如果你有时间可以阅读以下这篇文章：现代浏览器的工作原理 http://blog.jobbole.com/12749/

简单来讲，主要过程如下：（主要参考文章：http://www.webskys.com/artilc/228.html）

1. 用户输入网址（假设是个 HTML 页面，第一次访问，无缓存情况），浏览器向服务器发出HTTP请求，服务器返回 HTML 文件；（善用缓存，减少HTTP请求，减轻服务器压力）

2. 浏览器载入 HTML 代码，发现 <head> 内有一个 <link> 引用外部 CSS 文件,则浏览器立即发送CSS文件请求，获取浏览器返回的CSS文件；（CSS文件合并，减少HTTP请求）

3. 浏览器继续载入 HTML 中 <body> 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；（CSS文件需要放置最上面，避免网页重新渲染）

4. 浏览器在代码中发现一个 <img> 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；（图片文件合并，减少HTTP请求）

5. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；（最好图片都设置尺寸，避免重新渲染）

6. 浏览器发现了一个包含一行 JavaScript 代码的 <script> 标签，会立即运行该js代码；（script最好放置页面最下面）

7. js脚本执行了语句，它令浏览器隐藏掉代码中的某个 <div>,突然就少了一个元素，浏览器不得不重新渲染这部分代码；（页面初始化样式不要使用js控制）

8. 终于等到了 </html> 的到来，浏览器泪流满面……

9. 等等，还没完，用户点了一下界面中的“换肤”按钮，JavaScript 让浏览器换了一下 <link> 标签的 CSS 路径；

10. 浏览器召集了在座的各位 <div><span><ul><li> 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

浏览器每天就这么来来回回跑着，要知道不同的人写出来的 HTML 和 CSS 代码质量参差不齐，说不定哪天跑着跑着就挂掉了。

不停的改变标签的大小、位置和颜色而没有一个合理的解决方案，也就是不注意“回流”和“重汇”的影响是造成我们的展品越来越“卡”的原因。

reflow(回流)

说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，该过程称为reflow（回流）。

reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint(重绘)

如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow（在IE下需要换一下说法，reflow 要比 repaint 更缓慢）。尽量避免reflow(回流) ，reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。

在哪些情况下会导致reflow发生：

改变窗囗大小
改变文字大小
添加/删除样式表
内容的改变，如用户在输入框中敲字
激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
操作class属性
脚本操作DOM
计算offsetWidth和offsetHeight
设置style属性性

那么为了减少回流要注意哪些方式呢？

1.不要通过父级来改变子元素样式，最好直接改变子元素样式，改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸

2.尽量通过class来设计元素样式，切忌用style

var bstyle = document.body.style; // cache

bstyle.padding = "20px"; // reflow, repaint

bstyle.border = "10px solid red"; // 再一次的 reflow 和 repaint

bstyle.color = "blue"; // repaint

bstyle.backgroundColor = "#fad"; // repaint

bstyle.fontSize = "2em"; // reflow, repaint

// new DOM element - reflow, repaint

document.body.appendChild(document.createTextNode('dude!'));

对上面代码优化：

.b-class{

　　padding:20px;

　　color:blue;

　　border:10px solid red;

　　background-color:#fad;

　　font-size:2em;

}

$div.addClass("b-class");

3.实现元素的动画，对于经常要进行回流的组件，要抽离出来，它的position属性应当设为fixed或absolute

4.权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。

5.不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，

6.这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

7.css里不要有表达式expression

8.减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。

9.避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。

10.尽量不要过多的频繁的去增加，修改，删除元素，因为这可能会频繁的导致页面reflow，可以先把该dom节点抽离到内存中进行复杂的操作然后再display到页面上。

在div.first里面加入div.second,在div.second里面加入div.third:

$divS = $("<div class='second'></div>");

$(div.first).append($divS));//reflow

$divT = $("<div class='third'></div>");

$divS.append($divT);//reflow

优化代码：

$divS = $("<div class='second'></div>");

$divT = $("<div class='third'></div>");

$divS.append($divT);

$(div.first).append($divS));//reflow

或者：

var $divF = $(div.first);

$divS = $("<div class='second'></div>");

$divS.hide();

$(div.first).append($divS));

$divT = $("<div class='third'></div>");

$divS.append($divT);

$divS.show();//reflow

11.请求如下值offsetTop, offsetLeft, offsetWidth, offsetHeight，scrollTop/Left/Width/Height，clientTop/Left/Width/Height，浏览器会发生reflow，建议将他们合并到一起操作，可以减少回流的次数。

如果我们要经常去获取和操作这些值，则可以先将这些值缓存起来例如：

var windowHeight = window.innerHeight;//reflow

for(i=0;i<10;i++){

　　$body.height(windowHeight++);

　　一系列关于windowHeight的操作.......

}

参考链接：

http://www.cnblogs.com/Peng2014/p/4687218.html

https://www.cnblogs.com/zhutao/p/6551216.html

前端性能优化 —— reflow(回流)和repaint(重绘)

猜你喜欢