【合集】优化和提高javascript的运行速度

提高javascript运行的13和途径

提升JavaScript运行速度之DOM篇

 

在Web开发中，JavaScript 的一个很重要的作用就是对DOM进行操作，可你知道么？对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流操作，而执行了过多的回流操作，你就会发现自己的网站变得越来越慢了，我们应该尽可能的减少DOM操作。本文是这个系列的最后一篇，给出了一些指导性原则，比如在什么时候应该对DOM可以进行什么样的操作等。

【原文】Nicholas C. Zakas - Speed up your JavaScript, Part 4
【译文】明达 - 如何提升JavaScript的运行速度（DOM篇）

以下是对原文的翻译 ：

在过去的几周中，我为大家介绍了几种可以加快JavaScript脚本运行速度的技术。第一节 介绍了如何优化循环。第二节 的重点放在优化函数内部代码上，还介绍了队列（queuing）和记忆化（memoization）两种技术，来减轻函数的工作负担。第三节 就如何将递归转换为迭代循环或者记忆化方式的话题，展开了讨论。第四节是这个系列的最后一篇，也就是本文，将重点阐述过多的DOM操作所带来的影响。

我们都知道，DOM操作的效率是很低的，而且不是一般的慢，而且这也是引发性能问题的常见问题之一。为什么会慢呢？因为对DOM的修改为影响网页的 用户界面，重绘页面是一项昂贵的操作。太多的DOM操作会导致一系列的重绘操作，为了确保执行结果的准确性，所有的修改操作是按顺序同步执行的。我们称这 个过程叫做回流（reflow），同时这也是最昂贵的浏览器操作之一。回流操作主要会发生在几种情况下：

• * 当对DOM节点执行新增或者删除操作时。
• * 动态设置一个样式时（比如element.style.width="10px"）。
• * 当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS 值（在兼容DOM的浏览器中，可以通过getComputedStyle函数获取；在IE中，可以通过currentStyle属性获取）。

解决问题的关键，就是限制通过DOM操作所引发回流的次数。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的，这些浏览器 将对对DOM的操作放进一个队列，并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说，在JavaScript执行的过程中，用户不 能和浏览器进行互动，直到一个回流操作被执行。（ 失控脚本对话框 会触发回流操作，因为他执行了一个中止JavaScript执行的操作，此时会对用户界面进行更新）

如果要减少由于DOM修改带来的回流操作，有两个基本的方法。第一个就是在对当前DOM进行操作之前，尽可能多的做一些准备工作。一个经典的例子就是向document对象中添加很多DOM节点：

for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    list.appendChild(item);
}

这段代码的效率是很低的，因为他在每次循环中都会修改当前DOM结构。为了提高性能，我们需要将这个次数降到最低，对于这个案例来说，最好的办法是 建立一个文档碎片（document fragment），作为那些已创建元素元素的临时容器，最后一次将容器的内容直接添加到父节点中：

var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    fragment.appendChild(item);
}
list.appendChild(fragment);

经过调整的代码，只会修改一次当前DOM的结构，就在最后一行，而在这之前，我们用文档碎片来保存那些中间结果。因为文档碎片没有任何可见内容，所 以这类修改不会触发回流操作。实际上，文档碎片也不能被添加到DOM中，我们需要将它作为参数传给appendChild函数，而实际上添加的不是文档碎 片本身，而是它下面的所有子元素。

 

如何优化JavaScript脚本的性能

作者：ShiningRay @ Nirvana Studio

随着网络的发展，网速和机器速度的提高，越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种 解释型语言，所以能无法达到和C/Java之类的水平，限制了它能在客户端所做的事情，为了能改进他的性能，我想基于我以前给JavaScript做过的 很多测试来谈谈自己的经验，希望能帮助大家改进自己的JavaScript脚本性能。

语言层次方面

循环

循环是很常用的一个控制结构，大部分东西要依靠它来完成，在JavaScript中，我们可以使用for(;;),while(),for(in) 三种循环，事实上，这三种循环中for(in) 的效率极差，因为他需要查询散列键，只要可以就应该尽量少用。for(;;) 和while 循环的性能应该说基本（平时使用时）等价。

而事实上，如何使用这两个循环，则有很大讲究。我在测试中有些很有意思的情况，见附录。最后得出的结论是：

• 如果是循环变量递增或递减，不要单独对循环变量赋值，应该在它最后一次读取的时候使用嵌套的++ 或-- 操作符。

• 如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数。

举例，假设arr是一个数组，最佳的遍历元素方式为：

for(var i=0, len = arr.length;i<len;i++){...}

或者，如果无所谓顺序的话：

for(var i=arr.length;i>0;i--){...}

局部变量和全局变量

局部变量的速度要比全局变量的访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的。

不使用Eval

使用eval 相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间。这时候使用JavaScript所支持的闭包可以实现函数模版（关于闭包的内容请参考函数式编程的有关内容）

减少对象查找

因为JavaScript的解释性，所以a.b.c.d.e ，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。

这一点可以和循环结合起来，因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length ，就要额外进行一个操作，而预先把var
len=a.length ，则就少了一次查询。

