1、尽量少访问DOM和尽量减少标记。
访问DOM的方式对脚本性能会产生非常的的影响,只要是查询DOM中的某些元素如getElementsByTagName方法,浏览器都会搜寻整个DOM树,从中查找可能匹配的元素。
另一个需要注意的地方就是尽量减少文档中的标记数量。过多不必要的元素只会增加DOM树的规模,进而增加遍历DOM树以查找特定元素的时间。
2、合并和放置脚本。
类似下面情况最好不要出现:
<script src=”script/functionA.js”></script>
<script src=”script/functionB.js”></script>
<script src=”script/functionC.js”></script>
<script src=”script/functionD.js”></script>
推荐做法是把这四个合并到一个脚本文件中。这样,就可以减少加载页面时发送请求的数量。而减少请求数量通常都是在性能优化是首先要考虑的。
把所有<script>标签都放到文档末尾,</body>标记之前,就可以让页面变得更快。即使这样,在加载脚本时,window对象的load时间依然可以执行对文档进行的各种操作。
3、压缩脚本。
把不必要的字节,如空格和注释,统统删除,从而达到“压缩”文件的目的。
精简后的代码虽然不容易懂,却能大幅减少文件大小。多数情况下,你应该有两个版本,一个是工作副本,可以修改代码并添加注释,另一个是精简副本,用于放在站点上。通常,为了与非精简版本区分开,最好在精简副本的文件名中加上min字样:
<script src=”script/function.min.js”></script>
下面是几个有代表性的代码压缩工具:
- Douglas Crockford的JSMin(http://www.crockford.com/javascript/jsmin.html);
- 雅虎的YUI Compressor(http://developer.yahoo.com/yui/compressor);
- 谷歌的Closure Compiler(http://closure-compiler.appspot.com/home)。