Cacher is the code snippet organizer for pro developers

重绘和回流

重绘和回流是面试题经常考的题目，也是性能优化当中应该注意的点，下面笔者简单介绍下。

• 重绘：指的是当页面中的元素不脱离文档流，而简单地进行样式的变化，比如修改颜色、背景等，浏览器重新绘制样式
• 回流：指的是处于文档流中 DOM 的尺寸大小、位置或者某些属性发生变化时，导致浏览器重新渲染部分或全部文档的情况

相比之下，回流要比重绘消耗性能开支更大。另外，一些属性的读取也会引起回流，比如读取某个 DOM 的高度和宽度，或者使用getComputedStyle方法。在写代码的时候要避免回流和重绘。比如在笔试中可能会遇见下面的题目：

题目：找出下面代码的优化点，并且优化它

var data = ['string1', 'string2', 'string3'];
for(var i = 0; i < data.length; i++){
    var dom = document.getElementById('list');
    dom.innerHTML += '<li>' + data[i] + '</li>';
}

上面的代码在循环中每次都获取dom，然后对其内部的 HTML 进行累加li，每次都会操作 DOM 结构，可以改成使用documentFragment或者先遍历组成 HTML 的字符串，最后操作一次innerHTML。

documentFragment例子

var list1 = document.getElementById('list1');
console.time("time");
var fragment = document.createDocumentFragment();
for(var i = 0; i < 500000; i++){
    fragment.appendChild(document.createElement('li'));
}
list1.appendChild(fragment);
console.timeEnd('time');