和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缩小化非常好的工具就是。并外一个模糊化的工具就是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的博客和，获取更多的办法。

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

将脚本放在页面的底部

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

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

移除重复脚本

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

Tags：

转载请标注：SEO三人行——优化JavaScript和CSS经验谈