优化JavaScript和CSS经验谈
2008-02-07 22:58:38| 分类：
默认分类
| 标签：
|举报
|字号大中小 订阅
在深入JavaScript代码和讲述每个优化功能之前，让我们总体看看我们能采取措施的地方，这些地方当然都是对我们网站性能有重要改观的地方。下面是关于提高JavaScript对网站性能影响的几条指导方针：
1 合并.js文件
2 缩小脚本
3 将脚本放在页面的底部
4 移除复制
合并.js文件
按照最基本的原则，你的目标应该是让你的JavaScripts尽可能产生少的请求，理想情况下，这也意味着你应该只有一个.js文件。这个任务就是将所有的.js脚本文件放到一个文件中去。
虽然在大多数的情况下，一个文件的方法是被推荐的。但是有时候，你可以使用两个脚本文件，从中间受益：一个是当页面一下载就需要的实现的功能，另外一个是等页面装完才需要的功能。另外一种情况就是当你的站点的多个页面使用一直的功能脚本的时候，两个文件或许是令人想要的。共享的脚本应该存储在一个文件里，不同页面所需要的具体脚本应该放在第二个文件里。
缩小或着模糊化脚本
现在你已经合并了你的脚本，你就可以着手缩小或者模糊化它们。缩小的意思就是删除不必要的任何东西，如注释等。模糊化是更进一步的做法，主要是重命名，重安排功能和变量，以便它们的名字更短，虽然脚本读起来很晦涩。模糊化通常用来用来使得JavaScript源代码保密的一种方式。然而你的脚本在网上是可以获得的，不可能100%保密。了解更多的关于缩小和模糊化的信息，看Douglas Crockford关于这个话题的文章。。
通常说来，如果你已经对JavaScript进行了gzip，从文件的大小来说，你就已经取得了很大的改进了，通过进行缩小和模糊化脚本，你还会获得小的益处。平均说来，gzip压缩的话可以节省75-80%，而gzip和缩小化同时进行可以节省80-90%。另外，当你改变你的代码进行缩小化或者模糊化的时候，你会有引入bug的风险。如果你不担心别人偷取你的代码，你可以忘掉进行模糊化，只需要合并和缩小化，后者甚至只是合并脚本（但是应该一直gzip它们）。
一个对JavaScript缩小化非常好的工具就是JSMin。并外一个模糊化的工具就是Packer，一个免费的在线工具。 在开发网站的过程中，修改代码进行合并和缩小化应该是一个额外的，单独的步骤。在开发过程中，你因该使用多个.js文件，只要你觉得顺手就行，当你的网站准备开通的时候，你就将合并过的，缩小过的版本代替原来的。你可以开发一个工具来完成这个。下面，我已经引入了一个例子，这个例子中的小程序就会完成这个功能。它是一个命令行的脚本，使用的是JSMin的PHP端口。
<?php
include 'jsmin.php';
array_shift($argv);
foreach ($argv AS $file) {
echo '/* ', $file, ' */';
echo JSMin::minify(file_get_contents($file)), "\n";
}
?>
非常简单，不是吗？你可以将它保存为compress.php，以下面的方式运行：
$ php compress.php source1.js source2.js source3.js > result.js
这就会将source1.js, source2.js, 和 source3.js缩小并且合并成一个result.js文件。
许多第三方的JavaScript库提供了它们未被压缩和缩小的版本。你能下载并且使用那些缩小过的代码，接下来只是需要处理自己的代码。有时候需要记住的是第三方JavaScript库的许可证。即使你合并和缩小你所有的脚本，你应该在你的代码旁边保留版权的说明。
将脚本放在页面的底部
关于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中使用它们。
评论这张
转发至微博
转发至微博
关闭
玩LOFTER，免费冲印20张照片，人人有奖！
我要抢>
<#--最新日志，群博日志-->
<#--推荐日志-->
<#--引用记录-->
<#--博主推荐-->
<#--随机阅读-->
<#--首页推荐-->
<#--历史上的今天-->
<#--被推荐日志-->
<#--上一篇，下一篇-->
<#-- 热度 -->
<#-- 网易新闻广告 -->
<#--右边模块结构-->
<#--评论模块结构-->
<#--引用模块结构-->
<#--博主发起的投票-->
评论