Web性能优化系列 10个提升JavaScript性能的技巧

Nicholas Zakas是一位 JS 大师,Yahoo! 首页的前端主程。他是《高性能 Javascript》的作者,这本书值得每个程序员去阅读。

当谈到 JS 性能的时候,Zakas差不多就是你要找的,2010年六月他在Google Tech Talk发表了名为《Speed Up Your Javascript》的演讲。

但 Javascript 性能优化绝不是一种书面的技术,Nicholas 的技术演进列出了10条建议,帮助你写出高效的 JS 代码。

1. 定义局部变量

当一个变量被引用的时候,JavaScript将在作用域链中的不同成员中查找这个变量。作用域链指的是当前作用于下可用变量的集合,它在各种主流浏览器中至少包含两个部分:局部变量的集合和全局变量的集合。

简单地说,如果JavaScript引擎在作用域链中搜索的深度越大,那么操作也就会消耗更多的时间。引擎首先从 this 开始查找局部变量,然后是函数参数、本地定义的变量,最后遍历所有的全局变量。

因为局部变量在这条链的起端,所以查找局部变量总是比查找全局变量要块。所以当你想要不止一次地使用一个全局变量的时候,你应该将它定义成局部变量,就像这样:

var blah = document.getElementById('myID'),
blah2 = document.getElementById('myID2');

改写成

var doc = document,
blah = doc.getElementById('myID'),
blah2 = doc.getElementById('myID2');

2. 不要使用 with() 语句

这是因为 with() 语句将会在作用域链的开始添加额外的变量。额外的变量意味着,当任何变量需要被访问的时候,JavaScript引擎都需要先扫描with()语句产生的变量,然后才是局部变量,最后是全局变量。
So with() essentially gives local variables all the performance drawbacks of global ones, and in turn derails Javascript optimization. 因此with()语句同时给局部变量和全局变量的性能带来负面影响,最终使我们优化JavaScript性能的计划破产。

3. 小心使用闭包

虽然你可能还不知道“闭包”,但你可能在不经意间经常使用这项技术。闭包基本上被认为是JavaScript中的new,当我们定义一个即时函数的时候,我们就使用了闭包,比如:

document.getElementById('foo').onclick = function(ev) { };

闭包的问题在于:根据定义,在它们的作用域链中至少有三个对象:闭包变量、局部变量和全局变量。这些额外的对象将会导致第1和第2个建议中提到的性能问题。

但是我认为Nicholas并不是要我们因噎废食,闭包对于提高代码可读性等方面还是非常有用的,只是不要滥用它们(尤其在循环中)。

4. 对象属性和数组元素的速度都比变量慢

谈到JavaScript的数据,一般来说有4种访问方式:数值、变量、对象属性和数组元素。在考虑优化时,数值和变量的性能差不多,并且速度显著优于对象属性和数组元素。
因此当你多次引用一个对象属性或者数组元素的时候,你可以通过定义一个变量来获得性能提升。(这一条在读、写数据时都有效)
虽然这条规则在绝大多数情况下是正确的,但是Firefox在优化数组索引上做了一些有意思的工作,能够让它的实际性能优于变量。但是考虑到数组元素在其他浏览器上的性能弊端,还是应该尽量避免数组查找,除非你真的只针对于火狐浏览器的性能而进行开发。

5. 不要在数组中挖得太深

另外,程序员应该避免在数组中挖得太深,因为进入的层数越多,操作速度就越慢。
简单地说,在嵌套很多层的数组中操作很慢是因为数组元素的查找速度很慢。试想如果操作嵌套三层的数组元素,就要执行三次数组元素查找,而不是一次。
因此如果你不断地引用 foo.bar, 你可以通过定义 var bar = foo.bar 来提高性能。

6. 避免 for-in 循环(和基于函数的迭代)

