Verwendet keine passiven Listener, um die Scrollleistung zu verbessern (Lighthouse Report)

In einem kürzlich erschienenen Lighthouse-Bericht wurde das folgende Problem gemeldet.

Verwendet keine passiven Listener, um die Bildlaufleistung zu verbessern

Erwähnt wird auch…

Erwägen Sie, Ihre Berührungs- und Radereignis-Listener als zu markieren passive um die Scrollleistung Ihrer Seite zu verbessern.

Wie löse ich dieses Problem? Es scheint mit jQuery zusammenzuhängen.

Zu diesem Thema gab es einen langen Thread in https://github.com/jquery/jquery/issues/2871 im Jahr 2016

Zusamenfassend:

• jQuery kann keine Unterstützung für passive Listener hinzufügen.
• Es wird erwartet, dass dies in jQuery 4 hinzugefügt wird (4 Jahre und immer noch in 3.5.x)
• Die vorgeschlagene Lösung besteht darin, diesen Code direkt nach dem Laden von jQuery hinzuzufügen:

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

UPDATE 2021: Fügen Sie nach jquery den folgenden Code hinzu. Dies behebt das Problem und entfernt die Pagespeed-Warnung

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

Das hat den Trick getan!

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

Wie man Ereignis-Listener passiv macht, um die Scrollleistung zu verbessern. So lösen Sie dieses Problem:

1. Gehen Sie zur Kerndatei des Themas.
2. Suchen Sie nach header.php oder Sie können ein Plugin verwenden, um Code in den Header einzufügen.
3. Kopieren Sie den Code und fügen Sie ihn in die Datei header.php ein.
4. Wenn Sie den Code in header.php verwenden, würde ich Ihnen dringend empfehlen, das öffnende und schließende PHP-Tag zu verwenden.

  <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>