CSSの再描画と並べ替えの例

この記事は主に CSS の再描画とリフローの方法に関する関連情報を紹介するもので、編集者が非常に優れていると考えたので、お役に立てればと思い、共有します。

ブラウザ読み込みページの原理

通常、ドキュメントが最初に読み込まれるとき、ブラウザエンジンは HTML ドキュメントを解析して DOM ツリーを構築し、次に DOM 要素の幾何学的属性に基づいてレンダリング用のツリーを構築します。レンダリングツリーの各ノードには、ボックスモデルと同様にサイズやマージンなどの属性があります（非表示要素を表示する必要がないため、レンダリングツリーにはDOMツリー内の非表示要素が含まれません）。レンダリング ツリーが構築されると、ブラウザは要素を正しい位置に配置し、レンダリング ツリー ノードのスタイル属性に基づいてページを描画できます。ブラウザのフロー レイアウトにより、レンダリング ツリーの計算は通常 1 回実行するだけで済みます。テーブルとその内部要素を除いて、レンダリング ツリー内のノードの属性を決定するために複数の計算が必要になる場合があり、これには通常、同等の要素の 3 倍の時間がかかります。これが、レイアウトにテーブルの使用を避けるべき理由の 1 つです。

再描画

再描画は、可視性、輪郭、背景色などの属性の変更など、要素の外観の変更によってトリガーされるブラウザーの動作です。ブラウザは新しい属性に基づいて要素を再描画し、要素に新しい外観を与えます。再描画は再レイアウトを引き起こさず、必ずしもリフローを伴うわけではありません。ブラウザは、再描画およびリフロー時に高いパフォーマンスの代償を支払います。

再配置

再配置はより明らかな変更であり、レンダリング ツリーを再計算する必要があると理解できます。リフローをトリガーする一般的な操作は次のとおりです:

1. DOM 要素のジオメトリ属性の変更。

2. DOM ツリーの構造変更。

たとえば、ノードの追加、削除、移動など。

特定の属性を取得します。

一部の属性を取得するとき、ブラウザは正しい値を取得するためにリフローもトリガーします。これにより、ブラウザの最適化が無効になります。これらのプロパティには、offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (IE の currentStyle) が含まれます。したがって、これらの値を複数回使用する場合はキャッシュする必要があります。

さらに、要素の一部のスタイルの変更、ブラウザウィンドウのサイズ変更、スクロールバーの表示などもリフローをトリガーします。

並べ替えの数と並べ替えの効果の範囲を削減します

1. スタイル属性を変更する複数の操作を 1 つの操作に結合します。例:

JS:
    var changep = document.getElementById(‘changep’);
    changep.style.color = ‘#093′;
    changep.style.background = ‘#eee';
    changep.style.height = ‘200px';
    可以合并为：
CSS:
    p.changep {
        background: #eee;
        color: #093;
        height: 200px;
    }
JS:
    document.getElementById(‘changep’).className = ‘changep';

2. 複数回再配置する必要がある要素の位置属性を絶対または固定に設定して、この要素がドキュメント フローの外にあり、その変更が他の要素に影響しないようにします。たとえば、アニメーション効果のある要素は絶対配置に設定するのが最適です。

3. メモリ内でノードを複数回操作し、完了後にドキュメントに追加します。たとえば、テーブル データを非同期で取得し、ページにレンダリングしたいとします。まずデータを取得してから、テーブル全体の HTML フラグメントをメモリ内に構築し、各行をループで追加する代わりに、それをドキュメントに一度に追加できます。

4. 表示属性が none の要素はレンダリング ツリーに存在しないため、非表示の要素に対する操作によって他の要素が再配置されることはありません。要素に対して複雑な操作を実行する場合は、最初に要素を非表示にし、操作が完了した後に表示することができます。これにより、非表示時と表示時に 2 つのリフローのみがトリガーされます。

5. ブラウザのリフローを引き起こす属性値を頻繁に取得する必要がある場合は、変数にキャッシュする必要があります

関連する推奨事項:

ページの再描画とリフローの最適化方法

高パフォーマンスの WEB開発ページのプレゼンテーション、再描画、リフロー。

js はサムネイルを生成してアップロードし、キャンバスを使用して redraw_javascript スキルを実行します

以上がCSSの再描画と並べ替えの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。