JS 之性能优化(2)

继续上一篇的JS性能优化之后，下面接着讲关于前端性能优化的内容。如果有不对的地方欢迎纠正。

 

1.避免过多的重排与重绘操作。

尽量将DOM中的多个读操作放一起，中间不要插入写的操作，因为写操作会导致浏览器迅速的重排，从而影响性能。将DOM中的多个写操作放一起，不要插入读的操作，如果插入读操作会导致浏览器多次重排。也就是DOM中读写操作分开。

 

2.缓存重排获取的值

避免下次用到该值的时候，浏览器又需要重排。

 

3.通过设置样式名来修改元素样式

通过改变元素的class,或者csstext属性来改变元素的样式。

 

4.尽量使用离线DOM来操作节点

例如操作Document Fragment对象，完成后把这个对象插入到实际的DOM中。或者cloneNode()方法，在克隆的节点上操作，再用克隆的节点替换原节点。

 

5.对操作频繁的元素使用display:none，然后对其操作，操作完后恢复显示display:block

这样处理的话，浏览器相当于渲染页面只有两次（隐藏或显示）。不可见的元素不影响重排或重绘。

 

6.将元素设为position:fixed或absolute,重排的开销会很小

因为被定位的元素不会影响其他元素的布局。

 

7.使用虚拟DOM的脚本库

比如React等。

 

8.使用window.requestAnimationFrame(),window.requestIdleCallback()

这两个方法调节重新渲染。

requestAnimationFrame(func),传一个函数进去当作参数，这个函数是一个屏幕重绘前被调用的函数，等下次浏览器渲染时执行函数里的操作。其实这个跟setTimeout()类似，只是间隔时间是由浏览器自己（下次渲染）来决定。这个方法解决了浏览器不知道Javascript动画正在执行和不知道多少才是合适的间隔的问题。

兼容写法：mozRequestAnimationFrame() || msRequestAnimationFrame() || weibkitRequestAnimationFrame() || oRequestAnimationFrame()

使用场景比如：重复执行的函数，JS动画（滑动），页面滚动，页面放大缩小等。

案例：

<script>
function scroll(elem){
    var hei = elem.clientHeight;
    window.requestAnimationFrame(function(){
        elem.style.height = (hei*2) + 'px';
    })
}
function scroll2(elem){
    var hei = elem.clientHeight;
    elem.style.height = (hei*2) + 'px';
}

elem = document.getElementById('elem');
console.time('a');
for(var i=0;i<100000;i++){
    scroll(elem);
}
console.timeEnd('a');

console.time('b');
for(var i=0;i<100000;i++){
    scroll2(elem);
}
console.timeEnd('b');
</script>

log里输出：

a: 389.112ms
b: 3922.486ms

很明显，使用requestAnimationFrame()方法后执行更有效率。不过该方法也有兼容性问题，是否使用还得看项目而定。

 

参考：http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html