前言
网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题。
作为通用的原则,雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Sitehttp://developer.yahoo.com/performance/rules.html,同时,他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/
我强烈推荐所有的网站开发人员都应该学习这些最佳实践,并结合自己的实际项目情况进行应用。 接下来的一段时间,我将结合ASP.NET这个开发平台,针对这些原则,通过一个系列文章的形式,做些讲解和演绎,以帮助大家更好地理解这些原则,并且更好地使用他们。
准备工作
为了跟随我进行后续的学习,你需要准备如下的开发环境和工具
- Google Chrome 或者firefox ,并且安装 Yslow 这个扩展组件.请注意,这个组件是雅虎提供的,但目前没有针对IE的版本。
- https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
- https://addons.mozilla.org/en-US/firefox/addon/yslow/
- 你应该对这些浏览器的开发人员工具有所了解,你可以通过按下F12键调出这个工具。
- Visaul Studio 2010 SP1 或更高版本,推荐使用Visual Studio 2012
- 你需要对ASP.NET的开发基本流程和核心技术有相当的了解,本系列文章很难对基础知识做普及。
本文要讨论的话题
这一篇我和大家讨论的是第二十五条原则:Minimize DOM Access (避免对DOM元素进行过多操作,具体来说,这个话题是如何善用Javascript的)
HTML网页的基础是DOM,我在“优化网站设计(十九):减少DOM元素的数量”中已经提到过应该尽可能地减少DOM元素的数量,以便减小网页的体积,提高加载的速度。在之前的那篇文章的结尾处,我已经提到一个话题:
正确地使用JQuery
本文的最后部分,我要特别说明:我在之前的很多演示中都用到过jquery。(目前为止,它确实也是最好的一个javascript库,没有之一),但是对于jQuery,越来越多的人在学习,越来越多的人在滥用。这确实也是一个趋势。
关于如何正确地使用jQuery,国外和国内都有热心的网友做了总结,请参考
这至少我的个人经验和体会:由于现在有了很多强大的javascript框架和库,网页开发人员拥有了前所未有的能力和热情——通过javascript为网页添加各种各样的效果,甚至完全可以从零开始构造一个文档。这在以往是不能想象的。话说,javascript 这个有点“古老”语言这几年重新焕发了青春,甚至有一发不可收拾的趋势,原先的Javascript只是编写客户端的脚本,现在也可以编写服务器脚本,甚至还可以编写桌面程序,Office程序。Javascript这是要占领地球了吗?
但是,无论如何,不恰当地使用javascript可能对网页造成不利的影响,例如:
- http://www.bing.com/search?setmkt=en-US&q=javascript+%E5%81%87%E6%AD%BB
- http://203.208.46.147/search?q=javascript+hang
- 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
为了帮助大家更加清晰地了解,并且避免常见的一些问题,我这里整理列举一些通用的技巧(部分翻译来自上述提到的几个文档)
- 永远使用最新的JQuery版本。可以参考:优化网站设计(二):使用CDN
- 合并并最小化脚本。可以参考:优化网站设计(一):减少请求数 优化网站设计(四):对资源启用压缩 优化网站设计(十):最小化JAVASCRIPT和CSS
- 尽量使用for,而不是each。
- 尽量使用ID去访问,而不是class。
- 如果有可能,通过提供上下文,缩小查找范围。例如 $(expression, context)。
- 对一个元素的多次访问(尤其在循环里面),可以考虑先用一个变量将其缓存起来,而不是每次都重新查找它。应该尽可能使用到jQuery的链式选择方法。
- 在可能的情况下,尽量减少动态插入、添加、删除元素。(我知道你很多时候做不到这一条)
- 对于要拼接大量字符串的情况,可以考虑使用join方法,而不是concat函数,或者+= 这样的运算符。
- 为所有事件的处理函数都返回false。
最后,不要满足于一些较高层的技巧,我建议大家如果有时间的话,对Javascript做一次较为系统的回顾:http://w3school.com.cn/b.asp ,我的经验是,即便你写过很多的脚本,找个时间做一次这样的回顾也将是你收获很多。
文章来源:http://www.cnblogs.com/chenxizhang/archive/2013/05/19/3086546.html