OneAPM大讲堂 | 提升JavaScript性能的30个技巧

文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现。

您是网站管理员仍是网页开发人员?想建立超快速的网站吗?

今天咱们来看看 JavaScript，这项神奇而又复杂的技术。它使网站内容更加丰富，但经常出现的运行性能问题又下降了用户的体验。事实已经证实，最佳的终端用户体验能提高网站的转换率、Google搜索排名以及访问者的满意度。高性能的JavaScript意味着会给您和您的公司带来更多更好的业务。

下面咱们介绍提升 JavaScript 性能的一些技巧。一样地，这或许能够帮助网站管理员和网站开发人员建立快速的网站，并提供一流的用户体验。

技巧 #1 – 评估局部变量

(http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx)

主要针对IE而言，因为局部变量的查找是从最特定做用域到最大做用域，且能够经过多个域层级，因此这种查找会致使查询到通用的结果。在定义函数做用域的时候，若是一个局部变量在以前没有进行过var变量声明， 那么此处必定要在变量名前加上var关键字以定义其当前的做用域和防止查询，从而提升代码的速度。

技巧 #2 – 建立代码快捷方式以加速编码

对于使用频繁的有用代码，能够经过为较长的代码建立快捷方式来加快编码过程，例如 document.getElementById。 经过建立一个快捷方式，编写较长的脚本便不会耗时过久，而且能够节省整个过程的时间。

技巧 #3 – 在将元素片断添加到DOM以前对其实施操做

