不使用被动侦听器来提高滚动性能（灯塔报告）

Question

A recent Lighthouse Report flagged the following issue.

Does not use passive listeners to improve scrolling performance

It also mentions...

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

How do I resolve this issue? It appears to be related to jQuery.

Answer 1

There was a long thread on this topic in https://github.com/jquery/jquery/issues/2871 in 2016

In short:

• jQuery can't add support to passive listeners.
• Is expected that this is added in jQuery 4 (4 years and still in

3. 5.x)

• The proposed fix is to add this code right after jQuery load:

---

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

UPDATE 2021: Add the following code after jquery. This will fix it and removes the Pagespeed warning

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

Answer 2

This has done the trick !

// Passive event listeners
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") });
    }
};

Answer 3

How to make event listeners passive to improve scrolling performance. To solve this issue-:

1. Go to the theme core file.
2. Look for header.php or you can use a plugin to insert code into the header.
3. Copy the code and paste it into the header.php file.
4. If you are going to use the code into header.php, I would highly recommend you to use the PHP opening and closing tag.

 <script>!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){var e,t=["scroll","wheel","touchstart","touchmove","touchenter","touchend","touchleave","mouseout","mouseleave","mouseup","mousedown","mousemove","mouseenter","mousewheel","mouseover"];if(function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(e){}return e}()){var n=EventTarget.prototype.addEventListener;e=n,EventTarget.prototype.addEventListener=function(n,o,r){var i,s="object"==typeof r&&null!==r,u=s?r.capture:r;(r=s?function(e){var t=Object.getOwnPropertyDescriptor(e,"passive");return t&&!0!==t.writable&&void 0===t.set?Object.assign({},e):e}(r):{}).passive=void 0!==(i=r.passive)?i:-1!==t.indexOf(n)&&!0,r.capture=void 0!==u&&u,e.call(this,n,o,r)},EventTarget.prototype.addEventListener._original=e}});</script>