コードの最適化: リフローと再描画を減らす方法

パート 1: 合理化されたコード実装: リフローと再描画を減らすためのヒント

Web アプリケーションを開発する場合、パフォーマンスの最適化は重要なタスクです。中でも、ページのリフロー（リフロー）と再描画（リペイント）を減らすことは、Webページのパフォーマンスを向上させるための重要なポイントの1つです。この記事では、リフローと再描画を減らし、Web ページのパフォーマンスを向上させるのに役立ついくつかのヒントと具体的なコード例を紹介します。

1. JavaScript アニメーションの代わりに CSS3 アニメーションを使用する

アニメーション効果が必要な要素では、JavaScript を介してアニメーションを実装するのではなく、CSS3 アニメーションを使用してみてください。 CSS3 アニメーションはハードウェア アクセラレーションを利用しており、リフローと再描画を効果的に削減します。以下は CSS3 アニメーションの使用例です:

.animated-element {
  transform: translateX(0);
  transition: transform 0.3s;
}

.animated-element:hover {
  transform: translateX(100px);
}

2. バッチ操作スタイル

要素に複数のスタイル変更を行う場合、これらの操作を 1 つのバッチ操作に組み合わせることができます。要素の className を変更するか、classList を使用して、スタイルを 1 回だけ変更します。これにより、リフローと再描画の回数が減ります。以下は、classList の使用例です。

element.classList.add('class1', 'class2');
element.classList.remove('class3');

3. スロットリングと手ぶれ補正の使用

ブラウザ イベントをリッスンするとき、頻繁にトリガーされるイベントについては、 scroll や resize などのイベントの場合、スロットルとデバウンスを使用して、リフローと再描画の数を減らすことができます。スロットルと手ぶれ補正は、カスタム関数またはサードパーティのライブラリを使用して実現できます。以下は、lodash ライブラリを使用したスロットリングとアンチシェイクの例です。

// 节流
window.addEventListener('scroll', _.throttle(function() {
  // 需要执行的代码
}, 200));

// 防抖
window.addEventListener('resize', _.debounce(function() {
  // 需要执行的代码
}, 300));

4. 仮想 DOM の使用

仮想 DOM (仮想 DOM) は、ページを変換する方法です。更新操作は最初に仮想 DOM ツリーに適用され、次に実際の DOM と比較され、最後に本当に更新する必要がある部分のみが更新されるため、リフローと再描画のオーバーヘッドが削減されます。一般的に使用される仮想 DOM ライブラリには、React や Vue などがあります。以下は React を使用した例です。

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 内容 */}
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

5. Using requestAnimationFrame

Using requestAnimationFrame アニメーション描画に、次のことができます。ブラウザは次の再描画の前に JavaScript コードを実行するため、複数の再描画が 1 つに統合されます。以下は、requestAnimationFrame の使用例です:

function render() {
  // 绘制代码

  requestAnimationFrame(render);
}

render();

上記のいくつかの簡単なテクニックと具体的なコード例を通じて、リフローと再描画の数を効果的に減らし、Web のパフォーマンスを向上させることができます。アプリケーション。このコンテンツがあなたの Web ページ最適化作業に役立つことを願っています。

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