var items = [“test1”, “test2”, “test3”, ……………… ];
for(var i = 0; i < items.length; i++){
………………………………
}
var items = document.getElementsByTagName(“div”);
for(var i = 0; i < items.length; i++){
…………………………………… .
}
上述两端代码，下面的效率比起上面一段要慢很多，因为每一个循环都会有“items.length”的触发，也就会导致“document.getElementsByTagName(..)”方法的再次调用，这便是效率便会大幅度下降的原因。我们可以这样解决：
清单 25. HTMLConnection 对象解决方案
复制代码 代码如下:
var items = document.getElementsByTagName(“div”);
var len = items.length
for(var i = 0; i < len; i++){
…………………………………… .
}
这样一来，效率基本与普通数组一样。
动态创建 script 标签
加载并执行一段 JavaScript 脚本是需要一定时间的，在我们的程序中，有时候有些 JavaScript 脚本被加载后基本没有被使用过 （比如：脚本里的函数从来没有被调用等等）。加载这些脚本只会占用 CPU 时间和增加内存消耗，降低 Web 应用的性能。所以推荐动态的加载 JavaScript 脚本文件，尤其是那些内容较多，消耗资源较大的脚本文件。
清单 26. 创建 script 标签
复制代码 代码如下:
if(needXHR){
document.write(“<script type= ' test\/JavaScript ' src= 'dojo_xhr.js' >”);
}
if(dojo.isIE){
document.write(“<script type= ' test\/JavaScript ' src= 'vml.js' >”);
}
--------------------------------------------------------------------------------
结束语
这篇文章介绍了Web 开发中关于性能方面需要注意的一些小细节，从 JavaScript 本身着手，介绍了 JavaScript 中需要避免的一些函数的使用和编程规则，比如 eval 的弊端，function scope chain 以及 String 的用法等等，也分享了一些比较推荐的做法，并扩展到 JavaScript 对 DOM 操作的性能调优，比如利用 Repaint 和 Reflow 的机制，如何使用特殊测量属性，样式相关的性能调优以及 HTMLCollection 对象的原理和使用小技巧。这些小细节我们可以在开发过程中尽量注意一下，以尽可能多的提高我们 Web 应用的性能。
您可能感兴趣的文章: