Chromeでのランダムなハイコンテンツのダウンロード時間？
Chromeではランダムにcontent download時間がかかるAPIがあります。これは、Firefoxで常に正常に機能し、msはわずかです。応答サイズは、非圧縮で20kb、圧縮で4kbです。同じリクエストは、curlを使用しても正常に機能します。
私たちが試したこと：
If-None-Matchヘッダーを無効にして、ブラウザーからのキャッシュ応答を無効にします。- さまざまな圧縮（gzip、deflate、br）を試します。
- 圧縮を無効にします。
- すべてのchrome拡張機能を無効にします。
同じリクエストがchromeで正常に機能することもありますが、非常に長いコンテンツのダウンロード時間をランダムに返します。
この問題の根本的な原因を理解することはできません。今回最小化するために試みることができる他のことは何ですか？
ここで3つのリクエストを行い、3番目のリクエストが最も時間がかかりました（最後のスパイクの前）。 CPUが長期間最大になっているようには見えません。ほとんどの時間はアイドル時間です。
また、Replay XHRメニューを使用して通話を再生すると、コンテンツのダウンロード期間が2秒から200ミリ秒に短縮されます。
たまたま無限スクロールを実装しようとしていますか？その場合は、マウスホイールを使用する代わりに、スクロールバーをドラッグしてみてください。何らかの理由で、Chromeはマウスのスクロールイベントに苦労しているようです。スクロールバーが正常に機能した場合は、読み続けてください。
この投稿は、似たようなことを経験している人の詳細なウォークスルーを提供します https://github.com/TryGhost/Ghost/issues/7934
scrollイベントにウォッチャーをアタッチしてAJAXリクエストをトリガーしました。リクエストを抑制したところ、1つしか送信されていないことがわかりました。開発サーバーを監視しました。数ミリ秒以内に応答を返しますが、chromeで2秒の遅延が発生します。レンダリング、API呼び出し、スクリプトの実行はありません。ただし、「コンテンツのダウンロード」は14kbで3秒かかります。他のブラウザでこの問題が発生することはありませんでした。
requestAnimationFrameの代わりにsetTimeoutを使用すると問題が解決するという提案に出くわしました。そのアプローチは、「コンテンツのダウンロード」や青ではなく、「待機」または緑が重要な場合に機能するようです。
何時間も掘り下げた後、mousewheelイベントで条件付きでe.preventDefault()を呼び出してみましたが、驚いたことに、それは機能しました。
注意すべきいくつかの事柄：
1）API呼び出しを行うためにmousewheelイベントを使用しませんでした。スロットルと一緒にscrollイベントを使用しました。
2）mousewheelイベントは非標準であり、使用しないでください。 https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel を参照してください
3）ただし、この場合、クロムのためにmousewheelイベントを監視して処理する必要があります。他のブラウザは、イベントをサポートしておらず、別のブラウザで問題が発生することをまだ確認していない場合、イベントを無視します。
4）マウスでのスクロールが無効になるため、毎回preventDefault()を呼び出す必要はありません:)垂直スクロールを使用している場合は、deltaYが1の場合にのみ呼び出します。添付の画像から、基本的にスクロールできなくなったときにdeltaYが1であることがわかります。ページをスクロールできない場合でも、mousewheelイベントが発生します。ちなみに、垂直方向にスクロールしている場合はdeltaXは-0であり、水平方向にスクロールしている場合はdeltaYは-0です。
私の解決策：
window.addEventListener("mousewheel", (e) => {
if (e.deltaY === 1) {
e.preventDefault();
}
})
それは私が仕事を見た唯一の解決策であり、他の場所で言及されたり議論されたりしたことはありません。それがお役に立てば幸いです。