高效的JavaScript


原文章的地址是:http://www.woiweb.net/efficient-javascript.html

文章分析的不错,现在我把它简化一下,顺便理一理思路。

ECMAScript

1. 避免使用 eval 或 Function 构造函数

eval 函数效率特别低,由于事先无法知晓传给 eval 的字符串中的内容,eval在其上下文中解释要处理的代码,也就是说编译器无法优化上下文,因此只能有浏览器在运行时解释代码。这对性能影响很大。function比eval差不了多少,就是不会影响周围的代码。

2. 避免使用 with

在用with结构时,会创建一个新的作用域,但编译器不知道此作用的内容,无法像其他的作用域一样去优化。解决办法创建一个临时的变量。呵呵,这个with我是没有用过的。其实就是为了缩短查找范围。

3. 不要在影响性能的关键函数中使用 try-catch-finally

try-catch-finally 结构比较特殊。和其他语法结构不同,它在 runtime 的当前作用域中创建新变量。每当 catch 执行时,就会将捕获到的 exception 对象赋给一个变量。这个变量不属于任何脚本。它在 catch 语句开始时被创建,在结束时被销毁。

如果可能,应在脚本中不频繁被调用的地方进行异常处理,或通过检查某种动作是否被支持来避免使用。
4. 分隔 eval 和 with

如果可能,尽量将这些结构和其他代码分隔开,这样他们就不会影响脚本性能。如将其放在顶级函数中,或只执行一次然后保存运行结果,避免再次使用。
5. 避免使用全局变量

  • 影响元素查询,毕竟本地的近,所以快
  • 全局变量将始终存在在脚本生命周期中。而本地变量在本地作用域结束后就将被销毁,其所使用的内存也会被垃圾收集器回收。
  • 容易冲突

6. 注意隐式对象转换

这篇文章句的例子不错,淘宝UDE上也有说这个(具体的地址到不到了,下次碰见了,在不上),其实是说装箱和拆箱,当高访问量的,应该避免自动的装箱和拆箱,这样性能的差距会很大的

7. 在关键函数中避免 for-in

这暂时没有碰到,以后注意一下。
8. 优化 string 合并

文章的作者所说的和我的测试结果不一致,测试代码如下:

console.time(“aa”);
test1();//151ms
console.timeEnd(“aa”);
function test1(){
var a = “”;
for ( var i = 0; i < 1000000; i++) {
a += “x” + “y”;
}
}

console.time(“bb”);
test2();//272ms
console.timeEnd(“bb”);
function test2(){
var a = “”;
for ( var i = 0; i < 1000000; i++) {
a += “x”;
a += “y”;
}
}



9. 基本运算符比函数调用更快

这一条暂不支持,也不反对,待进一步研究后在说
10. 向 setTimeout() 和 setInterval()传送函数名,而不要传送字符串

如果传进参数是字符串,则在一段时间之后,会和 eval一样执行字符串值,当然其低效率也和 eval 一样。

 

DOM

通常主要有三种情况引起 DOM 运行速度变慢。

  • 第一就是执行大量 DOM 操作的脚本,如从获取的数据中建造新的 DOM 树。
  • 第二种情况是脚本引起太多的 reflow 或重绘。
  • 第三种情况是使用较慢的 DOM 节点定位方法。

1. 重绘和 reflow
1. 减少 reflow 次数
2. 最小化 reflow 影响
2. 修改 DOM 树
3. 修改不可见元素
4. 测量大小
5. 一次修改多个样式值
6. 用流畅性换取速度
7. 避免搜索大量节点
8. 使用 XPath 提高速度

看来的看看sizzle.js的源代码的,DOM查询时怎么做的啊。
9. 避免在遍历 DOM 时修改 DOM
10. 使用变量保存 DOM 值

页面载入

1. 避免保存来自其他文档的引用
2. 快速历史浏览
3. 使用 XMLHttpRequest
4. 动态创建 SCRIPT 元素
5. location.replace() 控制历史项

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: