侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 4年前   335

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() 函数中调用,这个函数通常刚好位于页面的 标签前面(当然是末尾了)。

有时候我们可能会在 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 的处理任务中。

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

 

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

 

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

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

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

您可能感兴趣的文章:

  • WordPress中卸载插件以及移除文章类型组件的代码示例
  • 详解WordPress中提醒安装插件以及隐藏插件的功能实现
  • WordPress中使主题支持小工具以及添加插件启用函数
  • 利用Fix Rss Feeds插件修复WordPress的Feed显示错误
  • 在WordPress中使用wp-cron插件来设置定时任务
  • 基础的WordPress插件制作教程
  • WordPress升级版本及安装插件出现”Problem with the SSL CA cert”的解决办法
  • 推荐十款免费 WordPress 插件
  • 用js代码和插件实现wordpress雪花飘落效果的四种方法
  • 在WordPress中安装使用视频播放器插件Hana Flv Player


  • 上一条:
    使用JavaScript创建新样式表和新样式规则
    下一条:
    JavaScript与HTML结合的基本使用方法整理
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客