サイズ、ページでの位置をブラウザによって管理する場所です。CSS、要素の内容、親要素に基づいて、明示的または暗黙的なサイジング情報を持ちます。呼ばれますが、実際にはプロセスは同じです。TL;DR通常、レイアウトはドキュメント全体に適用されます。要素の数はパフォーマンスに影響を与えます。可能な限り、レイアウトのトリガーを避けてください。モデルのパフォーマンスを評価します。ベースのレイアウトモデルよりも高速です。強制的な同期レイアウトとレイアウト転回を避けます。スタイル値を読み取ってから、スタイルを変更します。スタイルの計算と同様に、レイアウトのコストについて次の点を直接考慮する必要があります。可能な限りレイアウトを回避ユーザがスタイルを変更すると、ブラウザは、いずれかの変更によってレイアウトの計算が必要になるかどうか、そのためにレンダリングツリーの更新が必要になるかどうかを確認します。幅、高さ、左、上部など、「幾何学的プロパティ」に対する変更はすべてレイアウトを必要とします。350px;}レイアウトはほとんど常にドキュメント全体に適用されます。要素がある場合、それらの要素の位置と次元を決定するには長い時間がかかります。使用して必要な時間を確認し、レイアウトが問題の原因であるかどうかを判定することが重要になります。タブに移動し、レコーディングを開始してサイトを操作します。レコーディングを停止すると、サイトのパフォーマンスの分解が表示されます。超の時間が費やされていることが分かります。あるのと比べて、これは長すぎます。レイアウトで必要とされたノードの数も分かります。使用ウェブには複数のレイアウトモデルがあり、一部のモデルは他のモデルよりも広くサポートされます。要素をフロートすることで、要素を画面上に配置できました。個のボックスでフロートを使用するときのレイアウトコストを示しています。大部分のアプリケーションではさまざまな手法を使用して要素を配置するため、これは明らかに不自然な例です。使用するように例を変更すると、状況は変わってきます。選択できないことに注意するのが重要です。コストを最小限に抑える手法を採用する必要があります。選択する場合でも選択しない場合でも、アプリケーションの負荷の高いポイントではレイアウトのトリガーを可能な限り避けるようにする必要があります。実行した後、スタイル計算、次にレイアウト。使用してブラウザでレイアウトを先に実行することもできます。実行すると、以前のフレームからの古いレイアウト値が既知となり、問い合わせ可能になることです。高さを書き出す場合は、次のようなコードを作成できます。console.log(box.offsetHeight);}ボックスの高さを問い合わせる前に、ボックスのスタイルを変更すると、問題が生じます。クラスを追加するため)、レイアウトを実行する必要があります。して初めて、正しい高さを返すことが可能になります。これは不必要な作業であり、コストが高くなる可能性があります。(ブラウザが以前のフレームのレイアウト値を使用できる場合)、書き込みを行う必要があります。box.classList.add('super-big');}ほとんどの場合、値を問い合わせる前に、スタイルを適用する必要はありません。最新フレームの値を使用するだけで十分です。スタイル計算とレイアウトをブラウザより早く同期的に実行することはボトルネックになる可能性があり、通常は実行するべき処理ではありません。次のコードを見てください。}}このコードはパラグラフのグループをループ処理し、「ボックス」と呼ばれる要素の幅に一致するように各パラグラフの幅を設定します。(paragraphs[i].style.width)。最後に要求された以降にスタイルが変更されたという事実をブラウザで考慮する必要があります。そのため、スタイル変更を適用してから、レイアウトを実行しなければなりません。これはループのすべての反復で発生します。このサンプルを修正するには、やはり値を読み取った後で値を書き込むようにします。チェックアウトする必要があります。これは読み取りと書き込みを自動的にバッチ化するため、強制的な同期レイアウトとレイアウト転回の発生を防ぐことになります。Brasileiro。