优化JavaScript和CSS经验谈

2007-11-22 14:20:00　来源:IT168.com　作者:胡磊点击:

JavaScript和CSS优化的优化对于提高web站点的性能也是非常重要的。

关于JavaScript优化的第三条经验法则就是脚本因该放置在页面的底部，尽可能的靠近</body>标签。由于脚本的性质（他们可以改变页面的任何东西），当浏览器遇到一个<script>标签时，它会妨碍整个下载。知道一个脚本下载分析了，其它的下载才会启动。

将脚本放在底部是避免负面阻塞效应的一种方法。另外尽可能少使用<script>标签的原因是浏览器没遇到一个这个的标签，他就要启动JavaScript分析引擎。这是一个很大的开销，理想情况下是一个页面只进行一次分析。

移除重复脚本

关于JavaScript优化的另外一个原则就是避免包括相同的脚本两次。这看起来是一个非常怪的建议，但是它确实存在：举个例子，如果一个大的网站使用多了服务器，这些服务器都包括了JavaScript文件，那么他们中的两个包含了同样的JavaScript是完全有可能的。重复的脚本能够导致浏览器分析引擎启动两次，有时（一些IE版本）甚至请求文件两次。当你使用第三方JavaScript库的时候，重复的脚本可能会导致出现问题。

CSS优化

合并和缩小

    对于CSS文件，你可以尊徐我们讨论过的JavaScripts的原则：缩小和合并所有的样式表到一个文件中，最小化下载容量和HTTP请求发生次数。合并所有的文件到一个文件是一个非常琐碎的任务，但是缩小化的任务或许更加艰难，特使是你使用CSS, 你或许对缩小样式表的放缩有所争议。但是，毕竟如果你决定合并和gzip样式表已经是一个很大的优化了。

    如果你决定缩小化CSS，除了手工选择缩小化，你还可以选择一些可用的工具，如CSSTidy(http://pear.php.net/package/HTML_CSS/)，或者SitePoint的Dust-me Selectors Firefox plugin.

将样式表放在页面的顶部

    你的单个，经过压缩的样式表最好的位置就是放在页面的顶部，在<head>区域。原因是大多数浏览器（Opera是一个另外）在所有样式表没有下载和分析完，不会交付任何东西的。另外，在CSS没有分析完成，样式表所引用的图片是不会下载的。因此，最好是将CSS放在页面的顶部。

    你或许在考虑在不同的域中分布图片。CSS引用的图片不会立即下载，再次期间，你的页面可以使用可用的下载窗口来向持有CSS图片的域请求内容图片，因为它再此期间是“空闲”的。
禁止表达式
在CSS中IE允许的JavaScript是这样的：
#content {
   left: expression(document.body.offsetWidth)
}
    你因该避免在CSS使用JavaScript表达式。首先，它们不是被所有的浏览器所支持。它们对“分离”的概念有害。另外，当提到性能，表达式是很有害的，因为他们在页面交付或者改变大小，或者鼠标滚动页面时会重新计算。这里有许多的方法让表达式减少开销，你可以缓存它们初始计算值，但是，最好你还是避免在CSS中使用它们. 　　　　

9 7 3 1 2 4 8 :