首页 > 新闻系统 > 编程开发 > 网络编程 > 文章正文

优化JavaScript和CSS经验谈

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

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

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

在深入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文件。

当你合并和缩小化成为站点开发过程的一个步骤时，上面这个脚本就很有用了。另外，还有一个更懒的办法，你可以看Ed Eliot 的博客和SitePoint 的博客，获取更多的办法。

许多第三方的JavaScript库提供了它们未被压缩和缩小的版本。你能下载并且使用那些缩小过的代码，接下来只是需要处理自己的代码。有时候需要记住的是第三方JavaScript库的许可证。即使你合并和缩小你所有的脚本，你应该在你的代码旁边保留版权的说明。

将脚本放在页面的底部

9 7 3 1 2 4 8 :

优化JavaScript和CSS经验谈

相关文章：

相关软件：