PageSpeed Insights 未使用被动式监听器来提高滚动性能的警告的解决办法

关于优化WordPress滚动性能的建议

小本本这里想和大家分享一下关于优化WordPress站点滚动性能的建议。当我们使用PageSpeed Insights测试我们的WordPress站点的使用时，如果前端已经加载了jQuery库，我们通常会收到一条“未使用被动式监听器来提高滚动性能”的警告。那么，该如何操作呢？

为什么会出现未使用被动式监听器的警告？

在浏览器渲染网页的过程中，默认情况下，浏览器会主动监听绑定到触摸和滚动事件，根据该事件的运行结果和是否阻止浏览器的默认行为来判断是否执行默认操作。比如我们可以在触摸事件调用preventDefault，这时，浏览器会禁用该事件的默认操作，不会滚动或缩放。

而浏览器无法预先知道一个监听器会不会调用preventDefault()，它需要等监听器执行完后，再去执行默认行为。而监听器执行是要耗时的，这样就会导致页面卡顿。如果我们把监听器的监听方式改为被动的，就可以消除掉这个延时，提高网页的触摸和滚动性能。更深入的解释可以点击移动Web滚动性能优化:Passiveeventlisteners。

如何实现被动式监听器来提高滚动性能？

截止到本文发布之日，WordPress内置的jQuery还没有支持这个操作。但是，我们可以通过一段简单的代码来为jQuery加上这个支持。如果您的网站中没有使用jQuery，依然出现了未使用被动式监听器来提高滚动性能的警告，可以参考以上代码中的this.addEventListener部分修改您的代码，来实现被动式监听。

<?php
add_action('wp_enqueue_scripts',function()
{
wp_add_inline_script('jquery','
jQuery.event.special.touchstart={
setup:function(_,ns,handle){
this.addEventListener("touchstart",handle,{passive:!ns.includes("noPreventDefault")});
}
};
jQuery.event.special.touchmove={
setup:function(_,ns,handle){
this.addEventListener("touchmove",handle,{passive:!ns.includes("noPreventDefault")});
}
};
jQuery.event.special.wheel={
setup:function(_,ns,handle){
this.addEventListener("wheel",handle,{passive:true});
}
};
jQuery.event.special.mousewheel={
setup:function(_,ns,handle){
this.addEventListener("mousewheel",handle,{passive:true});
}
};'
);
},999);

尽管这个警告不会直接影响PageSpeed Insights的评分，但是解决掉这个延时后，对提高网页的用户体验还是有一些帮助的。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。