JS性能优化笔记

经过网上查找资料了解关于性能优化方面的内容，现简单整理，仅供你们在优化的过程当中参考使用，若有什么问题请及时提出，再作出相应的补充修改。

1、 让代码简洁：一些简略的表达方式也会产生很好的优化

eg：x=x+1;在不影响功能的状况下能够简写为x++;

2、 变量名方法名尽可能在不影响语意的状况下简单。（能够选择首字母命名）

eg：定义数组的长度能够取名为：ArrLen而不须要取为ArrayLength。

3、 关于JS的循环，循环是一种经常使用的流程控制。

JS提供了三种循环：for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差，由于它须要查询Hash键，所以应尽可能少用for(in)循环，for(;;)、while()循环的性能基本持平。固然，推荐使用for循环，若是循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或–运算符。

4、 若是须要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免屡次查询数组长度。

由于咱们经常要根据字符串、数组的长度进行循环，而一般这个长度是不变的，好比每次查询a.length，就要额外进行一个操做，而预先把var len=a.length，则就少了一次查询。

5、 尽可能选用局部变量而不是全局变量。

局部变量的访问速度要比全局变量的访问速度更快，由于全局变量实际上是window对象的成员，而局部变量是放在函数的栈里的。

6、 尽可能少使用eval。

每次使用eval须要消耗大量时间，这时候使用JS所支持的闭包能够实现函数模板。

7、 减小对象查找

由于JavaScript的解释性，因此a.b.c.d.e，须要进行至少4次查询操做，先检查a再检查a中的b，再检查b中的c，如此往下。因此若是这样的表达式重复出现，只要可能，应该尽可能少出现这样的表达式，能够利用局部变量，把它放入一个临时的地方进行查询。

8、 字符串链接。

若是是追加字符串，最好使用s+=anotherStr操做，而不是要使用s=s+anotherStr。

若是要链接多个字符串，应该少使用+=，如s+=a;s+=b;s+=c;应该写成s+=a + b + c；
而若是是收集字符串，好比屡次对同一个字符串进行+=操做的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法链接起来，以下

var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");

9、 类型转换

1. 把数字转换成字符串，应用"" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来讲：("" +) > String() > .toString() > new String()

尽可能使用编译时就能使用的内部操做要比运行时使用的用户操做要快。

String()属于内部函数，因此速度很快，而.toString()要查询原型中的函数，因此速度逊色一些，new String()用于返回一个精确的副本。

1. 浮点数转换成整型，这个更容易出错，不少人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，咱们应该使用Math.floor()或者Math.round()。Math是内部对象，因此Math.floor()其实并无多少查询方法和调用的时间，速度是最快的。

2. 对于自定义的对象，若是定义了toString()方法来进行类型转换的话，推荐显式调用toString()，由于内部的操做在尝试全部可能性以后，会尝试对象的toString()方法尝试可否转化为String，因此直接调用这个方法效率会更高

10、 尽可能做用JSON格式来建立对象，而不是var obj=new Object()方法。

由于前者是直接复制，然后者须要调用构造器，于是前者的性能更好。

11、 当须要使用数组时，也尽可能使用JSON格式的语法，

使用JSON格式的语法即直接使用以下语法定义数组：[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。由于使用JSON格式的语法是引擎直接解释的。然后者则须要调用Array的构造器。

12、 对字符串进行循环操做，例如替换、查找，就使用正则表达式。

由于JS的循环速度比较慢，而正则表达式的操做是用C写成的API，性能比较好。

十3、 插入HTML

不少人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，若是须要直接插入HTML，能够找一个容器元素，好比指定一个div或者span，并设置他们的innerHTML来将本身的HTML代码插入到页面中。

十4、 对象查询

使用[“”]查询要比.items()更快

十5、 定时器

若是针对的是不断运行的代码，不该该使用setTimeout，而应该是用setInterval。setTimeout每次要从新设置一个定时器。

十6、 尽可能减小DOM调用

在Web开发中，JavaScript的一个很重要的做用就是对DOM进行操做。但是对DOM的操做是很是昂贵的，由于这会致使浏览器执行回流 （reflow）操做。咱们应该尽量的减小DOM操做。
回流操做主要会发生在几种状况下：
* 改变窗体大小
* 更改字体
* 添加移除stylesheet块
* 内容改变哪怕是输入框输入文字
* CSS虚类被触发如 :hover
* 更改元素的className
* 当对DOM节点执行新增或者删除操做或内容更改时。
* 动态设置一个style样式时（好比element.style.width="10px"）。
* 当获取一个必须通过计算的尺寸值时，好比访问offsetWidth、clientHeight或者其余须要通过计算的CSS值
解决问题的关键，就是限制经过DOM操做所引起回流的次数:
1.在对当前DOM进行操做以前，尽量多的作一些准备工做，保证N次建立，1次写入。
2.在对DOM操做以前，把要操做的元素，先从当前DOM结构中删除：
2.1. 经过removeChild()或者replaceChild()实现真正意义上的删除。
2.2. 设置该元素的display样式为“none”。

3.CSS部分
另一个常常引发回流操做的状况是经过style属性对元素的外观进行修改，如element.style.backgroundColor = "blue";
每次修改元素的style属性，都确定会触发回流操做，要解决这个问题能够：
3.1.使用更改className的方式替换style.xxx=xxx的方式。
3.2.使用style.cssText = '';一次写入样式。
3.3. 避免设置过多的行内样式
3.4. 添加的结构外元素尽可能设置它们的位置为fixed或absolute
3.5. 避免使用表格来布局
3.6. 避免在CSS中使用JavaScript expressions(IE only)
4.将获取的DOM数据缓存起来。这种方法，对获取那些会触发回流操做的属性（好比offsetWidth等）尤其重要。
5.当对HTMLCollection对象进行操做时，应该将访问的次数尽量的降至最低，最简单的，你能够将length属性缓存在一个本地变量中，这样就能大幅度的提升循环的效率。

十7、 重构<script>和<style> 调用方式或合并js文件来优化请求次数，并尽可能使用外部连接方式引用

咱们经常在一个HTML文件头中看到这样标记代码:

<script src="/scripts/a.js"></script> <script src="/scripts/b.js"></script> <script src="/scripts/c.js"></script>

大可能是状况下，上述代码能够被简化成：

<script src="/ scripts /d.js"></script>

其中d.js中引用了a.js/b.js/c.js。经过document.write方法写入。

十8、 对于大的JS对象，由于建立时时间和空间的开销都比较大，所以应该尽可能考虑采用缓存。

十9、 将脚本放到底部。

脚本通常是用来于用户交互的，建议能够等页面加载完成以后再加载js文件。因此，脚本和CSS正好相反，脚本应该放在页面的底部。

二10、 除去JavaScript中的空白区域

能够用相关工具去除空白注释等,将全部的名称都从新用一个或两个字母来命名将带来显著的改善。（但须要留有一个未验收的备份文件，方便之后维护）
转自：http://blog.csdn.net/huanghui8030/article/details/10148291