几个优化WordPress中JavaScript加载体验的插件引见

2022-02-11 收藏 0 点赞 0 图文教程

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 的解决义务中。

假如咱们在页面的两头应用，