高性能JavaScript 编码建议

摘自《高性能JavaScript》有些建议在现代浏览器上已经区别不大了。最主要的是代码层的建议，红色的地方是值得注意的，可以看看。

 

高性能JavaScript 编码建议

1.代码层面：

在JavaScript 中，数据存储位置可以对代码整体性能产生重要影响。JS中有四种数据访问类型：直接量，变量，数组项（数组），对象成员。它们有不同的性能考虑。

（1）    直接量和局部变量访问速度非常快，数组项和对象成员需要更长时间。这取决于对作用域链（Scope）的搜索，数组和对象成员的深度大于直接量和局部变量。

（2）    局部变量比域外变量快，因为它位于作用域链的第一个对象中。变量在作用域链中的位置越深，访问所需的时间就越长。全局变量总是最慢的，因为它们总是位于作用域链的最后一环。

（3）    避免使用with 表达式，因为它改变了运行期上下文的作用域链。而且应当小心对待try-catch 表达式的catch子句，因为它具有同样效果。

（4）    嵌套对象成员会造成重大性能影响，尽量少用。也就是少用a.a.b这种调用。

（5）    一个属性或方法在原形链中的位置越深，访问它的速度就越慢。

一般来说，你可以通过这种方法提高JavaScript 代码的性能：将经常使用的对象成员，数组项，和域外变量存入局部变量中。然后，访问局部变量的速度会快于那些原始变量。这样并不会增加太多的内存消耗。

 

2.DOM操作：

DOM 访问和操作是现代网页应用中很重要的一部分。但是由于浏览器对JS和DOM的实现是分开独立的，所以，在JS中操作DOM是需要一个“桥梁”的，每次通过“桥梁”从“JS岛”到达“DOM 岛”时，都会被收取“过桥费”。为减少DOM 编程中的性能损失，请牢记以下几点：

（1）  最小化DOM 访问，在JavaScript 端做尽可能多的事情。也就是能不访问DOM就不要访问。

（2）  在反复访问DOM的地方使用局部变量存放DOM 引用。如对document进行局部引用，必要的时候。

（3）  小心地处理HTML 集合（HTML集合就是用document.getXXXs方式获取的一组HTML元素），因为对他们的操作总是会被调用为对底层文档的重新查询。将集合的length属性缓存到一个变量中，在迭代中使用这个变量。如果经常操作这个集合，可以将集合拷贝到数组中。

（4）  注意重绘和重排版；批量修改元素风格，离线操作DOM 树，缓存并减少对布局信息的访问。

（5）  动画中使用绝对坐标，使用拖放代理。

（6）  使用事件托管技术最小化事件句柄数量。事件托管技术，就是采用冒泡方式，尽量将事件挂载到元素的父节点，然后在父节点统一处理，减少事件的挂载量。

 

3.算法和流程方面

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

（1）  for，while，do-while循环的性能特性相似，谁也不比谁更快或更慢。但是除非要迭代遍历一个属性未知的对象，否则不要使用for-in 循环。for-in循环能更好的变量对象属性。

（2）  改善循环性能的最好办法是减少每次迭代中的运算量，并减少循环迭代次数。如果有必要（大多数还没必要）可以考虑达夫循环或者反向循环方式。

（3）  一般来说，switch 总是比if-else 更快，但并不总是最好的解决方法。

（4）  当判断条件较多时，查表法比if-else 或者switch更快。

（5）  浏览器的调用Stack尺寸限制了递归算法在JavaScript中的应用；栈溢出错误导致其他代码也不能正常执行。

（6）  如果你遇到一个Stack溢出错误，将方法修改为一个迭代算法或者使用制表法可以避免重复工作。

（7）  运行的代码总量越大，使用这些策略所带来的性能提升就越明显。

 

4.字符串和正则处理

密集的字符串操作和粗浅地编写正则表达式可能是主要性能障碍：

（1）  如果你不关心IE7 和它的早期版本，数组联合是连接字符串最慢的方法之一。使用简单的+和+=取而代之，可避免（产生）不必要的中间字符串。IE7前数组联合方式是唯一有效的方式。

（2）  回溯既是正则表达式匹配功能基本的组成部分，又是正则表达式影响效率的常见原因。回溯失控发生在正则表达式本应很快发现匹配的地方，因为某些特殊的匹配字符串动作，导致运行缓慢甚至浏览器崩溃。避免此问题的技术包括：使相邻字元互斥，避免嵌套量词对一个字符串的相同部分多次匹配，通过重复利用前瞻操作的原子特性去除不必要的回溯。

（3）  正则表达式并不总是完成工作的最佳工具，尤其当你只是搜索一个文本字符串时。

（4）  虽然有很多方法来修整一个字符串，使用两个简单的正则表达式（一个用于去除头部空格，另一个用于去除尾部空格）可以提供一个简洁、跨浏览器的方法，适用于不同内容和长度的字符串。

（5）  从字符串末尾开始循环查找第一个非空格字符，或者在一个混合应用中将此技术与正则表达式结合起来，提供了一个很好的替代方案，它很少受到字符串整体长度的影响。

 

5.响应速度

JavaScript 和用户界面更新在同一个进程内运行，同一时刻只有其中一个可以运行。这意味着当JavaScript 代码正在运行时，用户界面不能响应输入，反之亦然。有效地管理UI 线程就是要确保JavaScript不能运行太长时间，以免影响用户体验。牢记如下几点：

（1）  JavaScript 运行时间不应该超过100毫秒。过长的运行时间导致UI 更新出现可察觉的延迟，从而对整体用户体验产生负面影响。

（2）  JavaScript 运行期间，浏览器响应用户交互的行为存在差异。无论如何，JavaScript长时间运行将导致用户体验混乱和脱节。

（3）  定时器可用于安排代码推迟执行，它使得你可以将长运行脚本分解成一系列较小的任务。

（4）  网页应用程序越复杂，积极主动地管理UI 线程就越显得重要。没有什么JavaScript 代码可以重要到允许影响用户体验的程度。

 

6.Ajax

高性能Ajax 包括：知道你项目的具体需求，选择正确的数据格式和与之相配的传输技术。

作为数据格式，纯文本和HTML 是高度限制的，但它们可节省客户端的CPU 周期。XML 被广泛应用普遍支持，但它非常冗长且解析缓慢。JSON 是轻量级的，解析迅速（作为本地代码而不是字符串），交互性与XML 相当。字符分隔的自定义格式非常轻量，在大量数据集解析时速度最快，但需要编写额外的程序在服务器端构造格式，并在客户端解析。

除这些格式和传输技术之外，还有一些准则有助于进一步提高Ajax 的速度：

（1）  减少请求数量，可通过JavaScript 和CSS 文件打包，或者使用MXHR。可以将多个合并尤其是数据联动合并到一个Ajax请求中，返回的结果中用对象或者数组形式分割返回结果，可以有效的减少连接数。

（2）  缩短页面的加载时间，在页面其它内容加载之后，使用Ajax 获取少量重要文件。

（3）  确保代码错误不要直接显示给用户，并在服务器端处理错误，不应该发生404或者500这样的错误，可以返回一个错误信息和Operator Code，当code为错误码时Client显示错误字符串，否则执行正确流程。