警告：md-selectがmd-tabにあるときにスクロールブロッキングの「touchmove」イベントに非受動的なイベントリスナーを追加しました

Question

anglejsを使ってanglejsアプリケーションでパフォーマンスの問題に直面しています。

私は多くのオプション（約1300）を持つ<md-select>を持っており、この<md-select>は<md-tab>タグに入っています。ページが読み込まれると、私のページがフリーズします。 https://codepen.io/jjalal/pen/vWxYbv：

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

あなたは私の問題を再現codepenを見つけることができます：私は私のJSコンソールで次のログを取得するので、これは、おそらく、Google Chromeのイベントパッシブリスナーによるものです。 HarryからJohnに切り替えると、ページがフリーズします（これは私のアプリケーションでははっきりしています）。 jsログを開き、ログレベルを 'すべてのレベル'に設定すると（冗長レベルを有効にする）、3000個のログが表示されます（それぞれ1000個のオプションが3つ選択されています）。

私はthisのような真に受動的なイベントを設定する必要がありますいくつかの回答に見た：

document.addEventListener('touchmove', function(e) { 
    e.preventDefault(); 
}, { passive: true }); 

しかし、これは私の問題を解決していませんでした。

ご協力いただければ幸いです。

Answer 1

非常に似た問題を抱えていて、何時間もの研究を経て、近いうちにこれが修正されないことを認識しなければなりませんでした。説明についてはthis questionと回答を参照してください。 （そしてまた、タグを持っているangularjs github issueをチェックアウト「修正されません」）

種類-のソリューションについて：

問題がブラウザで100％（もないんですIEで試してみると、長いスクリプトが走っているとフリーズします）、あなたのコードではなくDOMレンダリングが行われます。だから、私は試し続けてみましたが、DOMの小さな部分（完成したコンテナのdiv、ボタン、段落など）を1つずつ削除しました。ある時点で、私は問題の原因を特定することができました。私はクリック可能なmdアイコンを含むドラッグ可能なアイテムを持っていて、そのアイコンはオンホバーグのmdツールチップを持っていました。今は、衝突した3つのイベント（アイテムをドラッグし、ボタンをクリックしてボタンをホバーする）があることがわかります。 md-tooltipを削除した後、それは魅力的に機能しました。私が提案するのは、正確に何が原因かを特定することです。 実際のソリューションを待つ必要があります...