在使用PageSpeed Insights测试我们的WordPress站点时，如果前端加载了jQuery库，我们经常会收到一条警告，提示“未使用被动式监听器来提高滚动性能”。谷歌建议我们将触摸和滚轮事件的监听器标记为passive，以此来提升页面的滚动性能。
为何会出现未使用被动式监听器的警告？
在浏览器渲染网页的过程中，它默认会主动监听绑定到触摸和滚动事件的处理程序。浏览器需要等待这些事件处理程序执行完毕，并根据它们是否调用preventDefault()来判断是否执行默认操作（如滚动或缩放）。如果事件处理程序调用了preventDefault()，浏览器就会禁用该事件的默认操作。然而，浏览器无法预知一个事件处理程序是否会调用preventDefault()，因此它必须等待事件处理程序执行完成后再决定是否执行默认行为。这个等待过程可能会消耗时间，从而导致页面卡顿。
如何让WordPress内置的jQuery支持被动式监听器？
将监听器的监听方式改为被动，可以消除这个延时，从而提高网页的触摸和滚动性能。虽然这个警告不会直接影响PageSpeed Insights的评分，但解决这个延时问题对于提升网页的用户体验仍然是有帮助的。
尽管WordPress内置的jQuery在发布本文时尚不支持被动式监听器，但我们可以通过添加一段简单的代码来为jQuery添加这个支持。通过这段代码，我们可以确保所有使用jQuery添加的事件监听器都默认为被动式，从而提升滚动性能。
请注意，随着技术的不断发展，WordPress和jQuery可能会在未来的版本中内置对被动式监听器的支持，因此建议定期检查并更新您的网站代码，以确保其始终与最新的最佳实践保持一致。
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);如果您的网站并未使用jQuery，但却在PageSpeed Insights测试中收到了关于“未使用被动式监听器来提高滚动性能”的警告，那么问题可能出在您自定义的JavaScript代码中。在这种情况下，您可以通过调整事件监听器的添加方式来解决这一问题。
具体来说，您可以参考上方代码片段中的this.addEventListener部分，并据此修改您的代码，以实现被动式监听。被动式监听器能够告诉浏览器，您的事件处理程序不会调用preventDefault()来阻止默认行为（如滚动或缩放），这样浏览器就可以在不需要等待事件处理程序执行完毕的情况下立即执行默认行为，从而提升页面的滚动性能。