字符串连接

如果是追加字符串，最好使用s+=anotherStr 操作，而不是要使用s=s+anotherStr 。

如果要连接多个字符串，应该少使用+=，如

s+=a;
s+=b;
s+=c;

应该写成

s+=a + b + c；

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下

var buf = new Array();
for(var i = 0; i < 100; i++){
	buf.push(i.toString());
}
var all = buf.join("");

类型转换

类型转换是大家常犯的错误，因为JavaScript是动态类型语言，你不能指定变量的类型。

1.
把数字转换成字符串，应用"" + 1 ，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

("" + ) > String() > .toString() > new String()

这条其实和下面的“直接量”有点类似，尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。

String() 属于内部函数，所以速度很快，而.toString() 要查询原型中的函数，所以速度逊色一些，new String() 用于返回一个精确的副本。

2.
浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt() ，其实parseInt() 是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor() 或者Math.round() 。

另外，和第二节的对象查找中的问题不一样，Math 是内部对象，所以Math.floor() 其实并没有多少查询方法和调用的时间，速度是最快的。

3.
对于自定义的对象，如果定义了toString() 方法来进行类型转换的话，推荐显式调用toString() ，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高

使用直接量

其实这个影响倒比较小，可以忽略。什么叫使用直接量，比如，JavaScript支持使用[param,param,param,...] 来直接表达一个数组，以往我们都使用new Array(param,param,...) ，使用前者是引擎直接解释的，后者要调用一个Array 内部构造器，所以要略微快一点点。

同样，var foo = {} 的方式也比var foo = new Object(); 快，var reg = /../; 要比var reg=new RegExp() 快。

字符串遍历操作

对字符串进行循环操作，譬如替换、查找，应使用正则表达式，因为本身JavaScript的循环速度就比较慢，而正则表达式的操作是用C写成的语言的API，性能很好。

高级对象

自定义高级对象和Date 、RegExp 对象在构造时都会消耗大量时间。如果可以复用，应采用缓存的方式。

DOM相关

插入HTML

很多人喜欢在JavaScript中使用document.write 来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML 来将自己的HTML代码插入到页面中。

对象查询

使用[""] 查询要比.items() 更快，这和前面的减少对象查找的思路是一样的，调用.items() 增加了一次查询和函数的调用。

创建DOM节点

通常我们可能会使用字符串直接写HTML来创建节点，其实这样做

1. 无法保证代码的有效性

2. 字符串操作效率低

所以应该是用document.createElement() 方法，而如果文档中存在现成的样板节点，应该是用cloneNode() 方法，因为使用createElement() 方法之后，你需要设置多次元素的属性，使用cloneNode() 则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点。

定时器

如果针对的是不断运行的代码，不应该使用setTimeout ，而应该是用setInterval 。setTimeout 每次要重新设置一个定时器。

其他

脚本引擎

据我测试Microsoft的JScript的效率较Mozilla的Spidermonkey要差很多，无论是执行速度还是内存管理上，因为JScript现在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

文件优化

文件优化也是一个很有效的手段，删除所有的空格和注释，把代码放入一行内，可以加快下载的速度，注意，是下载的速度而不是解析的速度，如果是本地，注释和空格并不会影响解释和执行速度。

总结

本文总结了我在JavaScript编程中所找到的提高JavaScript运行性能的一些方法，其实这些经验都基于几条原则：

1. 直接拿手头现成的东西比较快，如局部变量比全局变量快，直接量比运行时构造对象快等等。

2. 尽可能少地减少执行次数，比如先缓存需要多次查询的。

3. 尽可能使用语言内置的功能，比如串链接。

4. 尽可能使用系统提供的API，因为这些API是编译好的二进制代码，执行效率很高

同时，一些基本的算法上的优化，同样可以用在JavaScript中，比如运算结构的调整，这里就不再赘述了。但是由于JavaScript是解释型的，一般不会在运行时对字节码进行优化，所以这些优化仍然是很重要的。

当然，其实这里的一些技巧同样使用在其他的一些解释型语言中，大家也可以进行参考。

参考

• http://www.umsu.de/jsperf/ 各种浏览器的测试对比

• http://home.earthlink.net/~kendrasg/info/js_opt/

附录1

由于是以前做过的测试，测试代码已经不全，我补充了一部分如下：

var print;

if(typeof document != "undefined" ){
    print = function(){
		document.write(arguments[0]);
	}
}else if(typeof WScript != "undefined" ){
    print = function(){
        WScript.Echo(arguments[0],arguments[1],arguments[2]);
    }
}

function empty(){
}

function benchmark(f){
    var i = 0;
    var start = (new Date()).getTime();

    while(i < pressure){
        f(i++);
    }
    var end = (new Date()).getTime();
    WScript.Echo(end-start);
}

/*
i=0
start = (new Date()).getTime();
while(i < 60000){
    c = [i,i,i,i,i,i,i,i,i,i];
    i++;
}
end = (new Date()).getTime();
WScript.Echo(end-start);
i=0
start = (new Date()).getTime();
while(i < 60000){
    c = new Array(i,i,i,i,i,i,i,i,i,i);
    i++;
}
var end = (new Date()).getTime();
WScript.Echo(end-start);
*/

