Web性能优化系列:10个JavaScript性能提升的技巧
由 伯乐在线 - Delostik 翻译,黄利民 校稿。未经许可,禁止转载!
英文出处:jonraasch.com。欢迎加入翻译小组。
Nicholas Zakas是一位 JS 大师,Yahoo!
首页的前端主程。他是《高性能 Javascript》的作者,这本书值得每个程序员去阅读。
当谈到 JS 性能的时候,Zakas差不多就是你要找的,2010年六月他在Google Tech Talk发表了名为《Speed Up Your Javascript》的演讲。
但 Javascript 性能优化绝不是一种书面的技术,Nicholas 的技术演进列出了10条建议,帮助你写出高效的 JS 代码。
1. 定义局部变量
当一个变量被引用的时候,JavaScript将在作用域链中的不同成员中查找这个变量。作用域链指的是当前作用于下可用变量的集合,它在各种主流浏览器中至少包含两个部分:局部变量的集合和全局变量的集合。
简单地说,如果JavaScript引擎在作用域链中搜索的深度越大,那么操作也就会消耗更多的时间。引擎首先从 this 开始查找局部变量,然后是函数参数、本地定义的变量,最后遍历所有的全局变量。
因为局部变量在这条链的起端,所以查找局部变量总是比查找全局变量要块。所以当你想要不止一次地使用一个全局变量的时候,你应该将它定义成局部变量,就像这样:
1 2 |
var blah = document.getElementById('myID'), blah2 = document.getElementById('myID2'); |
改写成
1 2 3 |
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,当我们定义一个即时函数的时候,我们就使用了闭包,比如:
1 |
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. 在循环时将控制条件和控制变量合并起来
提到性能,在循环中需要避免的工作一直是个热门话题,因为循环会被重复执行很多次。所以如果有性能优化的需求,先对循环开刀有可能会获得最明显的性能提升。
一种优化循环的方法是在定义循环的时候,将控制条件和控制变量合并起来,下面是一个没有将他们合并起来的例子:
1 2 |
for ( var x = 0; x < 10; x++ ) { }; |
当我们要添加什么东西到这个循环之前,我们发现有几个操作在每次迭代都会出现。JavaScript引擎需要:
1 2 3 |
#1:检查 x 是否存在 #2:检查 x 是否小于 0 <span style="color: #888888;">(译者注:我猜这里是作者的笔误)</span> #3:使 x 增加 1 |
然而如果你只是迭代元素中的一些元素,那么你可以使用while循环进行轮转来替代上面这种操作:
1 2 |
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倍速慢放。另外,集合对象也有可能造成死循环,比如下面的例子:
1 2 3 4 5 6 |
var divs = document.getElementsByTagName('div'); for (var i=0; i < divs.length; i++ ) { var div = document.appendChild(div); } |
这段代码造成了死循环,因为 divs 表示一个实时的HTML集合,并不是你所期望的数组。这种实时的集合在添加 <div> 标签时被更新,所以i < div.length 永远都不会结束。
解决这个问题的方法是将这些元素定义成数组,相比只设置 var divs = document.getElementsByTagName(‘div’) 稍微有点麻烦,下面是Zakas提供的强制使用数组的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function array(items) { try { return Array.prototype.concat.call(items); } catch (ex) { var i len result while (i result[i] i++; } return result; } } var divs = array( document.getElementsByTagName('div') for (var i=0l i < divs.length; i++ ) { var 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优化规则的原因,我已奉为圣经。
Web性能优化系列:10个JavaScript性能提升的技巧的更多相关文章
- JVM性能优化系列-(7) 深入了解性能优化
7. 深入了解性能优化 7.1 影响系统性能的方方面面 影响系统性能的因素有很多,以下列举了常见的一些系统性能优化的方向: 7.2 常用的性能评价和测试指标 响应时间 提交请求和返回该请求的响应之间使 ...
- JVM性能优化系列-(3) 虚拟机执行子系统
3. 虚拟机执行子系统 3.1 Java跨平台的基础 Java刚诞生的宣传口号:一次编写,到处运行(Write Once, Run Anywhere),其中字节码是构成平台无关的基石,也是语言无关性的 ...
- JVM性能优化系列-(1) Java内存区域
1. Java内存区域 1.1 运行时数据区 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.主要包括:程序计数器.虚拟机栈.本地方法栈.Java堆.方法区(运 ...
- JVM性能优化系列-(2) 垃圾收集器与内存分配策略
2. 垃圾收集器与内存分配策略 垃圾收集(Garbage Collection, GC)是JVM实现里非常重要的一环,JVM成熟的内存动态分配与回收技术使Java(当然还有其他运行在JVM上的语言,如 ...
- JVM性能优化系列-(4) 编写高效Java程序
4. 编写高效Java程序 4.1 面向对象 构造器参数太多怎么办? 正常情况下,如果构造器参数过多,可能会考虑重写多个不同参数的构造函数,如下面的例子所示: public class FoodNor ...
- JVM性能优化系列-(5) 早期编译优化
5. 早期编译优化 早起编译优化主要指编译期进行的优化. java的编译期可能指的以下三种: 前端编译器:将.java文件变成.class文件,例如Sun的Javac.Eclipse JDT中的增量式 ...
- JVM性能优化系列-(6) 晚期编译优化
6. 晚期编译优化 晚期编译优化主要是在运行时做的一些优化手段. 6.1 JIT编译器 在部分的商用虚拟机中,java程序最初是通过解释器(Interpreter) 进行解释执行的,当虚拟机发现某个方 ...
- [MySQL性能优化系列]LIMIT语句优化
1. 背景 假设有如下SQL语句: SELECT * FROM table1 LIMIT offset, rows 这是一条典型的LIMIT语句,常见的使用场景是,某些查询返回的内容特别多,而客户端处 ...
- [Android 性能优化系列]降低你的界面布局层次结构的一部分
大家假设喜欢我的博客,请关注一下我的微博,请点击这里(http://weibo.com/kifile),谢谢 转载请标明出处(http://blog.csdn.net/kifile),再次感谢 原文地 ...
- Android性能优化系列之App启动优化
Android性能优化系列之布局优化 Android性能优化系列之内存优化 Android性能优化系列之apk瘦身 应用的启动速度缓慢是我们在开发过程中常常会遇到的问题,比方启动缓慢导致的黑屏.白屏问 ...
随机推荐
- TopCoder 14084 BearPermutations2【笛卡尔树+dp】
传送:https://vjudge.net/problem/TopCoder-14084 只是利用了笛卡尔树的性质,设f[i][j]为区间[i,j]的贡献,然后枚举中间最大的点k来转移,首先是两侧小区 ...
- ubuntu 安装R 语言
我个人的环境是 ubuntu 12.04 64 位桌面版. 我自己在安装R 语言时,发现它依赖的库真不是一般的多,所以我在这里简单记录一下我整个安装过程 首先你需要安装 apt-get install ...
- PJzhang: github与出口管制·说明条款
猫宁!!! 参考链接:https://www.infoq.cn/article/KMl2EO*PSMxIkVREiYvC https://help.github.com/en/articles/git ...
- Validation(4)-临时
使用Hibernate-Validator优雅的校验参数 2019年01月01日 13:17:31 余生之君 阅读数:337 版权声明:本文为博主原创文章,未经博主允许不得转载. https:/ ...
- Tomcat日志文件的输出在Linux和Windows下的差异
前言 最近老大发现Tomcat的日志文件catalina.out里存在着大量的和公司项目相关的log信息,因为一般都是会使用日志框架并另外将log信息输出到另外的文件里的,catalina.out文件 ...
- Cstring的使用
https://msdn.microsoft.com/zh-cn/aa315043 1.字符串提取函数,CString::Left.CString::Mid .CString::Right CStri ...
- AOP 应用
AOP 的核心:解耦 1. 权限认证2. 事务3. 日志4. Lazy loading 懒加载5. Context Process 上下文处理6. Error Handler 错误追踪(异常捕获)7. ...
- Restful API官方文档
理解Restful架构:http://www.ruanyifeng.com/blog/2011/09/restful RESTful设计指南:http://www.ruanyifeng.com/blo ...
- php—cURL库基本用法总结
作用 用来连接客户端和服务器端,实从互联网上获取资源 常用接口 curl_init(): 初始化curl curl_close: 结束curl,释放资源 curl_setopt: 设置curl的属性 ...
- 洛谷1537(bitset+01背包)
总数是偶数并且其一半可得即可. bitset的移位可替代原本的数组转移. #pragma comment(linker, "/STACK:1024000000,1024000000" ...