几个优化WordPress中JavaScript加载体验的插件介绍

WordPress 本身以及主题和插件通常需要加载一些 JavaScript 来实现某些特殊功能。为了最大限度地保证兼容性，不至于出现 JavaScript 失效的情况，所以一般在页头加载 JavaScript 文件。但是根据 Yahoo 开发者论坛的建议，加载 JavaScript 应该尽量在页尾以提高页面的显示（响应、渲染）速度。本文根据作者的使用经验介绍几个相关插件，并说明如何在某些特殊页面仍然在页头加载 JavaScript。

下面先简单介绍几个相关的优化 JavaScript 的 WordPress 插件及特点，然后演示如何处理一些特殊情况。

一. 优化JavaScript的WordPress插件
我曾经用过 WP Minify、Autoptimize、JavaScript to Footer这三个插件，下面一一介绍其特点。

1. WP Minify
这个插件将 Minify 引擎整合到 WordPress 中。一经启用，该插件就能够合并和压缩你的 JS 和 CSS 文件来提高页面的加载速度。

WP Minify 能够抓取生成的 WordPress 页面中的 JS/CSS 文件，将文件列表传递给 Minify 引擎。Minify 引擎处理后返回一个加强、精简并经过压缩的 JavaScript 或样式表文件（CSS），由 WP Minify 将其替换到 WordPress 页头中。

其主要特点是：

• 易于使用；

• 对 JavaScript、CSS 和 HTML 均有效；

• 提供了调试工具；

• 能够处理外部 JS 和 CSS 文件；

• 能够排除指定 JS 和 CSS 文件；

• 能够指定处理后的 JS 和 CSS 文件的位置（页头或页尾，甚至别的地方）；

• 可对处理后的 JS 和 CSS 文件添加过期时间等。

当 WordPress 3.1 测试版出来后，我发现 WP Minify 与之不兼容，会导致网站无法正确加载。

2. Autoptimize
也许将来 WP Minify 升级后会解决不兼容问题，但是我等不及了。后来找到了 Autoptimize 这个具有类似功能的插件，而且这个插件操作更简单。

Autoptimize 整合、精简并压缩所有的 JS 和 样式表（CSS）文件，增加缓存过期标志。然后将样式表文件放到页头（同样是为了提高页面加载效率），并将 JS 文件放到页尾。它还能够精简 HTML 代码，给你的页面瘦身。不过我觉得给 HTML 页面瘦身作用不是很明显，只要你的服务器开启了 Gzip 压缩特性就没必要这么做了。

默认情况下，Autoptimize 会按照上面介绍的方式优化所有 HTML/CSS/JavaScript 。

我个人觉得，Autoptimize 是比 WP Minify 更好用的 WordPress 优化插件。

3. JavaScript to Footer
这个插件写的非常简洁。我查看了源代码，完成任务的代码只有 6 个 WordPress 函数（见下文），也就是 6 行。所以这个插件从创建之后就怎么更新过。我一开始就因为见它最后更改日期还停留在2009年9月22日，所以把它给忽略了。

但是它仅仅优化 JavaScript 的加载位置，也就是将所有在 WordPress 中正确声明了的 Javascript 文件都给移到页面末尾来加载。它没有对 HTML 代码和 CSS 样式表文件作任何处理。

根据 JavaScript to Footer 的源代码，它使用下面的 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 失效的情况，那你就不能进行这样的优化了。
在我看来，WP Minify 就不需要了，原因在前面已经说过了。那么剩下的 Autoptimize 和 JavaScript to Footer 可以选用其一或者两者配合使用（如果是配合使用，当然是使用前者的 HTML 和 CSS 精简/整合功能，而使用后者的 JS 位置控制功能，因为后者就这一个功能）。我只需要控制 JS 的加载位置，所以就选择了 JavaScript to Footer。因为我的页面中也就四五个 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 的处理任务中。

如果我们在页面的中间使用，

<?php wp_print_scripts('jquery'); ?>

直接输出了 jquery.js 文件（通常是其压缩版本 jquery.min.js），那么即使其它的插件或者什么东西使用，

<?php wp_enqueue_script('jquery'); ?>

告诉 WordPress 需要加载 jquery.js，WordPress 在 wp_footer() 中处理的时候也会先检查前面是不是已经有了，如果有了就不会再重新加载一次。

四. 结论
在 WordPress 中加载 JavaScript 最好使用 wp_enqueue_script() 函数以减少问题提高效率。如果不是有这些特殊情况要处理，使用 Autoptimize 显然比较好，它全面完成任务而且使用简单。

但是如果使用的主题本身已经很简洁了，那么 JavaScript to Footer 更简单高效，也就更好。