フロントエンドのパフォーマンスの最適化: 仮想スクロールを使用して、長いリストのレンダリングパフォーマンスを向上させます。

フロントエンド開発では、電子商取引 Web サイトの商品リストやソーシャルプラットフォーム上の情報の流れなど、大量のデータをレンダリングする必要があるシナリオによく遭遇します。データの量が多い場合、すべてのデータをページに直接レンダリングすると、ページがフリーズしたりクラッシュしたりすることがあります。この問題を解決するには、仮想スクロール (仮想スクロール) テクノロジを使用して、長いリストのレンダリングパフォーマンスを向上させることができます。

この記事では、仮想スクロールの原理を詳しく紹介し、簡単な例を通して仮想スクロールを実装する方法を示します。

仮想スクロールの原理

仮想スクロールの中心的な考え方は、すべてのデータではなく、表示領域のリスト項目のみをレンダリングすることです。ユーザーがページをスクロールすると、現在の表示領域内のリスト項目が動的に計算され、データのこの部分のみがレンダリングされます。こうすることで、リストがどれだけ長くても、一定数の DOM ノードを維持するだけで済み、パフォーマンスが大幅に向上します。

例: 単純な仮想スクロールの実装

仮想スクロールの実装をデモンストレーションするために、単純な長いリストを作成します。リスト内の各項目は、シーケンス番号とランダムな色の正方形で構成されます。

まず、大量のデータを含む配列を作成する必要があります。

javascript复制
const itemCount = 10000;
const items = Array.from({ length: itemCount }, (_, index) => ({
  id: index,
  color: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
}));

次に、VirtualList仮想スクロールを実装するためにというコンポーネントを作成します。このコンポーネントは次のパラメータを受け取る必要があります。

items: リストデータ
itemHeight: リスト項目の高さ
visibleCount: 表示領域内のリスト項目の数

javascript复制
class VirtualList {
  constructor({ items, itemHeight, visibleCount }) {
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleCount = visibleCount;
    this.init();
  }

  // ...
}

このメソッドではinit、コンテナ要素を作成し、その高さとオーバーフローのプロパティを設定する必要があります。同時に、コンテナーが正常にスクロールできるように、コンテナーの高さを拡張するプレースホルダー要素を作成する必要があります。

javascript复制
init() {
  this.container = document.createElement('div');
  this.container.style.height = `${this.visibleCount * this.itemHeight}px`;
  this.container.style.overflow = 'auto';

  this.placeholder = document.createElement('div');
  this.placeholder.style.height = `${this.items.length * this.itemHeight}px`;
  this.container.appendChild(this.placeholder);

  this.renderItems();
  this.bindEvents();
}

このメソッドではrenderItems、現在の表示可能領域内のリスト項目を計算し、ページ上にレンダリングする必要があります。

javascript复制
renderItems() {
  const scrollTop = this.container.scrollTop;
  const startIndex = Math.floor(scrollTop / this.itemHeight);
  const endIndex = Math.min(startIndex + this.visibleCount, this.items.length);

  const fragment = document.createDocumentFragment();
  for (let i = startIndex; i < endIndex; i++) {
    const item = this.items[i];
    const itemElement = document.createElement('div');
    itemElement.style.height = `${this.itemHeight}px`;
    itemElement.style.backgroundColor = item.color;
    itemElement.textContent = `Item ${item.id}`;
    fragment.appendChild(itemElement);
  }

  this.container.innerHTML = '';
  this.container.appendChild(this.placeholder);
  this.container.appendChild(fragment);
}

scroll最後に、ユーザーがページをスクロールするときにリスト項目を更新するために、コンテナーのイベントをリッスンする必要があります。

javascript复制
bindEvents() {
  this.container.addEventListener('scroll', () => {
    this.renderItems();
  });
}

VirtualListこれで、のインスタンスを作成してページに追加できるようになりました。

javascript复制
const virtualList = new VirtualList({
  items,
  itemHeight: 50,
  visibleCount: 10,
});

document.body.appendChild(virtualList.container);

この簡単な例では、仮想スクロールを備えた長いリストを実装します。この例は比較的単純ですが、仮想スクロールの基本を示しています。実際のプロジェクトでは、必要に応じて最適化および拡張できます。

要約する

虚拟滚动是一种提升长列表渲染性能的有效方法。通过只渲染可视区域内的列表项，我们可以大大减少 DOM 节点的数量，从而提高页面性能。希望本文能帮助你理解虚拟滚动的原理，并在实际项目中应用这一技术。