javascript性能优化（一）

一、js加载优化

1、script标签放在底部，不要放在head标签

2、减少js文件数目

3、给script标签添加一个defer属性 defer属性所含的脚本不会修改DOM，代码可以安全的执行

4、把loadscript()函数直接嵌入页面，从而避免多产生一次http请求；一旦页面初始化所需要的代码完成下载，你可以继续自由地使用loadscript();去加载页面其他的功能所需要的脚本

二、数据存取优化

1、函数读写局部变量是最快的，读写全局变量通常是最慢的。请记住全局变量总是存在于作用域链的最尾端，因此它是最远的。对于所有的浏览器来说，一个标识符艘在的位置越深，他的读写速度越慢  尽量使用局部变量

2、js中的对象是基于原型。 原型是其他对象的急促，他定义并实现了一个新创建的对象锁必须包含的成员列表

实例成员和原型成员。实例成员直接存在于对象实例中，原型成员则从对象原型继承而来。

3、对象成员--原型链

使用构造函数Book来创建一个新的Book实例。实例boo1的原型（_proto_）是Book.prototype,而Book.prototype的原型是object。  原型可以共享给实例中任意一个使用而实例不行 根据他们的不同灵活的使用原型链

4、避免使用with语句，他会改变执行环境作用域链。同样，try-catch语句中catch子句也有同样的影响，因此要小心使用

5、通常来说，可以通过常用的对象成员，数组元素，跨域变量保存在局部变量中来改善js性能，因此局部变量访问速度更快

三、dom的优化

1、改变多个样式尽量使用修改class的方法

2、减少重排的方法是使用改变display的睡醒

3、另一个改变重排的方法使用在文档外创建一个文档片段的方法，然后将它加入到原始列表中

Var fragement = document.getElementById(“mylist”);

appendDataToElement(fragement,data);

Document.getElementById('mylist').appendChild(fragement);

4、对需要修改的节点创建一个备份，对副本进行操作，一旦完成就是使用心得节点代替旧的节点（不过推荐使用文档片段的方案，因为所产生的DOM遍历和重拍次数最少）

Var old = document.getElementById(“mylist”);

Var clone = old.cloneNode(true);

appendDataToElement(clone,data);

Old.parentNode.replaceChild(clone,old);

5、使用绝对定位定位页面上的动画元素，将其脱离文档流

6、避免使用大量的元素：hover伪类，会降低响应速度

四、算法与流程控制

（一）、循环

1、循环和循环的类型

（1）标准for循环：在for循环中定义一个新的变量相当于在循环体外定义一个新的变量，因为javascript只有函数级作用域

（2）while循环：前测循环，由一个前测条件和一个循环体构成，在循环体执行之前，先计算前测条件

（3）do-while循环：后测循环，循环体至少执行一次；然后再由后测条件决定是够再次运行

（4）for-in循环；可以枚举任何对象的属性名

for(var prop in  object){//循环体}

循环体每次运行时，prop变量被赋予object的一个属性名，直到所有的属性完成才返回。包含了实例属性和原型链中集成的属性

2、循环性能

（1）for-in循环比其他几种明显要慢，尽量不要使用for-in遍历数组成员

（2）每次循环都要查找items.length,这样很耗时，由于此值不会发生改变，因此产生了不必要的性能损失。为了提高这个循环的性能，只查找一次，把items.length的值存储到一个局部变量，然后控制条件里使用这个变量（再打多数的浏览器中能够节约25%的运行时间）

（3）还可以把颠倒数组的顺序来提高循环性能，通常，数组的顺序与所要执行的任务无关，因此从最后一项开始向前处理是一个备选方案

Var j =items.length;

While(j--){

process(items[i]);

}

使用倒序循环，并把减法操作在控制条件中。现在每个条件只是简单地与0比较。控制条件与true比较是，任何非零数会自动转换为true，而零值等同于false。实际上，控制条件已经从两次比较（迭代数少于总数么？他是否为true？）减少到一次比较（它是true么？）。每次迭代从两次比较减少到一次，进一步提高了循环速度。通过倒叙循环和减少属性查找，可以看到运行速度比原始版本快了50%~60%；