几个优化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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
Nov 17 PHP
php xml常用函数的集合(比较详细)
Jun 06 PHP
解决CodeIgniter伪静态失效
Jun 09 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
Jan 11 PHP
iOS10推送通知开发教程
Sep 19 PHP
自制PHP框架之设计模式
May 07 PHP
PHP简单实现模拟登陆功能示例
Sep 15 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
Sep 16 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
Dec 25 PHP
php+js实现裁剪任意形状图片
Oct 31 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
Jul 26 PHP
如何在PHP中使用数组
Jun 09 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php伪静态之APACHE篇
2014/06/02 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python下的twisted框架入门指引
2015/04/15 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
网上签名寄语活动留言
2014/01/18 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
八达岭长城导游词
2015/01/30 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书