首页 存档 技术 查看内容

高性能JavaScript编程实践 前言 避免双重求值 使用Object/Array直接量 不要重复工作 ...

2018-3-30 13:00 |来自: 互联网 249 0

摘要: 前言 最近在翻《高性能JavaScript》这本书(2010年版 丁琛译),感觉可能是因为浏览器引擎的改进或是其他原因,书中有些原本能提高性能的代码在最新的浏览器中已经失效。但是有些章节的有些内容还是相当不错的,譬如 ...

前言

最近在翻《高性能JavaScript》这本书(2010年版 丁琛译),感觉可能是因为浏览器引擎的改进或是其他原因,书中有些原本能提高性能的代码在最新的浏览器中已经失效。但是有些章节的有些内容还是相当不错的,譬如第八章编程实践,为了方便以后的查阅,对此做个总结。失效的代码也会在以后做更进一步的探索。

避免双重求值

这个优化策略很好理解,我们可能都已经不知不觉地运用在了实际的编程中:

JavaScript


1

2

3

4

5

6

7

// not use this

setTimeout('alert("hello world")',1000);

// use this

setTimeout(function(){

alert('hello world');

},1000);

上面的两段代码都能执行,但是我们一般用第二种,同样的对于setInterval来说也是如此,类似的还有eval()以及Function()构造函数。JavaScript像其他很多脚本语言一样,允许你在程序中提取一个包含代码的字符串,然后动态执行它。当你在JavaScript代码中执行另一段JavaScript代码时,都会导致双重求值的性能消耗,此代码首先会以正常的方式求值,然后在执行过程中对包含于字符串中的代码发起另一个求值运算。所以,大多数时候没必要使用eval()和Function(),就避免使用它们;至于setTimeout和setInterval,建议传入函数而不是字符串来作为第一个参数。

由此联想到了php中的”和“”,我们尽量用”去引用字符串,也是同样的原因。

使用Object/Array直接量

JavaScript


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// use this

varobj={

name:'hanzichi',

age:10

};

vararr=[0,1,2,3];

// not use this

varobj=newObject();

obj.name='hanzichi';

obj.age=10;

vararr=newArray();

arr[0]=0;

arr[1]=1;

arr[2]=2;

arr[3]=3;

不要重复工作

也许最常见的重复工作就是浏览器探测(当然“不要重复工作”只是一种思想,并不一定针对浏览器探测)。

考虑一个添加事件处理器的例子,典型的跨浏览器代码写法如下:

JavaScript


1

2

3

4

5

6

7

8

9

10

11

functionaddHandler(target,eventType,handler){

if(target.addEventListener){// DOM2 Events

target.addEventListener(eventType,handler,false);

}else{// IE

target.attachEvent('on' eventType,handler);

}

}

addHandler(document,'click',function(){

console.log('hello world');

});

但是如果一个页面调用了好多次addHandler函数添加事件,每次都会去做浏览器的判断,但是事实是每次的判断结果都是一样的,因为浏览器并不会变化,这时我们就可以针对“不要重复工作”做一个优化策略。

  • 延迟加载

声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除


路过

雷人

握手

鲜花

鸡蛋

相关分类

返回顶部