function internCast(i){
    return "" + i;
}

function StringCast(i){
    return String(i)
}
function newStringCast(i){
    return new String(i)
}
function toStringCast(i){
    return i.toString();
}
function ParseInt(){
    return parseInt(j);
}
function MathFloor(){
    return Math.floor(j);
}
function Floor(){
    return floor(j);
}
var pressure = 50000;
var a  = "";
var floor = Math.floor;
j = 123.123;
print("-------------\nString Conversion Test");
print("The empty:", benchmark(empty));
print("intern:", benchmark(internCast));
print("String:");
benchmark(StringCast);
print("new String:");
benchmark(newStringCast);
print("toString:");
benchmark(toStringCast);
print("-------------\nFloat to Int Conversion Test");
print("parseInt");
benchmark(ParseInt);
print("Math.floor");
benchmark(MathFloor);
print("floor")
benchmark(Floor);

function newObject(){
    return new Object();
}

function internObject(){
    return {};
}
print("------------\nliteral Test");
print("runtime new object", benchmark(newObject));
print("literal object", benchmark(internObject));

附录2

代码1：

    for(var i=0;i<100;i++){
        arr[i]=0;
    }

 

代码2：

    var i = 0;
    while(i < 100){
        arr[i++]=0;
    }

 

代码3：

    var i = 0;
    while(i < 100){
        arr[i]=0;
        i++;
    }

 

在firefox下测试这两段代码，结果是代码2优于代码1和3，而代码1一般优于代码3，有时会被代码3超过；而在IE
6.0下，测试压力较大的时候（如测试10000次以上）代码2和3则有时候优于代码1，有时候就会远远落后代码1，而在测试压力较小（如5000次），则代码2>代码3>代码1。

代码4：

    var i = 0;
    var a;
    while(i < 100){
        a = 0;
        i++;
    }

 

代码5：

    var a;
    for(var i=0;i<100;i++){
        a = 0;
    }

上面两段代码在Firefox和IE下测试结果都是性能接近的。

代码6：

    var a;
    var i=0;
    while(i<100){
        a=i;
        i++;
    }

 

代码7：

    var a;
    var i=0;
    while(i<100){
        a=i++;
    }

 

代码8：

    var a;
    for(var i=0;i<100;i++){
        a = i;
    }

 

代码9：

    var a;
    for(var i=0;i<100;){
        a = i++;
    }

这四段代码在Firefox下6和8的性能接近，7和9的性能接近，而6,
8 < 7, 9；

最后我们来看一下空循环

代码10：

    for(var i=0;i<100;i++){   }

 

代码11：

    var i;
    while(i<100){        i++;    }

最后的测试出现了神奇的结果，Firefox下代码10所花的时间与代码11所花的大约是24:1。所以它不具备参考价值，于是我没有放在一开始给大家看。

 

Web 前端优化最佳实践之 JavaScript 篇

作者: Fenng | 可以转载, 转载时务必以超链接形式标明文章原始出处和作者信息及版权声明
网址: http://www.dbanotes.net/web/best_practices_for_speeding_up_your_web_site_javascript.html

Web 前端优化最佳实践之 JavaScript 篇，这部分有 6 条规则，和 CSS 篇 重复的有几条。前端优化最佳实践，最重要的还是"实践"，要理解这东西容易得很，关键是要去"实践"，去"执行"，去"反馈"，去获取受益。

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

当一个脚本在下载的时候，浏览器干不了其它的事儿(串行了)。所以，把它扔到最后面去处理。对于一些功能性的脚本，可能实现起来有些两难。不过对于 国内网站来说，有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说，绝对可行的建议，放到页面最底下。

2. Make JavaScript and CSS External

参见 CSS 篇 的描述

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS )

参见 CSS 篇 的描述

4. 移除重复脚本 (Remove Duplicate Scripts)

对于一些历史遗留站点或是论坛类的网站来说，这倒是比较常见的。接手维护人前后变化过多，每个人都有自己的一套。这就会带来一些潜在的麻烦。

5. 减少 DOM 访问 (Minimize DOM Access)

有三条指导建议:

• 缓存已经访问过的元素 (Cache references to accessed elements)
• "离线"更新节点, 再将它们添加到树中 (Update nodes "offline" and then add them to the tree)
• 避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿 (Avoid fixing layout with JavaScript)

6. Develop Smart Event Handlers

除了英文解释外，这里也提醒一下注意关于 Java Script 内存泄漏 的问题。

另外推荐一篇《如何优化 JavaScript 脚本的性能》 ，关于 Ajax 优化指导原则，可以参见 提高 Ajax 应用程序性能，避开 Web 服务漏洞 。

后记1) ：整理得差不多之后，发现网络上已经有一篇 《Yahoo!网站性能最佳体验的34条黄金守则》，是翻译稿。看来我做了一部分重复劳动。

后记 2) ：CSS / JavaScript 都有优化规则。但似乎缺少了对 Flash 的优化实践。