javascript スキルのスクロール時に DIV レイアウトが点滅しないようにするための js ソリューション

この記事の例は、スクロール時の DIV レイアウトのちらつきを防ぐための js メソッドを説明しており、参考のために皆さんに共有されています。具体的な方法は以下の通りです。

私が最近目にしたページのパフォーマンスには、ブラウザーのレンダリングなど、微妙で独自のコンテンツが多数含まれています。情報量が多いので抜粋兼メモとしていくつか抜粋しました。
JavaScript が DOM の書き込みと読み取りを複数回行うと、「レイアウト スラッシング」が発生し、ドキュメントのリフロー (リフロー – レンダー ツリーを構築するプロセス

) が発生します。

コードをコピーします コードは次のとおりです:

DOM ツリーから 1)。
// 読み取り
var h1 = element1.clientHeight;
// 書き込み(レイアウト無効)
element1.style.height = (h1 * 2) 'px';
// 読み取り (トリガー レイアウト)
var h2 = element2.clientHeight;
// 書き込み(レイアウト無効)
element2.style.height = (h2 * 2) 'px';
// 読み取り (トリガー レイアウト)
var h3 = element3.clientHeight;
// 書き込み(レイアウト無効)
element3.style.height = (h3 * 2) 'px';

DOM を作成すると、レイアウトが無効になるため、特定の時点で再配置する必要があります。しかし、ブラウザは非常に怠惰で、現在の操作 (またはフレーム) が終了するまで待ってからリフローしようとします。
ただし、現在の操作 (またはフレーム) が終了する前に DOM から幾何学的値を読み取る場合、ブラウザーは事前にレイアウトを強制的に再配置します。これはいわゆる「強制同期レイアウト」です。それはパフォーマンスを殺します。
最新のデスクトップ ブラウザでは、レイアウト スラッシングの副作用は明らかではないかもしれませんが、ローエンドのモバイル デバイスでは問題は深刻です。

簡単な解決策

理想的な世界では、コードの実行順序を並べ替えるだけで、DOM の読み取りと DOM の書き込みをバッチで行うことができます。つまり、ドキュメントのリフローは 1 回だけで済みます。

コードをコピー コードは次のとおりです:

// Read
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// 書き込み(レイアウト無効)
element1.style.height = (h1 * 2) 'px';
element2.style.height = (h2 * 2) 'px';
element3.style.height = (h3 * 2) 'px';
// フレームの最後でドキュメントがリフロー

現実の世界ではどうでしょうか?

現実はそれほど単純ではありません。大規模なプログラムでは、コードがあらゆる場所に分散され、この危険な DOM があらゆる場所に存在します。実行順序を制御するためだけに、美しく分離されたコードを簡単に混練することはできません (もちろん、そうすべきではありません)。では、パフォーマンスを最適化するには、読み取りと書き込みをバッチ処理するにはどうすればよいでしょうか?

リクエストアニメーションフレームに対応します

window.requestAnimationFrame は、setTimout(fn, 0) と同様に、次のフレームで実行される関数をスケジュールします。これを使用すると、すべての DOM 書き込み操作が次のフレームで同時に実行され、DOM 読み取り操作が現在の順序で同期的に実行されるようにスケジュールできるため、非常に便利です。

コードをコピー コードは次のとおりです:

// Read
var h1 = element1.clientHeight;
//
と書きます requestAnimationFrame(function() {
element1.style.height = (h1 * 2) 'px';
});
// 読み取り
var h2 = element2.clientHeight;
//
と書きます requestAnimationFrame(function() {
element2.style.height = (h2 * 2) 'px';
});
……

この記事が皆さんの JavaScript ベースの Web プログラミングに役立つことを願っています。