リフローの低減

著者：Eve Cole 更新時間：2009-10-28 16:10:49

原文:ブラウザのリフローを最小限に抑える
著者: リンジー・サイモン
翻訳:イッツォン

ページの一部または全体を再レンダリングするためにブラウザがページ要素の位置と形状を再計算するプロセスをリフローと呼びます。リフローはブラウザーでのユーザーブロック操作であるため、リフローの数を減らす方法と、さまざまなドキュメント属性 (DOM の深さ、CSS 効率、型なしのスタイルの変更) がリフローの数にどのような影響を与えるかを理解することが重要です。開発者にとって非常に必要です。リフローページ内の要素が、その親要素 (注釈: ここでは複数形) とすべての子要素をリフローする場合があります。

リフローを引き起こす可能性のあるさまざまなユーザー操作や DHTML の変更があります。ブラウザウィンドウのサイズの調整、JavaScript を使用したスタイルの計算 ( 計算されたスタイル)、DOM 内の要素の作成と削除、要素のクラスの変更を行うと、リフローがトリガーされます。一部の操作では、想像を超えてリフローが複数回トリガーされることに注意してください。次の写真は、Steve Souders の講演「さらに高速な Web サイト」からのものです。

上の表から、すべての JavaScript 制御スタイルがすべてのブラウザでリフローをトリガーするわけではなく、たとえトリガーされたとしても回数が同じではないことは明らかです。同時に、最新のブラウザーはリフロー数の制御においてますます優れていることがわかります。

Google では、ページや Web アプリケーションの速度をさまざまな方法で測定しており、リフローは UI を追加する際に考慮する重要な要素です。私たちは、活気に満ちたインタラクティブで楽しいユーザーエクスペリエンスを提供するよう努めています。

原則として

リフローを減らすためのいくつかの原則を次に示します。

不要な DOM レベル (DOM の深さ) を減らします。 DOM ツリー内の 1 つのレベルを変更すると、ルートから変更されたノードの子までのすべてのレベルが変更されます。その結果、リフローの実行に多くの時間が費やされます。
CSS ルールを最小限に抑え、未使用の CSS を削除します。
アニメーションなどの複雑なプレゼンテーションの変更を行う場合は、その変更をドキュメントフローから外してください。絶対位置決めまたは固定位置決めを使用して完了します。
一致するセレクターはより多くの CPU を消費するため、不必要に複雑な CSS セレクター、特に子孫セレクターは避けてください。

以下のビデオ (注釈: YouTube から引用。閲覧できません。壁を回避するには原文にアクセスしてください) で、Lindsey はリフローを減らすためのいくつかの方法を紹介しています。

さらに読む

元の翻訳: http://www.99css.com/2009/06/minimizing-browser-reflow.html