JS 之性能优化(1)

了解JS性能优化是学习前端必备的一项技能。下面就简单的列出几点：

1.注意作用域，避免全局查找。

访问全局变量比访问局部变量慢，是因为需要遍历作用域链，查找作用域链需要额外的时间。所以在一个函数中，将访问多次的全局对象或者域外变量存储为局部变量来使用。如某个方法需引用全局变量的值，则在该方法所在的对象的作用域中定义一个局部变量等于全局变量的值。

避免不必要的属性查找，将属性设置为局部变量。

function(){

var title = document.title;

for(var i=0;i<3;i++){

console.log(title);

}

}

2.优化循环

简化循环体。当循环的数量不多时，展开循环。当if-else较多时，建议使用switch语句。

3.最小化语句数

声明多个变量时，可以使用一个var关键字来声明，变量之间用逗号表示。

使用数组或对象字面量来新建数组或对象。var arr= [1,2,3,4];var map={a:1,b:2}

4.JS的执行尽量脱离DOM树，限制DOM操作的次数，优化DOM交互，尽量减少浏览器对DOM的渲染和重绘操作

最小化现场更新，现场更新就是立即对页面的显示进行更新。尽量少更新。这时候可使用文档碎片来构建DOM结构。document.createDocumentFragment()

使用innerHTML来构建大的DOM结构。但是也避免重复大量的使用。

5.使用事件代理

页面上的事件处理程序的数量和页面响应用户交互的速度之间有个负相关。所以为了减少事件处理程序，尽量使用事件委托技术。

6.JS的执行顺序

JS放HTML页面最后面时，不一定提升JS性能，但是在网速较慢的时候会快速的渲染页面。

7.JS定义行为，html定义内容，CSS定义外观，不混淆

8.减少HTTP请求数，JS压缩，HTTP压缩

9.数据尽量存储在数组里

10、代码的优化不是减少代码量，而是增加代码提高代码的可阅读性。

包括正确标记变量，封装某个重复的行为，合理的注释等。

PS：以上内容如果描述的不准确，欢迎拍砖。