ホームページ > 記事 > ウェブフロントエンド > ウィンドウのサイズ変更とスクロール イベントに関する基本的な最適化のアイデア_JavaScript スキル
ウィンドウのサイズ変更とスクロール イベントに関する基本的な最適化のアイデア_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 16:50:371708ブラウズ
同僚はスクロール イベントを使用してプロジェクトにデータをロードしましたが、結果は IE に悲劇をもたらしました。単純な最適化方法が与えられ、明らかな結果が得られます。
ユーザーがウィンドウ サイズを変更する限り、一部の内部要素のサイズが再計算され、ページ全体が再レンダリングされ、最終的には大量の CPU が消費される可能性があります。たとえば、サイズ変更メソッドが呼び出される場合、ユーザーがウィンドウ サイズを変更すると継続的にトリガーされ、以前のバージョンの IE は一時停止アニメーション状態に陥る可能性があります。ウィンドウのスクロール イベントにも同じことが当てはまります。マウスでスクロール バーをスクロールまたはドラッグすると、処理すべきものが多すぎると、スクロール イベントが継続的にトリガーされます。
基本的な最適化の考え方: サイズ変更イベント関数は一定期間内に 1 回のみ実行します。
コードをコピーします コードは次のとおりです。 (ウィンドウ) .on('resize', function () {
if (resizeTimer) { clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log) ("ウィンドウのサイズ変更");
}, 400);
スクロールイベントの最適化も同様です。
}
resizeTimer = setTimeout(function(){
console.log) ("ウィンドウのサイズ変更");
}, 400);
スクロールイベントの最適化も同様です。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。