javascript 性能优化技巧

记录一些在网上找的和自己的一些实践，主要是javascript代码优化方面。

1、for循环

缓存 data.length

1
2
3

for(var i = 0, m = data.length; i < m; i++) {
    //do someting
}

2、缓存运算结果

常用的运算结果，用变量缓存起来

3、减少对DOM的操作

DOM操作是非常消耗资源的，以下这些会触发重排的属性或方法，尽量缓存：

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()

使用DocumentFragment优化多次append

var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
  var el = document.createElement('p');
  el.innerHTML = i;
  frag.appendChild(el);
}
document.body.appendChild(frag);

4、修改CSS类，而不是样式

切换className,而不是直接操作style，会减少对样式的修改，避免多次重绘，甚至重排。

5、不要在循环中创建函数

比如：

for(var i = 0, m = data.length; i < m; i++) {
    handlerData(data[i], function(data){
        //do something
    });
}

可以修改为：

var handler = function(data){
    //do something
};
for(var i = 0, m = data.length; i < m; i++) {
    handlerData(data[i], handler);
}

6、回收不再需要的对象

7、使用事情委托

8、不再使用的事件手动解绑，释放内存空间

参考资料

1、前端性能优化（JavaScript篇）https://segmentfault.com/a/1190000000490324#articleHeader2

2、Web性能优化系列：10个JavaScript性能提升的技巧 http://web.jobbole.com/82469/