jQueryレンダリングの蓄積を解決する方法

Web 開発では、jQuery は最も一般的に使用される JavaScript ライブラリの 1 つであり、JavaScript コードをより簡潔にし、使いやすく、保守しやすくすることに尽力しています。 jQuery を使用すると、DOM 操作、イベント バインディング、アニメーション効果、Ajax データ対話などのタスクを簡単に処理できます。ただし、実際の開発では、ページ内で動的にデータを生成、レンダリングし、蓄積を実装する必要がある場合があります。この記事では、jQuery を使用してレンダリングの蓄積の問題を解決する方法に焦点を当てます。

問題の説明

動的に表示する必要があるリストがあり、各項目には番号があり、この番号は継続的に蓄積する必要があるとします。単純に JavaScript を使用して実装すると、データが更新されるたびにリスト全体を再レンダリングする必要があるため、ページの視覚効果が十分に滑らかではなくなり、ユーザー エクスペリエンスが低下するという欠点が生じます。

サンプル コードは次のとおりです。

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

let data = [1, 2, 3];

function render() {
  let list = $('#list');
  list.empty();

  for (let i = 0; i < data.length; i++) {
    let num = data[i];
    let li = $('<li></li>');
    li.text(num);
    list.append(li);
  }
}

function update() {
  for (let i = 0; i < data.length; i++) {
    data[i]++;
  }
  render();
}

setInterval(update, 1000);

このサンプル コードでは、リスト datadata を定義します。ここで、各要素は表示する必要がある数値を表します。 render() 関数は、data データに基づいて対応する HTML コードを生成し、ページに挿入します。 update()関数は、一定の間隔でデータを更新し、リスト全体を再レンダリングします。このコードは実装が簡単ですが、更新のたびにリスト全体を再レンダリングする必要があるため、パフォーマンスが大幅に低下します。

解決策

上記の問題を解決するには、他の部分に影響を与えることなく、新しい HTML コードを効率的にレンダリングし、各データ更新後にページに挿入する方法を見つける必要があります。 jQuery には一般的に使用される 2 つのメソッドがあります:

メソッド 1: DOM 要素を変更する

このメソッドの基本的な考え方は、DOM 要素とインデックス上の各番号に対応する位置を記録することです。更新は、リスト全体を再レンダリングすることなく行われます。

サンプル コードは次のとおりです。

<ul id="list">
    <li data-index="0">1</li>
    <li data-index="1">2</li>
    <li data-index="2">3</li>
</ul>

let data = [1, 2, 3];

function render() {
  for (let i = 0; i < data.length; i++) {
    let num = data[i];
    let li = $('#list li[data-index="' + i + '"]');
    li.text(num);
  }
}

function update() {
  for (let i = 0; i < data.length; i++) {
    data[i]++;
  }
  render();
}

setInterval(update, 1000);

このサンプル コードでは、次を使用して、各 li 要素に data-index 属性を追加しました。その番号に対応する位置を記録します。 render() 関数では、data-index 属性に基づいて対応する要素を検索し、その表示番号を更新します。

方法 2: テキスト ノードの使用

この方法の基本的な考え方は、テキスト ノードを使用して数値を直接更新し、DOM 要素に挿入することです。これは、DOM を直接操作するよりも効率的です。要素。

サンプル コードは次のとおりです。

<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

let data = [1, 2, 3];

function render() {
  let list = $('#list');
  list.empty();

  for (let i = 0; i < data.length; i++) {
    let numNode = document.createTextNode(data[i]);
    let li = $('<li></li>');
    li.append(numNode);
    list.append(li);
  }
}

function update() {
  for (let i = 0; i < data.length; i++) {
    data[i]++;
  }
  render();
}

setInterval(update, 1000);

このサンプル コードでは、まず空の li 要素を作成し、document.createTextNode()Method はテキスト ノードを作成します。次に、jQuery の append() メソッドを使用してテキスト ノードを li 要素に挿入し、最後に li 要素をページに挿入します。

概要

この記事では、jQuery を使用してレンダリングの蓄積の問題を解決する 2 つの方法を紹介しました。これらの方法を使用すると、データが更新されるたびにリスト全体を再レンダリングするという効率の問題を回避し、ページの応答速度とユーザー エクスペリエンスを向上させることができます。もちろん、具体的な開発においては、実情に応じて最適な実装方法を選択する必要があります。

以上がjQueryレンダリングの蓄積を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。