[解決済み】イベントハンドラを「パッシブ」に設定して、ページの応答性を向上させることを検討する。

質問

ドラッグにハンマーを使っているのですが、他のものを読み込むときに、この警告メッセージのようにカクカクするようになりました。

入力イベント 'touchstart' の処理は、X ms の遅延が発生しました。 メインスレッドがビジー状態です。イベントハンドラを「パッシブ」としてマークすることを検討してください。 ページをより反応しやすくしてください。

そこで、次のようにリスナーに「passive」を追加してみました。

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});

という警告が出るのですが、まだ

どうすればいいですか？

初めてこの警告を受けた方のために、この警告は、以下のような最先端の機能によるものです。 パッシブイベントリスナー という、かなり最近（2016年夏）になってブラウザに実装されたものです。からは https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

パッシブイベントリスナー は DOM 仕様の新機能で、これにより を排除することで、スクロールのパフォーマンスを向上させることができます。 は、タッチおよびホイールイベントのリスナーでスクロールがブロックされる必要があります。 開発者は、タッチ リスナーおよびホイール リスナーに {passive: true} というアノテーションを付けることができます。 は、preventDefault を決して呼び出さないことを意味します。この機能 Chrome 51、Firefox 49 で出荷され、WebKit に搭載されました。 公式の詳しい説明はこちらをご覧ください。

こちらもご覧ください。 パッシブイベントリスナーとは何ですか？

.jsライブラリがサポートを実装するのを待つ必要があるかもしれません。

JavaScriptライブラリを介して間接的にイベントを処理している場合、その特定のライブラリの機能サポートに翻弄される可能性があります。2019年12月現在、主要なライブラリのサポートは実装されていないようです。いくつか例を挙げます。

• jQuery.js - 継続的な問題 https://github.com/jquery/jquery/issues/2871
• React.js - 継続的な問題 https://github.com/facebook/react/issues/6436
• Hammer.js - フォローアップがないため閉鎖。 https://github.com/hammerjs/hammer.js/pull/987
• パーフェクトスクロールバー - を閉じた。 https://github.com/noraesae/perfect-scrollbar/issues/560
• アンギュラーJS - は、won't fixのため閉鎖されました。 https://github.com/angular/angular.js/issues/15901