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代码代价很高，所以开发时一定要注意代码写法的不同对性能的影响
最基本的原则
尽量减少对节点几何元素的改变（例如宽和高），因为浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响，引发重排，重排后比如会引发重绘
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2015-09-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读