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


Posted in PHP onDecember 17, 2015

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 更简单高效,也就更好。

PHP 相关文章推荐
php设计模式 Mediator (中介者模式)
Jun 26 PHP
PHP中英混合字符串截取函数代码
Jul 17 PHP
PHP中使用json数据格式定义字面量对象的方法
Aug 20 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
Jan 22 PHP
PHP的引用详解
Feb 22 PHP
php保存任意网络图片到服务器的方法
Apr 14 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
Jan 30 PHP
php之可变变量的实例详解
Sep 12 PHP
PHP 获取 ping 时间的实现方法
Sep 29 PHP
CI框架网页缓存简单用法分析
Dec 26 PHP
PHP addcslashes()函数讲解
Feb 03 PHP
YII2框架中添加自定义模块的方法实例分析
Mar 18 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
Dec 17 #PHP
WordPress中查询文章的循环Loop结构及用法分析
Dec 17 #PHP
WordPress中用于获取文章作者与分类信息的方法整理
Dec 17 #PHP
PHP附件下载中文名称乱码的解决方法
Dec 17 #PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
Dec 17 #PHP
php提交post数组参数实例分析
Dec 17 #PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
Dec 17 #PHP
You might like
如何开始收听短波广播
2021/03/01 无线电
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
常用的javascript function代码
2008/05/23 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
python 提取文件的小程序
2009/07/29 Python
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
法律专业推荐信范文
2013/11/29 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
给海归自荐信的建议
2013/12/13 职场文书
上课睡觉检讨书
2014/01/28 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
租车协议书范本
2014/04/22 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
Python中的变量与常量
2021/11/11 Python