媒介

参考如下两段代码：

如今的互联网应用中，在Web 开辟中经常会碰到机能的问题，尤其是针对当今的 Web2.0 +应用。JavaScript 是当今应用最为广泛的 Web 开辟说话，Web 应用的机能问题很大年夜一部分都是由法度榜样员写的 JavaScript 脚本机能不佳所造成的，琅绫擎包含了 JavaScript 说话本身的机能问题，以及其与 DOM 交互时的机能问题。本文重要来商量一下若何尽可能多的避免这类问题，大年夜而最大年夜限度的进步 Web 应用的机能。

1.JavaScript 机能调优

JavaScript 说话因为它的单线程和解释履行的两个特点，决定了它本身有很多处所有机能问题，所以可改进的处所有不少。

1.1 eval 的问题：

比较下述代码：

清单 1. eval 的问题

有"eval"的代码比没有"eval"的代码要慢上 100 倍以上。

重要原因是：JavaScript 代码在履行前会进行类似"预编译"的操作：起首会创建一个当前履行情况下的晃荡对象，并将那些用 var 申明的变量设置为晃荡对象的属性，然则此时这些变量的赋值都是 undefined，并将那些以 function 定义的函数也添加为晃荡对象的属性，并且它们的置魅恰是函数的定义。然则，如不雅你应用了"eval"，则"eval"中的代码（实际上为字符串）无法预先辨认其高低文，无法被提前解析和优化，即无法进行预编译的操作。所以，其机能也会大年夜幅度降低。

1.2 Function 的用法

比较下述代码：

清单 2. function 的用法

这里类似之前提到的"eval"办法，这里"func1"的效力会比"func2"的效力差很多，所以推荐应用第二种方法。

1.3函数的感化域链（scope chain）

JavaScript 代码解释履行，在进入函数内部时，它会预先分析当前的变量，并将这些变量归入不合的层级（level），一般情况下：

局部变量放入层级 1（浅），全局变量放入层级 2（深）。如不雅进入"with"或"try – catch"代码块，则会增长新的层级，即将"with"或"catch"里的变量放入最浅层（层 1），并将之前的层级依次加深。

参考如下代码：

清单 3. 函数感化域链

变量地点的层越浅，拜访（攫取或修改）速度越快，层越深，拜访速度越慢。所以这里对"images"，"widget"，"combination"的拜访速度比"document"，"myObj"要快一些。所以推荐尽量应用局部变量，可见如下代码：

清单 4. 应用局部变量

我们用局部变量"doc"代替全局变量"document"，如许可以改进机能，尤其是对于大年夜量应用全局变量的函数琅绫擎。

再看如下代码：

清单 5. 慎用 with

加上"with"关键字，我们让代码加倍简洁清楚了，然则如许做机能会受影响。正如之前说的，当我们进入"with"代码块时，"combination"便大年夜本来的层 1 变到了层 2，如许，效力会大年夜打扣头。所以比较一下，照样应用本来的代码：

解决筹划 2：

清单 6. 改进 with

清单 7. 缩小对象拜访层级

字符串拼接

经常看到如许的代码：

清单 8. 字符串简单拼接

str += "str1" + "str2"

这是我们拼接字符串常用的方法，然则这种方法会有一些临时变量的创建和烧毁，影响机能，所以推荐应用如下方法拼接：

清单 9. 字符串数组方法拼接

var str_array = [];

str_array.push("str1");

然则如许并不是最好的方法，JavaScript 有个特点，对于 object 对象来说，其属性拜访层级越深，效力越低，比如这里的"myObj"已经拜访到了第 3 层，我们可以如许改进一下：

str_array.push("str2");

str = str_array.join("");

这里我们应用数组（array）的"join"办法实现字符串的拼接，尤其是法度榜样的老版本的 Internet Explore（IE6）上运行时，会有异常明显的机能上的改进。

当然，最新的浏览器（如火狐 Firefox3+，IE8+ 等等）对字符串的拼接做了优化，我们也可以如许写：

清单 10. 字符串快速拼接

　　推荐阅读

　　一文让你学会所有的python模块使用

如不雅你退出 Python 说冥器并从新进入，你做的任何定义（变量和办法）都邑损掉。是以，如不雅你想要编写一些更大年夜的法度榜样，为预备说冥器输入应用一个文本编辑器会更好，并以那个文>>>详细阅读

本文标题：技术进阶：通过来JavaScript 性能调优提高 Web 应用性能

地址：http://www.17bianji.com/lsqh/40502.html

 1/2    1