再描画とリフローの使い方

今回は、redrawとreflowの使い方と、redrawとreflowを使用する際の注意点を紹介します。実際の事例を見てみましょう。

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

通常、ドキュメントが最初に読み込まれるとき、ブラウザエンジンは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. ブラウザーのリフローを引き起こす属性値を頻繁に取得する必要がある場合は、変数にキャッシュする必要があります

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、お支払いください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

S5 はレイヤードスクリーンに適応します

h5 は複数画像のプレビューのアップロードとクリックしてドラッグするコントロールを可能にします

以上が再描画とリフローの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。