几个优化WordPress中JavaScript加载体验的插件介绍
WordPress本身以及主题和插件通常需要加载一些JavaScript来实现某些特殊功能。为了最大限度地保证兼容性，不至于出现JavaScript失效的情况，所以一般在页头加载JavaScript文件。但是根据Yahoo开发者论坛的建议，加载JavaScript应该尽量在页尾以提高页面的显示（响应、渲染）速度。本文根据作者的使用经验介绍几个相关插件，并说明如何在某些特殊页面仍然在页头加载JavaScript。
下面先简单介绍几个相关的优化JavaScript的WordPress插件及特点，然后演示如何处理一些特殊情况。
一.优化JavaScript的WordPress插件
我曾经用过WPMinify、Autoptimize、JavaScripttoFooter这三个插件，下面一一介绍其特点。
1.WPMinify
这个插件将Minify引擎整合到WordPress中。一经启用，该插件就能够合并和压缩你的JS和CSS文件来提高页面的加载速度。
WPMinify能够抓取生成的WordPress页面中的JS/CSS文件，将文件列表传递给Minify引擎。Minify引擎处理后返回一个加强、精简并经过压缩的JavaScript或样式表文件（CSS），由WPMinify将其替换到WordPress页头中。
其主要特点是：
- 易于使用；
- 对JavaScript、CSS和HTML均有效；
- 提供了调试工具；
- 能够处理外部JS和CSS文件；
- 能够排除指定JS和CSS文件；
- 能够指定处理后的JS和CSS文件的位置（页头或页尾，甚至别的地方）；
- 可对处理后的JS和CSS文件添加过期时间等。
当WordPress3.1测试版出来后，我发现WPMinify与之不兼容，会导致网站无法正确加载。
2.Autoptimize
也许将来WPMinify升级后会解决不兼容问题，但是我等不及了。后来找到了Autoptimize这个具有类似功能的插件，而且这个插件操作更简单。
Autoptimize整合、精简并压缩所有的JS和样式表（CSS）文件，增加缓存过期标志。然后将样式表文件放到页头（同样是为了提高页面加载效率），并将JS文件放到页尾。它还能够精简HTML代码，给你的页面瘦身。不过我觉得给HTML页面瘦身作用不是很明显，只要你的服务器开启了Gzip压缩特性就没必要这么做了。
默认情况下，Autoptimize会按照上面介绍的方式优化所有HTML/CSS/JavaScript。
我个人觉得，Autoptimize是比WPMinify更好用的WordPress优化插件。
3.JavaScripttoFooter
这个插件写的非常简洁。我查看了源代码，完成任务的代码只有6个WordPress函数（见下文），也就是6行。所以这个插件从创建之后就怎么更新过。我一开始就因为见它最后更改日期还停留在2009年9月22日，所以把它给忽略了。
但是它仅仅优化JavaScript的加载位置，也就是将所有在WordPress中正确声明了的Javascript文件都给移到页面末尾来加载。它没有对HTML代码和CSS样式表文件作任何处理。
根据JavaScripttoFooter的源代码，它使用下面的6行代码来完成工作：
remove_action('wp_head','wp_print_scripts');
remove_action('wp_head','wp_print_head_scripts',9);
remove_action('wp_head','wp_enqueue_scripts',1);
add_action('wp_footer','wp_print_scripts',5);
add_action('wp_footer','wp_enqueue_scripts',5);
add_action('wp_footer','wp_print_head_scripts',5);
如果有需要，可以在某个特定WordPress模板的wp_head()函数前加入下面的代码，将上述过程逆转过来，也就是使之失效，恢复成了本来的加载位置：
remove_action('wp_footer','wp_print_scripts',5);
remove_action('wp_footer','wp_enqueue_scripts',5);
remove_action('wp_footer','wp_print_head_scripts',5);
add_action('wp_head','wp_print_scripts');
add_action('wp_head','wp_print_head_scripts',9);
add_action('wp_head','wp_enqueue_scripts',1);
当然只是说某些特定的页面模板，如果是所有页面，那干脆禁用该插件好了:D
二.使用方法
相信对于大多数WPer来说，看了前面的介绍就知道如何选择自己需要的优化插件并合理使用了。无非是基于以下三个方面来考虑：
你的页面模板中是否使用了大量的HTML注释、空格、空行等标记？如果没有，那么你就不需要为了一点点（开启Gzip压缩时通常1%以下）的带宽节省而使用HTML精简功能；
你的页面中是否加载了多个CSS样式表文件？如果没有，你也不需要通过插件来精简和整合CSS样式表，手工精简和整合CSS样式表比使用插件更加简单有效；
基于WordPress默认会在页头中加载JavaScript，一般的WordPress网站都需要对JS的加载位置进行优化。但是如果你大部分的页面也都需要在页面头部加载JS以保证不会出现JS失效的情况，那你就不能进行这样的优化了。
在我看来，WPMinify就不需要了，原因在前面已经说过了。那么剩下的Autoptimize和JavaScripttoFooter可以选用其一或者两者配合使用（如果是配合使用，当然是使用前者的HTML和CSS精简/整合功能，而使用后者的JS位置控制功能，因为后者就这一个功能）。我只需要控制JS的加载位置，所以就选择了JavaScripttoFooter。因为我的页面中也就四五个JS文件，又是放到页尾加载，我觉得没必要进行整合。
三.特殊情况处理
虽然将JavaScript文件都放到页面末尾加载对于页面加载速度很有帮助，但是请注意，所谓页面末尾指的是在WordPress的wp_footer()函数中调用，这个函数通常刚好位于页面的</body>标签前面（当然是末尾了）。
有时候我们可能会在wp_footer函数出现之前就需要用到某些JavaScript，比如jquery.js文件。
这样的情况也是很常见的。比如我单独创建了一个链接页面，在这个页面中我使用了jQuery方法来获取链接网站的favicon。很显然，我只需要在这唯一一个页面使用这部分代码，所以将这段代码直接放在这个页面模板中是最好的做法。问题来了：这部分内容显然是在wp_footer之前出现的，那么这段代码就在jquery.js文件之前出现了，导致该代码段实际上无法工作，因为调用jQuery方法的代码段必须比jquery.js文件后加载。
那么如何处理这种特殊情况呢？其实也很简单。以上面的情景为例，既然我们需要先调用jquery.js文件，那我们就在该代码段之前直接输出需要的jquery.js文件，不使用wp_enqueue_script()函数，而改用wp_print_scripts()函数。
wp_enqueue_script()与wp_print_scripts()的区别是：wp_enqueue_script()是告诉WordPress“我在这个页面上需要用到某个JavaScript文件，你可要记得加载啊”。WordPress默认在wp_head()中处理，而我们改为在wp_footer()中处理。wp_print_scripts()则直接在你使用此方法的位置输出需要的JavaScript文件，而不是加入到WordPress的处理任务中。
如果我们在页面的中间使用，
<?phpwp_print_scripts('jquery');?>
直接输出了jquery.js文件（通常是其压缩版本jquery.min.js），那么即使其它的插件或者什么东西使用，
<?phpwp_enqueue_script('jquery');?>
告诉WordPress需要加载jquery.js，WordPress在wp_footer()中处理的时候也会先检查前面是不是已经有了，如果有了就不会再重新加载一次。
四.结论
在WordPress中加载JavaScript最好使用wp_enqueue_script()函数以减少问题提高效率。如果不是有这些特殊情况要处理，使用Autoptimize显然比较好，它全面完成任务而且使用简单。
但是如果使用的主题本身已经很简洁了，那么JavaScripttoFooter更简单高效，也就更好。