JS性能优化

一、加载和执行

　　管理浏览器中的 JavaScript 代码是个棘手的问题，因为代码执行过程会阻塞浏览器的其他进程，比如用户界面绘制。每次遇到<script>标签，页面都必须停下来等待代码下载（如果是外链文件）并执行，然后继续处理其他部分。尽管如此，还是有几种方法能减少 JavaScript  对性能的影响：

• </body>闭合标签之前，将所有<script>标签放到页面底部。这能确保在脚本执行前页面已经完成了渲染。
• 合并脚本，页面中的<script>标签越少，加载也就越快，响应也更迅速。无论外链文件还是内嵌脚本都是如此。
• 有多种无阻塞下载 JavaScript  的方法：

1. 使用<script>标签的defer属性；
2. 使用动态创建<script>元素来下载并执行代码；
3. 使用XHR对象下载 JavaScript  代码并注入页面中。

二、数据存取

　　在 JavaScript  中，数据存储的位置会对代码整体性能产生重大的影响。数据存储共有4种方式：字面量、变量、数组项、对象成员。它们有着各自的性能特点。

• 访问字面量和局部变量的速度最快，相反，访问数组元素和对象成员相对较慢。
• 由于局部变量存在于作用域链的起始位置，因此访问局部变量比访问跨作用域变量更快。变量在作用域链中的位置越深，访问所需时间就越长。由于全局变量总处在作用域链的最末端，因此访问速度也是最慢的。
• 避免使用with语句，因为它会改变执行环境作用域链。同样，try-catch语句中的catch子句也有同样的影响，也要小心使用。
• 嵌套的对象成员会明显影响性能，尽量少用。
• 属性或方法在原型链中的位置越深，访问它的速度也越慢。
• 通常来说，你可以通过把常用的对象成员、数组元素、跨域变量保存在局部变量中来改善 JavaScript  性能。

 三、DOM编程

　　访问和操作DOM是现代Web应用的重要部分。但每次穿越连接ECMAScript和DOM两个岛屿之间的桥梁，都会被收取“过桥费”。为了减少DOM编程带来的性能损失，请记住以下几点：

• 最小化DOM访问次数，尽可能在JavaScript端处理。
• 如果需要多次访问某个DOM节点，请使用局部变量存储它的引用。
• 小心处理HTML集合，因为它实时连系着底层文档。把集合的长度缓存到一个变量中，并在迭代中使用它。如果需要经常操作集合，建议把它拷贝到一个数组中。
• 使用速度更快的API，比如querySelectorAll()和firstElementChild。
• 要留意重绘和重棑；批量修改样式时，“离线”操作DOM树，使用缓存，并减少访问布局信息的次数。
• 动画中使用绝对定位，使用拖放代理。
• 使用事件委托来减少事件处理器的数量。

四、算法和流程控制

　　JavaScript和其他编程语言一样，代码的写法和算法会影响运行时间。与其他语言不同的是，JavaScript可用资源有限，因此优化技术更为重要。

• for、while和do-while循环性能特性相当，并没有一种循环类型明显快于或慢于其他类型。
• 避免使用for-in循环，除非你需要循环遍历一个属性数量未知的对象。
• 改善循环性能的最佳方式是减少每次迭代的运算量和减少循环迭代次数。
• 通常来说，switch总是比if-else块，但并不总是最佳解决方案。
• 在判断条件较多时，使用查找表比if-else和switch更快。
• 浏览器的调用栈大小限制了递归算法在JavaScript中的应用；栈溢出错误会导致其他代码中断运行。
• 如果你遇到栈溢出错误，可将方法改为迭代算法，或使用Memoization来避免重复计算。