JS引发页面重排重绘的代价

示例

目标是修改div内容，3种实现方式，看下每种方式的执行时间

<html>
<body>
<div id="myDiv1"></div>
<div id="myDiv2"></div>
<div id="myDiv3"></div>
<script>
var times = 10000;
// 方式1
console.time(1);
for(var i = 0; i < times; i++) {
  document.getElementById('myDiv1').innerHTML += 'a';
}
console.timeEnd(1);
// 方式2
console.time(2);
var str = '';
for(var i = 0; i < times; i++) {
  var tmp = document.getElementById('myDiv2').innerHTML;
  str += 'a';
}
document.getElementById('myDiv2').innerHTML = str;
console.timeEnd(2);
// 方式3 
console.time(3);
var _str = '';
for(var i = 0; i < times; i++) {
  _str += 'a';
}
document.getElementById('myDiv3').innerHTML = _str;
console.timeEnd(3);
</script>
</body>
</html>

结果

1: 318.88ms

2: 1.80ms

3: 0.97ms

方式1 最糟糕，每次循环都修改节点内容，引发重绘重排

方式2 只修改一次节点内容，比方式1好太多

方式3 也是修改一次节点内容，与方式2的时间差距是在获取节点操作上

可以看到，糟糕的JS代码代价很高，所以开发时一定要注意代码写法的不同对性能的影响

最基本的原则

尽量减少对节点几何元素的改变（例如宽和高），因为浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响，引发重排，重排后比如会引发重绘