提高 web 应用性能之 JavaScript 性能调优 （6）

look_w

XPath一个页面上往往包含 1000 多页面元素，在定位具体元素的时候，往往需要一定的时间。如果用 id 或 name 定位可能效率不会太慢，如果用元素的一些其他属性（比如 className 等等）定位，可能效率有不理想了。有的可能只能通过遍历所有元素（getElementsByTagName）然后过滤才能找到相应元素，这就更加低效了，这里我们推荐使用 XPath 查找元素，这是很多浏览器本身支持的功能。
清单 23. XPath 解决方案

1 2 3 4 5 6 7 8 9 10 11 12

if(document.evaluate){ var tblHeaders = document.evaluate(“//body/div/table//th”); var result = tblHeaders.iterateNext(); while(result) { result.style.border = “1px dotted blue”; result ……………… result = xpathResult.iterateNext(); } } else{ //getElementsByTagName() …… // 处理浏览器不支持 XPath 的情况 ……………………………… }

浏览器 XPath 的搜索引擎会优化搜索效率，大大缩短结果返回时间。
HTMLCollection 对象这是一类特殊的对象，它们有点像数组，但不完全是数组。下述方法的返回值一般都是 HTMLCollection 对象：

• document.images, document.forms
• getElementsByTagName()
• getElementsByClassName()

这些 HTMLCollection 对象并不是一个固定的值，而是一个动态的结果。它们是一些比较特殊的查询的返回值，在如下情况下，它们会重新执行之前的查询而得到新的返回值（查询结果），虽然多数情况下会和前一次或几次的返回值都一样：

• Length 属性
• 具体的某个成员

所以，HTMLCollection 对象对这些属性和成员的访问，比起数组来要慢很多。当然也有例外，Opera 和 Safari 对这种情况就处理的很好，不会有太大性能问题。
参考如下代码：
清单 24. HTMLConnection 对象

1 2 3 4 5 6 7 8 9

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 对象解决方案

1 2 3 4 5

var items = document.getElementsByTagName(“div”); var len = items.length for(var i = 0; i < len; i++){ …………………………………… . }

这样一来，效率基本与普通数组一样。
动态创建 script 标签加载并执行一段 JavaScript 脚本是需要一定时间的，在我们的程序中，有时候有些 JavaScript 脚本被加载后基本没有被使用过 （比如：脚本里的函数从来没有被调用等等）。加载这些脚本只会占用 CPU 时间和增加内存消耗，降低 Web 应用的性能。所以推荐动态的加载 JavaScript 脚本文件，尤其是那些内容较多，消耗资源较大的脚本文件。
清单 26. 创建 script 标签

1 2 3 4 5 6

if(needXHR){ document.write(“<script type= ’ test\/JavaScript ’ src= 'dojo_xhr.js' >”); } if(dojo.isIE){ document.write(“<script type= ’ test\/JavaScript ’ src= 'vml.js' >”); }