この記事では、divレイアウトスクロール時にフラッシュするのを防ぐJSの方法について説明し、参照のために共有されています。特定の方法は次のとおりです。
私は最近、ページのパフォーマンスにさらされており、ブラウザのレンダリングなど、多くの微妙でオリジナルのコンテンツがあります。多くの情報があるので、翻訳と覚書のためにいくつかを選びました。
JavaScriptはDOMを複数回書き、読み取り、「レイアウトバンプ」が発生し、レンダリングツリーを構築するプロセスを逆にするドキュメントを引き起こします
コードコピーは次のとおりです：dom tree1から）。
// 読む
var h1 = element1.clientheight;
//書き込み（レイアウトは無効です）
element1.style.height =（h1 * 2） + 'px';
// read（リリースをタッチ）
var H2 = element2.clientheight;
//書き込み（レイアウトは無効です）
element2.style.height =（h2 * 2） + 'px';
// read（リリースをタッチ）
var h3 = element3.clientheight;
//書き込み（レイアウトは無効です）
element3.style.height =（h3 * 2） + 'px';
DOMが書かれている場合、レイアウトは無効であり、特定の時点で再配置する必要があります。しかし、ブラウザは怠zyであり、再配置の前に現在の操作（またはフレーム）が終了するまで待ちたいです。
ただし、現在の操作（またはフレーム）が終了する前にDOMから幾何学的な値を読み取ると、ブラウザにレイアウトを事前に再配置するように強制します。これは「強制的な同期レイアウト」と呼ばれ、パフォーマンスを殺します。
最新のデスクトップブラウザーでは、でこぼこのレイアウトの副作用は明らかではないかもしれません。しかし、ローエンドのモバイルデバイスでは、問題は深刻です。
クイックソリューション
理想的な世界では、コード実行順序を再配置するだけで、バッチでDOMを読み書きできます。これは、ドキュメントを一度に並べ替える必要があることを意味します。
次のようにコードをコピーします。/ 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';
//ドキュメントはフレームの最後に再配置されます
それで、現実の世界はどうですか？
現実にはそれほど単純ではありません。大規模なプログラムでは、コードはどこにでも広がっており、そのような危険なドムがあります。実行順序を制御するためだけに、美しいデコアコードを簡単に混ぜることはできません（そして明らかにすべきではありません）。パフォーマンスを最適化するために、どのようにバッチ読み取りと書き込みをしますか？
RequestAnimationFrameを知るようになります
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プログラミングに役立つことを願っています。