这是另一条非常教条的建议:不要使用for-in循环。
这背后的逻辑非常直接:要遍历一个集合内的元素,你可以使用诸如for循环、或者do-while循环来替代for-in循环,for-in循环不仅仅可能需要遍历额外的数组项,还需要更多的时间。
为了遍历这些元素,JavaScript需要为每一个元素建立一个函数,这种基于函数的迭代带来了一系列性能问题:额外的函数引入了函数对象被创建和销毁的上下文,将会在作用域链的顶端增加额外的元素。

7. 在循环时将控制条件和控制变量合并起来

提到性能,在循环中需要避免的工作一直是个热门话题,因为循环会被重复执行很多次。所以如果有性能优化的需求,先对循环开刀有可能会获得最明显的性能提升。
一种优化循环的方法是在定义循环的时候,将控制条件和控制变量合并起来,下面是一个没有将他们合并起来的例子:
 for ( var x = 0; x < 10; x++ ) {
};
当我们要添加什么东西到这个循环之前,我们发现有几个操作在每次迭代都会出现。JavaScript引擎需要:

#1:检查 x 是否存在
#2:检查 x 是否小于 0 (译者注:我猜这里是作者的笔误)
#3:使 x 增加 1

然而如果你只是迭代元素中的一些元素,那么你可以使用while循环进行轮转来替代上面这种操作:

var x = 9;
do { } while( x-- );

如果你想更深入地了解循环的性能,Zakas提供了一种高级的循环优化技巧,使用异步进行循环(碉堡了!)

8. 为HTML集合对象定义数组

JavaScript使用了大量的HTML集合对象,比如 document.forms,document.images 等等。通常他们被诸如 getElementsByTagName、getElementByClassName 等方法调用。

由于大量的DOM selection操作,HTML集合对象相当的慢,而且还会带来很多额外的问题。正如DOM标准中所定义的那样:“HTML集合是一个虚拟存在,意味着当底层文档被改变时,它们将自动更新。”这太可怕了!

尽管集合对象看起来跟数组很像,他们在某些地方却区别很大,比如对于特定查询的结果。当对象被访问进行读写时,查询需要重新执行来更新所有与对象相关的组分,比如 length。

HTML集合对象也非常的慢,Nicholas说好像在看球的时候对一个小动作进行60倍速慢放。另外,集合对象也有可能造成死循环,比如下面的例子:

var divs = document.getElementsByTagName('div');

for (var i=0; i < divs.length; i++ ) {
  var div = document.createElement("div");
  document.appendChild(div);
}

这段代码造成了死循环,因为 divs 表示一个实时的HTML集合,并不是你所期望的数组。这种实时的集合在添加 <div> 标签时被更新,所以i < div.length 永远都不会结束。

