位置: 编程技术 - 正文

几个优化WordPress中JavaScript加载体验的插件介绍(wordpress优化加快的好多个关键点)

编辑:rootadmin

推荐整理分享几个优化WordPress中JavaScript加载体验的插件介绍(wordpress优化加快的好多个关键点),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:wordpress优化加快的好多个关键点,wordpress优化版,wordpress终极优化,wordpress优化加快的好多个关键点,wordpress优化教程,wordpress终极优化,wordpress优化教程,wordpress优化加快的好多个关键点,内容如对您有帮助,希望把文章链接给更多的朋友!

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 行。所以这个插件从创建之后就怎么更新过。我一开始就因为见它最后更改日期还停留在年9月日,所以把它给忽略了。

但是它仅仅优化 JavaScript 的加载位置,也就是将所有在 WordPress 中正确声明了的 Javascript 文件都给移到页面末尾来加载。它没有对 HTML 代码和 CSS 样式表文件作任何处理。

几个优化WordPress中JavaScript加载体验的插件介绍(wordpress优化加快的好多个关键点)

根据 JavaScript to Footer 的源代码,它使用下面的 6 行代码来完成工作:

如果有需要,可以在某个特定 WordPress 模板的 wp_head() 函数前加入下面的代码,将上述过程逆转过来,也就是使之失效,恢复成了本来的加载位置:

当然只是说某些特定的页面模板,如果是所有页面,那干脆禁用该插件好了 :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 的处理任务中。

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

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

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

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

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

WordPress中用于获取及自定义头像图片的PHP脚本详解 get_avatar()(获取头像)get_avatar()函数用来获取置顶邮箱或者用户的头像代码,在评论列表中非常常用。这个函数提供一个get_avatar过滤器,用来过滤头像

PHP封装的字符串加密解密函数 程序中经常使用的PHP加密解密字符串函数代码如下:/*********************************************************************函数名称:encrypt函数作用:加密解密字符串使用

解决ThinkPHP下使用上传插件Uploadify浏览器firefox报错误的方法 最近用ThinkPHP开发一个项目,集成了批量上传文件插件Uploadify,在谷歌Chrome和IE下都能正常上传,只有火狐下提示这个错误,网上找了很多解决办法,基

标签: wordpress优化加快的好多个关键点

本文链接地址:https://www.jiuchutong.com/biancheng/282811.html 转载请保留说明!

上一篇:简介WordPress中用于获取首页和站点链接的PHP函数(wordpress介绍)

下一篇:WordPress中用于获取及自定义头像图片的PHP脚本详解(wordpress 常用函数)

  • 原材料入库进项税
  • 控股子公司注销了可以起诉总公司吗怎么办
  • 企业可以申请专项债券吗
  • 建筑企业结转成本怎么算
  • 合并扣税项是什么科目
  • 小微企业减免所得税
  • 个人劳务报酬所得税率表
  • 印花税漏报,税务局怎么罚款
  • 工业企业会计怎么结转成本
  • 职工退休金计入个人账户
  • 商铺售后回租会计处理
  • 持有待售资产固定资产 要计提折旧吗
  • 建筑面积包括分摊建筑面积吗
  • 无形资产报废的例题
  • 现金解款单是什么业务
  • 销售产品结转成本怎么算
  • 资产减值损失结转
  • 清算多交的增值税如何结转做分录?
  • 管理费用已付款未收到发票
  • 期初建账库存少录数量会计怎么处理
  • 招待费与去年减少的原因
  • 境外演艺经纪公司代扣代缴哪些税款?
  • 2017年7月1日开始实施的税法新规
  • 实缴资本是真的吗
  • 软件企业的税收优惠政策
  • 事业单位没有税号 选个人可以吗
  • 委托出口业务的账务如何处理呢?
  • 存货跌价准备在报表什么项目列示
  • 取得高新技术企业
  • 民办非企业年底额度不能低于多少
  • 一般纳税人的月报,季报年报
  • 所得税汇算清缴后如何调整报表
  • 琼斯的大海怪
  • 经营性支出属于哪个科目
  • 企业支付宝给别人有什么用
  • php基础理论知识
  • oppor11s输入法怎么清除记忆
  • 预提收入需不需要计提增值税
  • 发行债券的会计分录摊销
  • JS XMLHttpRequest对象详解
  • 气象数据32766
  • php 提交表单
  • AI - stable-diffusion(AI绘画)的搭建与使用
  • 终止pppoe会话
  • 计提本月财务费用会计分录
  • 什么是记账凭证账务处理程序
  • 应收账款收不回来
  • mysql存储过程cursor
  • 织梦使用手册
  • 费用计入什么表
  • 资产负债表一般由什么组成
  • 固定资产出售通过什么科目
  • 党费返还款怎么做分录
  • 认证未抵扣往哪里记
  • 收到国库退款
  • 企业开办费会计分录
  • 印花税计入哪个会计分录
  • 微信支付宝收入支出怎么做流水账
  • 房地产开发企业销售自行开发的房地产项目
  • 公益募捐的基金是什么
  • 实际成本大于预计总成本
  • 老会计带新手教学真账实操
  • 现代服务业包括哪些
  • FreeBSD 6.2-RELEASE下载
  • xp系统直接开机
  • windows2003远程连接
  • googletoolbarnotifier.exe是什么进程?GoogleToolbarNotifier怎么关闭?
  • windows.old文件夹有啥用
  • centos8终端
  • Win8.164位/32位KB3096053补丁下载 主要修复KB3069114安装问题
  • win8图片查看器无法打开图片内存不足
  • Python实现Mysql数据库连接池实例详解
  • python正则匹配url
  • python贪吃蛇游戏代码怎么运行
  • python中面向对象
  • node实现文件上传
  • python方法有哪些
  • 中国进口国外品牌排行榜
  • 税务怎么报停
  • 请问在哪里可以看到
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设