几个优化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 相关文章推荐
定制404错误页面,并发信给管理员的程序
Oct 09 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
May 27 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
Dec 24 PHP
php实例分享之二维数组排序
May 15 PHP
Yii中使用PHPExcel导出Excel的方法
Dec 26 PHP
PHP代码维护,重构变困难的4种原因分析
Jan 25 PHP
PHP数组相加操作及与array_merge的区别浅析
Nov 26 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
Apr 04 PHP
详解PHP5.6.30与Apache2.4.x配置
Jun 02 PHP
php生出随机字符串
Jul 06 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
Jan 26 PHP
PHP实现简易图形计算器
Aug 28 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
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
json前后端数据交互相关代码
2018/09/19 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Python删除windows垃圾文件的方法
2015/07/14 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
python基础教程之匿名函数lambda
2017/01/17 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
Python----数据预处理代码实例
2019/03/20 Python
Python hashlib模块实例使用详解
2019/12/24 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
司仪主持词两篇
2014/03/22 职场文书
党组织公开承诺书
2014/03/29 职场文书
团日活动总结范文
2014/04/25 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
单位提档介绍信
2015/10/22 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
pytorch中[..., 0]的用法说明
2021/05/20 Python
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL