javascript - 不使用被动监听器来提高滚动性能(灯塔报告)

Question

最近的一份灯塔报告标记了以下问题。

Does not use passive listeners to improve scrolling performance

它还提到...

Consider marking your touch and wheel event listeners as passive to improve your page's scroll performance.

我该如何解决这个问题？它似乎与jQuery有关。

Answer 1

https://github.com/jquery/jquery/issues/2871 中有一个关于此主题的长线程2016 年
简而言之:

jQuery 无法添加对被动监听器的支持。

预计这是在 jQuery 4 中添加的(4 年，仍在 3.5.x 中)

建议的修复是在 jQuery 加载后立即添加此代码:

jQuery.event.special.touchstart = {
        setup: function( _, ns, handle ){
            this.addEventListener("touchstart", handle, { passive: true });
        }
    };

2021 年更新:在 jquery 之后添加以下代码。这将修复它并删除 Pagespeed 警告

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 });
    }
};