Web ページのレンダリングを改善する: HTML のリフローと再描画を減らす方法-htmlチュートリアル-php.cn

Web ページのレンダリングを改善する: HTML のリフローと再描画を減らす方法

WBOY

リリース： 2024-01-26 09:04:08

オリジナル

816 人が閲覧しました

Web ページのレンダリングを改善する: HTML のリフローと再描画を減らす方法

Web ページのレンダリングの最適化: HTML のリフローと再描画を最小限に抑える方法。具体的なコード例が必要です。

Web 開発では、Web ページのレンダリングパフォーマンスが非常に重要です。問題。ユーザーが Web ページにアクセスすると、ブラウザーは HTML、CSS、JavaScript を解析し、ユーザーに表示する前にレンダリングする必要があります。ただし、レンダリングプロセス中に HTML のリフローと再描画が発生する場合があり、これらの操作は大量のコンピューティングリソースと時間を消費し、Web ページの読み込み速度とユーザーインタラクションエクスペリエンスを低下させます。

HTML リフローとは、Web ページのレイアウトまたはサイズが変更されたことをブラウザーが検出したときに、ページ上の影響を受けるすべての要素の幾何学的属性を再計算して更新し、レイアウトを再配置する必要があることを意味します。再描画とは、属性の変更のみによってスタイルが変更され、レイアウトには影響しない場合、ブラウザは影響を受ける部分のみを再描画する必要があることを意味します。

Web ページのレンダリングを最適化するには、HTML のリフローと再描画の回数をできる限り減らす必要があります。以下では、いくつかの実践的なテクニックと、対応するコード例を紹介します。

CSS 翻訳を使用して、top や left などの属性の変更を置き換えます。
translate 属性を使用した変更はレイアウトの変更を引き起こさないため、top などの属性を変更するよりも優れています。より効率的です。以下はサンプルコードです:
```
// 不推荐
element.style.left = '100px';

// 推荐
element.style.transform = 'translateX(100px)';
```
ログイン後にコピー

DOM のバッチ更新:
DOM を連続して複数回変更する必要がある場合は、これらの変更操作を 1 つのグループにまとめることをお勧めします。バッチリフローの回数を減らします。以下はサンプルコードです:

const container = document.getElementById('container');
const fragment = document.createDocumentFragment();

// 不推荐
for(let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = 'Item ' + i;
  container.appendChild(div);
}

// 推荐
for(let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = 'Item ' + i;
  fragment.appendChild(div);
}
container.appendChild(fragment);

ログイン後にコピー

CSS のtransform プロパティと opacity プロパティを使用してアニメーションを実装します:
要素をアニメーション化する必要がある場合は、次のtransform プロパティと opacity プロパティを使用します。 CSS を使用して比率を変更すると、要素のレイアウトとスタイルがより効率的になります。以下はサンプルコードです:
```
// 不推荐
element.style.top = '100px';
element.style.opacity = '0';

// 推荐
element.style.transform = 'translateY(100px)';
element.style.opacity = '0';
```
ログイン後にコピー
スタイルを頻繁に変更することは避けてください:
要素のスタイルを複数回変更する必要がある場合は、これらのスタイルを配置するのが最善です。 class 内の設定を変更し、要素の classList を変更してクラスを切り替えます。以下はサンプルコードです:
```
// 不推荐
element.style.color = 'red';
element.style.fontSize = '20px';

// 推荐
element.classList.add('highlight');
```
ログイン後にコピー