一般的なリフローおよび再描画の問題の解決策

一般的なリフローおよび再描画の問題と解決策。特定のコード例が必要です。

Web 開発では、パフォーマンスの最適化が重要なトピックです。リフローと再描画は、Web ページのレンダリング中に発生する一般的なパフォーマンスの問題であり、ページのフリーズやリソースの浪費を引き起こす可能性があります。この記事では、一般的なリフローと再描画の問題を紹介し、開発者がページのパフォーマンスを最適化するのに役立ついくつかの解決策を提供します。

1. リフローと再ペイントの概念

1. リフローとは、ブラウザが DOM ツリー内の要素に基づいてページ上の各要素の位置を計算して決定することを意味します。サイズ。ページのリフロー プロセスには時間がかかるため、リフローの回数を最小限に抑える必要があります。
2. リペイントとは、DOM ツリー内の要素によって提供されるスタイル情報に基づいて、ブラウザがページ上に要素を描画することを意味します。再描画はリフローよりも低コストです。

2. リフローと再描画の一般的な問題と解決策

1. DOM を変更するとリフローと再描画が発生します

DOM を変更するとき構造化またはスタイル化されると、ブラウザーは要素の位置とサイズを再計算し、要素を再描画します。たとえば、JavaScript を通じて要素のスタイルを頻繁に変更すると、継続的なリフローと再描画が発生し、ページがフリーズします。

解決策: DOM 操作を最小限に抑えます。複数の変更を 1 つに統合したり、JavaScript アニメーションの代わりに CSS アニメーションを使用して再描画の回数を減らすことができます。

サンプル コード:

// 不推荐的方式
element.style.width = '100px';
element.style.height = '100px';
element.style.marginLeft = '10px';
element.style.marginTop = '10px';

// 推荐的方式
element.style.cssText = 'width: 100px; height: 100px; margin-left: 10px; margin-top: 10px;';

2. 強制同期レイアウトによりリフローが頻繁に発生します

JavaScript では、特定の要素 (offsetTop、offsetLeft など) の属性を取得します。 、scrollTop など）によりレイアウトが強制的に同期され、リフローが引き起こされる可能性があります。

解決策: これらのプロパティを頻繁に取得しないようにしてください。キャッシュまたはバッチ取得によってリフローの回数を減らすことができます。

サンプル コード:

// 不推荐的方式
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  const top = element.offsetTop;
  // 其它处理
}

// 推荐的方式
let tops = [];
for (let i = 0; i < elements.length; i++) {
  tops.push(elements[i].offsetTop);
}

3. ウィンドウ サイズを頻繁に変更すると、リフローと再描画が発生します。

ウィンドウ サイズが変更されると、ブラウザはページを再計算します。レイアウト。リフローと再描画が発生します。

解決策: ウィンドウ サイズが頻繁に変更されるのを避けるために、スロットル関数を使用して、ウィンドウ サイズの変更に対するコールバック関数の実行頻度を制御できます。

サンプル コード:

// 不推荐的方式
window.addEventListener('resize', handleResize);

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

window.addEventListener('resize', throttle(handleResize, 200));

3. 結論

リフローと再描画の問題は、Web 開発における一般的かつ重要なパフォーマンス最適化の問題です。 DOM 操作を削減し、レイアウトの強制同期を回避し、ウィンドウ サイズを頻繁に変更することにより、リフローと再描画を効果的に削減し、ページのパフォーマンスとユーザー エクスペリエンスを向上させることができます。この記事で提供されるソリューションとサンプル コードが、開発者によるページのパフォーマンスの最適化に役立つことを願っています。

以上が一般的なリフローおよび再描画の問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。