(http://www.jquery4u.com/dom-modification/improve-javascript-performance)

在建立 DOM 的元素节点以前，请确保已经执行了全部的操做，以提升 JavaScript 的性能。 这样就无需再摒弃 Prepend和 Append 的 jQuery APIs 了。

技巧 #4 – 使用Minification保存字节

(http://sixrevisions.com/web-development/10-ways-to-improve-your-web-page-performance)

经过删除字符(标签，源代码文档，空格等)而不改变文件功能的方式减少 JavaScript 文档。

有许多缩小工具能够用来完成这个过程，而且还能够将缩小复原。 缩小是从源代码中删除全部没必要要的字符而不改变其功能的过程。

技巧 #5 – 除非必要，不然不要使用嵌套循环

减小没必要要的循环，例如 for 和 while 循环，以保持 JavaScript 的线性，并避免须要遍历数千个对象。无用的循环可能会致使浏览器处理代码时更困难，从而减缓速度。

技巧 #6 – 缓存对象以提升性能

不少时候，会重复使用脚原本访问某个对象。 将重复访问的对象存储在用户定义的变量中，而且以后在引用该对象时使用此变量，能够马上实现性能提高。

技巧 #7 – 使用.js文件来缓存脚本

(http://www.javascriptkit.com/javatutors/efficientjs.shtml)

使用这种技术能够实现性能提高，由于它容许浏览器只加载脚本一次，当页面被从新加载或从新访问时只须要从缓存中调用脚本便可。

技巧 #8 – 将JavaScript放置到页面的底部

将脚本尽量放在页面底部的位置会加快渲染进度，同时也会增长下载并行度。 其结果是页面看起来加载得更快了，而且在某些状况下，它也能够减小所须要的总的代码量。

技巧 #9 – 使用jQuery做为框架

jQuery 用于 HTML 脚本编程，是一个易于使用的 JavaScript 库，能够帮助任何网站实现加速。 jQuery 提供了大量能够快速使用的插件，即便是新手程序员也不成问题。

技巧 #10 – 使用Gzip压缩文件

(http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website)

使用 GZip 能够明显地下降 JavaScript 文件的大小，节省带宽，并加快响应时间。 有时 JavaScript 文件很是大，若是没有通过压缩，它可能会形成网站瘫痪。较小的文件能提供更快、更使人满意的网页体验。

技巧 #11 – 不要使用With关键字

(http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx)

“With”这个关键词被认为是害群之马，由于它自己存在一些让人倍感沮丧的缺陷。虽然有了它使用局部属性的过程会变得更加简单，但当在其余做用域中查找变量时，使用With会增大代价。

技巧 #12 – 尽可能减小对HTTP的请求

(http://www.websiteoptimization.com/speed/tweak/http)

经过结合外部文件和直接在 XHTML 页面中嵌入 JavaScript 来尽可能减小对 HTTP 返回页面的请求。 每个特定的 HTTP 请求传输至服务器端都会致使大量的时延。

技巧 #13 – 实现事件代理

使用事件代理将会使利用单个事件处理程序来为整个页面管理某种事件类型变得更加容易。 若是不使用事件代理，大型的 Web 应用程序可能会因为过多的事件处理程序而中止工做。 实现事件代理的好处包括： 须要管理的功能更少，代码和 DOM 之间的联系更少，进程所需的内存更少。

技巧 #14 – 不要重复使用相同的脚本

(http://www.abhishekbharadwaj.com/2010/12/speed-up-your-website-avoid-duplicate-scripts)

重复的脚本对性能会形成显著的影响。重复的脚本会建立不须要的HTTP请求，尤为是在IE浏览器中。在HTML页面中使用脚本标签，能够帮助避免意外地生成重复的脚本。

技巧 #15 – 移除双美圆符号$$

(http://www.mellowmorning.com/2008/05/18/javascript-optimization-high-performance-js-apps)

当考虑提高网站的速度时，使用双美圆符号$$并非必要的选择。

技巧 #16 – 建立变量引用

(http://mondaybynoon.com/2009/04/27/a-couple-of-quick-tips-for-javascript-optimization)

当须要重复使用某个节点时，最好为该节点定义一个变量，使用节点时对变量进行引用，而不是反复来回操做。针对少许这样的节点，也许这并不能显著地提高性能，可是在节点数量很大时，这种方法就能够带来明显的影响。

技巧 #17 – 提升Object Detection的速度

(http://dean.edwards.name/weblog/2005/12/js-tip1)

一种更有效的使用 Object Detection 的方法是使用基于对象检测而动态建立的代码，而不是在函数内部去执行对象检测。

技巧 #18 – 编写有效的循环

(http://robertnyman.com/2008/04/11/javascript-loop-performance)

根据浏览器的不一样，不一样的循环实现方法也会对网站的性能产生很大的影响。 编写不正确的循环可能会下降那些具备大访问量的页面的响应速度，或者致使同时运行多个循环。

技巧 #19 – 缩短做用域链

全局做用域一般较慢，由于每次执行函数的时候，它会引起建立一个临时的调用做用域，JavaScript 会在做用域链中搜索第一个对象，若是找不到该变量，则会遍历链直到搜索到全局对象。

技巧 #20 – 对NodeLists直接索引

NodeLists 是动态的，会占用大量的内存，由于当底层的文档对象更改时它们也会被更新。 直接对列表进行索引会速度更快，由于此时浏览器不须要建立节点列表对象。

技巧 #21 – 不要使用‘eval’

虽然“eval”函数是运行任何代码的好方法，可是在实际运行时，传递给 eval 函数的每一个字符串都须要进行解析和执行。 每次调用eval函数的时候，都会引入这些时间开销。

技巧 #22 – 使用函数内联

(https://dl.acm.org/citation.cfm?id=844097)

函数内联有助于减小函数调用的成本，并用被调用的函数体替换函数调用。 在 JavaScript 中执行函数调用是一个高成本的操做，由于须要执行几个准备步骤：为参数分配空间，复制参数以及解析函数名称。

技巧 #23 – 实现 Common Sub-expression Elimination (CSE)

(http://sunilkumarn.wordpress.com/2010/10/19/common-subexpression-elimination-cse)

Common Sub-expression Elimination (CSE)是一种以性能为目标的编译器优化技术，用于搜索相同的表达式对象，并用保存着计算值的单个变量替换它们。能够认为，对通用子表达式使用单个的局部变量老是比保持代码不变具备更快的速度。

技巧 #24 – 离线构建DOM节点以及全部子节点

当向站点添加复杂的内容(例如表格)时，经过离线的方式添加复杂的子树能够提高性能。

技巧 #25 – 尽可能不要使用全局变量

因为脚本引擎须要搜索做用域，因此当从函数内部或其余做用域内引用全局变量时，若是局部做用域丢失，全局变量将被销毁。若是全局做用域中的变量并不一直存在于脚本的生命周期，则能够提高性能。

技巧 #26 – 使用原始的函数操做而不使用函数调用

经过使用等效的原函数而非函数调用，能够在对性能有关键影响的循环和函数中实现速度提高。

技巧 #27 – 不要一直保留对其余文档的引用

(http://dev.opera.com/articles/view/efficient-javascript/?page=4#docreferences)

当脚本结束后再也不保留对其余文档的引用能够实现更快的性能。由于对其余文档中的对象进行的任何引用不会被保存在整个 DOM 树中，而且脚本环境也不会一直保留在内存中。 所以文档自己不用再被加载。

技巧 #28 – 使用XMLHttpRequest

(http://dev.opera.com/articles/view/efficient-javascript/?page=4#docreferences)

XMLHttpRequest 有助于减小来自服务器端的内容数量，而且避免在页面加载的间隙销毁和从新建立脚本环境对性能形成的影响。必定要确保支持 XMLHttpRequest，不然可能会致使问题和混淆。

技巧 #29 – 避免使用try-catch-finally结构

(http://dev.opera.com/articles/view/efficient-javascript/?page=2)

每当执行 catch 子句时，捕获的异常对象被分配给一个变量，“try-catch-finally”会在运行时在当前做用域中建立一个新变量。 许多浏览器不能有效地处理这个过程，由于变量是在运行时被建立和销毁的。避免使用它!

技巧 #30 – 不要误用 for-in

(http://dev.opera.com/articles/view/efficient-javascript/?page=2)

因为“for-in”循环须要脚本引擎构建包含全部可枚举属性的列表，所以 for 循环内的代码是不会修改这个列表的。 在 for 循环内部，预先计算出列表的长度并赋给变量 len，而后进行迭代。

后续咱们还会发布有关性能管理的系列帖子...敬请关注!

Browser Insight 是一个基于真实用户的 Web 前端性能监控平台，可以帮你们定位网站性能瓶颈，网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。

来源：http://blog.oneapm.com/apm-tech/802.html