リフローおよび再描画操作を減らすためのヒントと方法

頻繁なリフローおよび再描画操作を回避する方法

リフローと再描画は、ブラウザーがページをレンダリングするときの 2 つの重要な操作です。リフローとはブラウザが DOM ツリーの変更に基づいて要素の位置とサイズを再計算することを指し、再描画は計算結果に基づいてページを再描画します。これら 2 つの操作は大量のコンピューティング リソースを消費し、ページのパフォーマンスの低下を引き起こします。したがって、Web ページのパフォーマンスを最適化するには、頻繁なリフローおよび再描画操作を回避することが重要です。

この記事では、頻繁なリフローおよび再描画操作を回避する効果的な方法をいくつか紹介し、具体的なコード例を示します。

1. CSS のtransform属性を使用する
   要素の移動、回転、スケーリングなどの操作を実行する必要がある場合は、要素を直接変更するのではなく、CSSのtransform属性を使用するようにしてください。要素の left、top、width、height、その他の属性。変換操作はリフローをトリガーせず、再描画操作のみをトリガーするため、パフォーマンスが向上します。

サンプル コード:

// 不推荐的方式
element.style.left = '100px';
element.style.top = '200px';
element.style.width = '300px';
element.style.height = '400px';

// 推荐的方式
element.style.transform = 'translate(100px, 200px) scale(1.5)';

2. レイアウト プロパティへの頻繁なアクセスを避ける
   offsetWidth、offsetHeight などの JavaScript の要素のレイアウト プロパティを頻繁に読み取る必要がある場合、clientWidth、clientHeight など、頻繁なリフロー操作が発生しないように、これらのプロパティへのアクセスを最小限に抑える必要があります。

サンプルコード:

// 不推荐的方式
for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    console.log(element.offsetWidth);
}

// 推荐的方式
const length = elements.length;
for (let i = 0; i < length; i++) {
    const element = elements[i];
    console.log(element.offsetWidth);
}

3. 仮想 DOM の使用
   仮想 DOM は、JavaScript オブジェクトを通じて実際の DOM を表現するテクノロジーであり、バッチ更新により削減できます。そして再描画操作。多数の DOM 要素を頻繁に変更する必要がある場合、最初に仮想 DOM を介してバッチ処理を実行し、次に実際の DOM を一度に更新することで、リフローと再描画の回数を減らすことができます。

サンプル コード:

// 创建虚拟DOM
const virtualDOM = document.createElement('div');
virtualDOM.style.width = '200px';
virtualDOM.style.height = '300px';

// 批量批处理
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('span');
    element.innerText = 'Hello Virtual DOM';
    virtualDOM.appendChild(element);
}

// 一次性更新真实DOM
document.body.appendChild(virtualDOM);

4. スロットルとデバウンスの使用
   スロットルとデバウンスは、ページのパフォーマンスを最適化するために一般的に使用される手法です。スロットルは、イベントのトリガー頻度を制限して、頻繁なトリガーによるリフローおよび再描画操作を防ぐことができます。アンチシェイクは、イベントのトリガー時間を遅らせて、短期間に 1 つのイベントのみをトリガーする効果を実現し、それによってイベントの数を減らすことができます。リフローおよび再描画操作。

サンプル コード:

// 节流方式
function throttle(fn, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                fn.apply(this, arguments);
            }, delay);
        }
    };
}

// 防抖方式
function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}

// 使用节流方式绑定事件
element.addEventListener('scroll', throttle(function() {
    // 处理滚动事件
}, 200));

// 使用防抖方式绑定事件
element.addEventListener('resize', debounce(function() {
    // 处理调整窗口大小事件
}, 200));

上記の方法により、頻繁なリフローおよび再描画操作を効果的に回避し、ページのパフォーマンスとユーザー エクスペリエンスを向上させることができます。開発プロセス中は、CSS 変換属性の合理的な使用、レイアウト属性へのアクセスの削減、バッチ処理での仮想 DOM の使用、スロットルおよび手ぶれ補正テクノロジの使用などに注意を払う必要があります。ページのレンダリング操作を慎重に最適化すると、ユーザーはより高速でスムーズなブラウジング エクスペリエンスを実現できます。

以上がリフローおよび再描画操作を減らすためのヒントと方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。