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

【问题标题】：Does not use passive listeners to improve scrolling performance (Lighthouse Report)不使用被动侦听器来提高滚动性能（灯塔报告）
【发布时间】：2020-06-06 23:18:51
【问题描述】：

最近的一份 Lighthouse 报告指出了以下问题。

不使用被动侦听器来提高滚动性能

它还提到...

考虑将您的触摸和滚轮事件侦听器标记为passive，以提高页面的滚动性能。

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

【问题讨论】：

web.dev/uses-passive-event-listeners

标签： javascript jquery lighthouse

【解决方案1】：

2016年https://github.com/jquery/jquery/issues/2871有一个关于这个话题的长帖

简而言之：

jQuery 无法添加对被动侦听器的支持。
预计会在jQuery 4中加入（4年还在

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

【讨论】：

我在添加 jquery-3.3.1.min.js 的脚本标签之后的脚本标签中添加了这个。灯塔性能仍然不会增加。这里有没有人找到解决方案来真正摆脱报告“不使用被动侦听器来提高滚动性能”
目标是让灯塔报告看起来更适合您的老板/客户，还是让页面实际表现更好？
@squarecandy 我认为这两点对很多人来说都是相关的；）
我已经在 jQuery 加载 (v3.2.1) 之后添加了代码，但是 PageSpeed 仍然提到了被动侦听器
@escape-llc 为您的项目添加补丁并进行测试以确保它在该项目上工作比更新（字面上）一半互联网使用的 js 库要简单得多。此答案中链接的来自 jQuery github 的问题线程解释说，一个强大的解决方案将意味着对 .on 进行重大改革，并进行重大更改。

【解决方案2】：

这已经成功了！

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

【讨论】：

是否有非官方的 jQuery 发行版进行了此修复？它会阻止灯塔警告吗？
认为你需要删除!之前的ns.includes
使用 jquery 3.6.0 防止在此评论时出现灯塔警告

【解决方案3】：

如何使事件侦听器被动以提高滚动性能。为了解决这个问题-：

转到主题核心文件。
查找 header.php 或者您可以使用插件将代码插入到标头中。
复制代码并将其粘贴到 header.php 文件中。
如果您打算在 header.php 中使用代码，我强烈建议您使用 PHP 开始和结束标记。

  &lt;script&gt;!function(e){"function"==typeof define&amp;&amp;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&amp;&amp;null!==r,u=s?r.capture:r;(r=s?function(e){var t=Object.getOwnPropertyDescriptor(e,"passive");return t&amp;&amp;!0!==t.writable&amp;&amp;void 0===t.set?Object.assign({},e):e}(r):{}).passive=void 0!==(i=r.passive)?i:-1!==t.indexOf(n)&amp;&amp;!0,r.capture=void 0!==u&amp;&amp;u,e.call(this,n,o,r)},EventTarget.prototype.addEventListener._original=e}});&lt;/script&gt;

【讨论】：