优化网站设计（二十五）：避免对DOM元素进行过多操作

前言

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过，我在不同的场合也分享过这样的话题。

作为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Sitehttp://developer.yahoo.com/performance/rules.html，同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践，并结合自己的实际项目情况进行应用。 接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，通过一个系列文章的形式，做些讲解和演绎，以帮助大家更好地理解这些原则，并且更好地使用他们。

准备工作

为了跟随我进行后续的学习，你需要准备如下的开发环境和工具

1. Google Chrome 或者firefox ，并且安装 Yslow 这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你应该对这些浏览器的开发人员工具有所了解，你可以通过按下F12键调出这个工具。
2. Visaul Studio 2010 SP1 或更高版本，推荐使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解，本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇我和大家讨论的是第二十五条原则：Minimize DOM Access （避免对DOM元素进行过多操作，具体来说，这个话题是如何善用Javascript的）

HTML网页的基础是DOM，我在“优化网站设计（十九）：减少DOM元素的数量”中已经提到过应该尽可能地减少DOM元素的数量，以便减小网页的体积，提高加载的速度。在之前的那篇文章的结尾处，我已经提到一个话题：

正确地使用JQuery

本文的最后部分，我要特别说明：我在之前的很多演示中都用到过jquery。（目前为止，它确实也是最好的一个javascript库，没有之一），但是对于jQuery，越来越多的人在学习，越来越多的人在滥用。这确实也是一个趋势。

关于如何正确地使用jQuery,国外和国内都有热心的网友做了总结，请参考

1. http://www.cnblogs.com/huyh/archive/2009/03/30/1422976.html （国内的，翻译文档）
2. http://www.cnblogs.com/huyh/archive/2009/03/31/1425430.html （国内的，翻译文档）
3. http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/ （国外的）

这至少我的个人经验和体会：由于现在有了很多强大的javascript框架和库，网页开发人员拥有了前所未有的能力和热情——通过javascript为网页添加各种各样的效果，甚至完全可以从零开始构造一个文档。这在以往是不能想象的。话说，javascript 这个有点“古老”语言这几年重新焕发了青春，甚至有一发不可收拾的趋势，原先的Javascript只是编写客户端的脚本，现在也可以编写服务器脚本，甚至还可以编写桌面程序，Office程序。Javascript这是要占领地球了吗？

但是，无论如何，不恰当地使用javascript可能对网页造成不利的影响，例如：

1. http://www.bing.com/search?setmkt=en-US&q=javascript+%E5%81%87%E6%AD%BB
2. http://203.208.46.147/search?q=javascript+hang
3. http://203.208.46.147/search?newwindow=1&q=javascript+performance+issue&oq=javascript+performance+issue&gs_l=serp.3...22831.26712.0.26948.21.12.0.0.0.0.0.0..0.0...0.0...1c.1.14.serp.ChKDsafzFUI

为了帮助大家更加清晰地了解，并且避免常见的一些问题，我这里整理列举一些通用的技巧（部分翻译来自上述提到的几个文档）

1. 永远使用最新的JQuery版本。可以参考：优化网站设计（二）：使用CDN
2. 合并并最小化脚本。可以参考：优化网站设计（一）：减少请求数   优化网站设计（四）：对资源启用压缩    优化网站设计（十）：最小化JAVASCRIPT和CSS
3. 尽量使用for，而不是each。
4. 尽量使用ID去访问，而不是class。
5. 如果有可能，通过提供上下文，缩小查找范围。例如 $(expression, context)。
6. 对一个元素的多次访问（尤其在循环里面），可以考虑先用一个变量将其缓存起来，而不是每次都重新查找它。应该尽可能使用到jQuery的链式选择方法。
7. 在可能的情况下，尽量减少动态插入、添加、删除元素。（我知道你很多时候做不到这一条）
8. 对于要拼接大量字符串的情况，可以考虑使用join方法，而不是concat函数，或者+= 这样的运算符。
9. 为所有事件的处理函数都返回false。

 

最后，不要满足于一些较高层的技巧，我建议大家如果有时间的话，对Javascript做一次较为系统的回顾：http://w3school.com.cn/b.asp ，我的经验是，即便你写过很多的脚本，找个时间做一次这样的回顾也将是你收获很多。