ウィンドウのサイズ変更とスクロール イベントに関する基本的な最適化のアイデア_JavaScript スキル

同僚はスクロール イベントを使用してプロジェクトにデータをロードしましたが、結果は IE に悲劇をもたらしました。単純な最適化方法が与えられ、明らかな結果が得られます。

ユーザーがウィンドウ サイズを変更する限り、一部の内部要素のサイズが再計算され、ページ全体が再レンダリングされ、最終的には大量の CPU が消費される可能性があります。たとえば、サイズ変更メソッドが呼び出される場合、ユーザーがウィンドウ サイズを変更すると継続的にトリガーされ、以前のバージョンの IE は一時停止アニメーション状態に陥る可能性があります。ウィンドウのスクロール イベントにも同じことが当てはまります。マウスでスクロール バーをスクロールまたはドラッグすると、処理すべきものが多すぎると、スクロール イベントが継続的にトリガーされます。

基本的な最適化の考え方: サイズ変更イベント関数は一定期間内に 1 回のみ実行します。

コードをコピーします コードは次のとおりです。 (ウィンドウ) .on('resize', function () {

if (resizeTimer) {

clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log) ("ウィンドウのサイズ変更");
}, 400);


スクロールイベントの最適化も同様です。