9. 对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。例如val1 < val2 ? val1 : val2;执行速度快于Math.min(val1, val2);,类似的,myArr.push(newEle);慢于myArr[myArr.length] = newEle;
这条很好理解,原生态的好。
10. 将函数的引用作为参数传递到setTimeout()和setInterval()里优于将函数名作为字符串参数传递(硬编码)。例如,setTimeout(”someFunc()”, 1000)执行效率慢于setTimeout(someFunc, 1000)
道理类似如上的eval方式。
11. 当进行遍历操作时避免使用DOM操作。通过像getElementsByTagName()这 种方法得到的DOM元素队列都是动态的;有可能在你还没有对它遍历完成时,它已经被改变。这有可能导致死循环。
没有补充。
12. 当你对对象的成员(属性或方法)进行反复操作时,先存储对它们的引用。例如var getTags = document.getElementsByTagName; getTags(’div’);
这条规则的例子,我认为没有表达规则的意思,所以它举得例子不好。并且我按照它的例子测试,并没有发现两者的差异,所以我重新写测试代码如下:
01 |
function testMethod1() { |
02 |
var startTime = new Date(); |
03 |
var tag = document.getElementById( 'testDiv' ); |
04 |
for (var i=0; i<50000; i++) var color = tag.style.backgroundColor; |
05 |
document.getElementById( 'divShowTime1' ).innerHTML = '耗时1:' + ( new Date() - startTime) + 'ms' ; |
06 |
} |
07 |
function testMethod2() { |
08 |
var startTime = new Date(); |
09 |
for (var i=0; i<50000; i++) var color = document.getElementById( 'testDiv' ).style.backgroundColor; |
10 |
document.getElementById( 'divShowTime2' ).innerHTML = '耗时2:' + ( new Date() - startTime) + 'ms' ; |
11 |
} |
测试结果:
IE8 | Firefox | Chrome | |
1 |
耗时1:400ms |
耗时1:115ms |
耗时1:28ms |
2 |
耗时1:404ms |
耗时1:116ms |
耗时1:27ms |
3 |
耗时1:17ms |
耗时1:115ms |
耗时1:27ms |
4 |
耗时1:399ms |
耗时1:119ms |
耗时1:29ms |
这个结果也很容易理解,毕竟多调用了一次取DOM函数!