解决这个问题的方法是将这些元素定义成数组,相比只设置 var divs = document.getElementsByTagName(‘div') 稍微有点麻烦,下面是Zakas提供的强制使用数组的代码:

function array(items) {
  try {
    return Array.prototype.concat.call(items);
  } catch (ex) {

    var i    = 0,
      len   = items.length,
      result = Array(len);

    while (i < len) {
      result[i] = items[i];
      i++;
    }

    return result;
  }
}

var divs = array( document.getElementsByTagName('div') );

for (var i=0l i < divs.length; i++ ) {
  var div = document.createElement("div");
  document.appendChild(div);
}

9. 不要碰DOM!

不使用DOM是JavaScript优化中另一个很大的话题。经典的例子是添加一系列的列表项:如果你把每个列表项分别加到DOM中,肯定会比一次性加入所有列表项到DOM中要慢。这是因为DOM操作开销很大。
Zakas对这个进行了细致的讲解,解释了由于回流(reflow)的存在,DOM操作是非常消耗资源的。回流通常被理解为浏览器重新选渲染DOM树的处理过程。比如说,如果你用JavaScript语句改变了一个div的宽度,浏览器需要重绘页面来适应变化。
任何时候只要有元素被添加到DOM树或者从DOM树移除,都会引发回流。使用一个非常方便的JavaScript对象可以解决这个问题——documentFragment,我并没有使用过,但是在Steve Souders也表示同意这种做法之后我感觉更加肯定了。
DocumentFragment 基本上是一种浏览器以非可视方式实现的类似文档的片段,非可视化的表现形式带来了很多优点,最主要的是你可以在 documentFragment 中添加任何结点而不会引起浏览器回流。

10. 修改CSS类,而不是样式

你也许听说过:修改CSS类必直接修改样式会更高效。这归结于回流带来的另一个问题:当布局样式发生改变时,会引发回流。
布局样式意味着任何影响改变布局的变化都会强制引起浏览器回流。比如宽度、高度、字号、浮动等。
但是别误会我的意思,CSS类并不会避免回流,但是可以将它的影响最小化。相比每次修改样式都会引起回流,使用CSS类一次修改多个样式,只需要承担一次回流带来的消耗。
因此在修改多个布局样式的时候,使用CSS类来优化性能是明智的选择。另外如果你需要在运行时定义很多歌CSS类,在DOM上添加样式结点也是不错的选择。

总结

Nicholas C. Zakas 是JavaScript界的权威。在写这篇文章的时候,我发现我引用的很多文章也是他写的——因为太难找到其他更好的文章。
Zakas的技术演进非常棒,他解释了很多JavaScript优化规则的原因,我已奉为圣经。

时间: 2016-09-24

javascript函数中的3个高级技巧

前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本文将再深入一步,介绍函数的3个高级技巧 技巧一:作用域安全的构造函数 构造函数其实就是一个使用new操作符调用的函数 function Person(name,age,job){ this.name=name; this.age=age; this.job=job; } var person=new Person('match',28,'Software E

AngularJS压缩JS技巧分析

本文实例讲述了AngularJS压缩JS的操作技巧.分享给大家供大家参考,具体如下: 大多数web项目在发布时候都会对js代码进行压缩,目的是为了减少js文件的大小,节省一点流量. 它的原理很简单,就是对参数及部分变量名和函数进行重命名. 但是这种工作方式在AngularJS的应用中会有例外. 由于AngularJS的依赖注入是根据参数名进行注入的,显然,对参数进行重命名会破坏这个机制. 如果不进行特殊处理,进行压缩(minify)之后,在执行时将会出现这样的错误 Unknow provider

AngularJS 应用身份认证的技巧总结

在web中很多时候都能应用到身份认证,本文介绍了AngularJS 应用身份认证的技巧,废话不多说了一起往下看吧. 身份认证 最普遍的身份认证方式就是用用户名(或 email)和密码做登陆操作.这就意味要实现一个登陆的表单,以便用户能够用他们个人信息登陆.这个表单看起来是这样的: <form name="loginForm" ng-controller="LoginController" ng-submit="login(credentials)&q

JS常用函数和常用技巧小结

学习和工作的过程中总结的干货,包括常用函数.常用js技巧.常用正则表达式.git笔记等.为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路. Ajax请求 jquery ajax函数 我自己封装了一个ajax的函数,代码如下: var Ajax = function(url, type success, error) { $.ajax({ url: url, type: type, dataType: 'json', timeout: 10000, success: fu

利用Node.js获取项目根目录的小技巧

假设我们的js文件写在server目录中,但是我们的资源文件存储在app/img目录中. 实现功能 如下图,我们需要在server/index.js文件中使用fs读取app/img/favicon.ico文件. 实现方法 在node.js只提供了一个 dirname全局变量.通过 dirname可以获得"C:\wwwroot\yidata\server".这时需要用到path. 首先 import path from 'path'; (ES6)或var path = require (

12个非常有用的JavaScript技巧

在这篇文章中,我将分享12个非常有用的JavaScript技巧.这些技巧可以帮助你减少并优化代码. 1) 使用!!将变量转换成布尔类型 有时,我们需要检查一些变量是否存在,或者它是否具有有效值,从而将它们的值视为true.对于做这样的检查,你可以使用||(双重否定运算符),它能自动将任何类型的数据转换为布尔值,只有这些变量才会返回false:0,null,"",undefined或NaN,其他的都返回true.我们来看看这个简单的例子: function Account(cash) {

JavaScript 12个有用的数组技巧

目录 数组去重 1.from()叠加new Set()方法 2.spread操作符(-) 替换数组中的特定值 没有map()的映射数组 空数组 将数组转换为对象 用数据填充数组 合并数组 两个数组的交集 删除数组中的假值 获取数组中的随机值 lastIndexOf()方法 将数组中的所有值相加 数组是Javascript最常见的概念之一,它为我们提供了处理数据的许多可能性,熟悉数组的一些常用操作是很有必要的. 数组去重 1.from()叠加new Set()方法 字符串或数值型数组的去重可以直接

分享12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func

12个非常实用的JavaScript小技巧【推荐】

这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: funct

21个值得收藏的Javascript技巧

1  Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如下: 复制代码 代码如下: var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];var str = fruits.valueOf(); 输出:apple,peaches,oranges,mangoes 其中,valueOf()方法会将Jav

今天分享几个少见却很有用的 JS 技巧

1. "返回"按钮 使用 history.back() 可以创建一个浏览器"返回"按钮. <button onclick="history.back()"> 返回 </button> 2. 数字分隔符 为了提高数字的可读性,您可以使用下划线作为分隔符: const largeNumber = 1_000_000_000; console.log(largeNumber); // 1000000000 3. 事件监听器只运行

12个Visual Studio调试效率技巧(小结)

在这篇文章中,我们假定读者了解 VS 基本的调试知识,如: F5 开始使用调试器运行程序 F9 在当前行设置断点 F10 运行到下一个断点处 F5 从被调试的已停止程序恢复执行 F11 步进到函数内(如果当前程序指针指向一个函数) F10 步过函数(如果当前程序指针指向一个函数) Shift+F11 步出执行的函数 暂停执行 附加到进程 鼠标悬停时快速查看源代码中的元素 调试窗口:局部变量.监视.即时窗口.模块.调用堆栈.异常设置 许多开发人员使用这个功能强大的工具包来处理调试会话.然而, Vi

19个很有用的 JavaScript库推荐

然而需要实现一些特定的功能,则可以选择功能更专一的轻量库,今天这篇文章与大家分享16个很有用的 JavaScript 库. Blackbird: Open Source JavaScript Logging UtilityBlackbird 是一款非常酷的 JavaScript 调试工具,带有一个漂亮的界面显示和过滤调试信息. Treesaver.jsTreesaver 是一个用于创建杂志布局的 JavaScript 框架. BibliotypeBibliotype 是一个简单的基于 HTML.

7个好用的JavaScript技巧分享(译)

前言 就像所有其他编程语言一样,JavaScript也有许多技巧可以完成简单和困难的任务. 一些技巧广为人知,而其他技巧则足以让你大吃一惊. 让我们来看看你今天就可以开始使用的七个JavaScript技巧吧! 原文链接:davidwalsh.name/javascript-- 数组去重 数组去重可能比您想象的更容易: var j = [...new Set([1, 2, 3, 4, 4])] >> [1, 2, 3, 4] 很简单有木有! 过滤掉falsy值 是否需要从数组中过滤出falsy值

Pycharm5个非常有用的方法技巧

目录 一.分屏展示 二.远程 Python 解释器 三.Live Templates 四.代码提示 五.提取函数 extract method 一.分屏展示 当你想同时看到多个文件的时候: 右击标签页:选择 move right 或者 split vertical: 效果: 二.远程 Python 解释器 解释器设置里点击设置:选择 docker, ssh 等远程解释器. 三.Live Templates live templates 主要是偷懒用的,采用事先定义好的模板,一个按键完成一长串的代