尽量不要变动高层的DOM元素,而以底层DOM元素的变动代替;再比如,重绘table
布局和flex
布局,开销都会比较大。
var foo = document.getElementById('foobar'); foo.style.color = 'blue'; foo.style.marginTop = '30px';
上面的代码只会导致一次重绘,因为浏览器会累积DOM变动,然后一次性执行。
提高性能:
- 读取DOM或者写入DOM,尽量写在一起,不要混杂
- 缓存DOM信息
- 不要一项一项地改变样式,而是使用CSS class一次性改变样式
- 使用document fragment操作DOM
- 动画时使用absolute定位或fixed定位,这样可以减少对其他元素的影响
- 只在必要时才显示元素
- 使用
window.requestAnimationFrame()
,因为它可以把代码推迟到下一次重流时执行,而不是立即要求页面重流 - 使用虚拟DOM(virtual DOM)库
// 重绘代价高
function doubleHeight(element) { var currentHeight = element.clientHeight; element.style.height = (currentHeight * 2) + 'px'; } all_my_elements.forEach(doubleHeight); // 重绘代价低 function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + 'px'; }); } all_my_elements.forEach(doubleHeight);