7

jQuery を使用してクライアント側の HTML を作成すると、適切に行えばパフォーマンスが大幅に向上することがわかりました。JSON を返す AJAX を使用して動的コンテンツを取得し、関連する HTML を作成して jQuery を使用して挿入します。初めてこの手法をいじったとき、IE の JavaScript の文字列連結子の実行が非常に遅く、50 行以上の動的テーブルを作成するとパフォーマンスが低下することがわかりました。 

var shtml = '<table>';
for (var i = 0; i < 100; i++) {
  shtml += '<tr><td>A bunch of content</td></tr>';
}
shtml += '</table>';
$('#myTable').append(shtml);

その後、すべてを変える文字列連結の手法を見つけました。文字列演算子を使用する代わりに、+=配列を使用して連結を行います。

var shtml = ['<table>'];
for (var i = 0; i < 100; i++) { 
  shtml.push('<tr><td>A bunch of content</td></tr>');
}
shtml.push('</table>');
$('#myTable').append(shtml.join(''));

パフォーマンスが大幅に向上することがわかりました。しかし、今では約 100 行の上限があり、ブラウザー自体が一度に大量のコンテンツを動的に挿入するのに苦労しているのが見え始めます。動的 HTML の大規模なセットの次のパフォーマンス向上を達成するために使用できるポインターまたはテクニックを誰かが持っていますか?

4

9 に答える 9

7

$ .trim関数が原因で、jQueryと大量のhtml文字列をDOMに挿入する際にパフォーマンスの問題が発生します。

私は時々、jqueryを使用するよりもはるかに高速なプレーンな古いdomスクリプトを見つけることがあります。次のようなものを試してください

document.getElementById('id').innerHTML = myarray.join('')
于 2009-02-27T22:24:27.333 に答える
3

テンプレート ライブラリの使用を検討しましたか? たとえば、 PUREは非常に優れたパフォーマンスを発揮します (500 行の例を試してください)。

于 2009-02-26T05:10:45.423 に答える
1

その場で生成するのではなく、DOM 自体の一部を複製してみてください (つまり、実際の DOMElement を追加して、作成する必要がないようにします)。

于 2009-02-26T15:52:59.343 に答える
1

html を多くの部分に分割して、1 つずつ追加できると思います。

$("table tr:last").after('<tr>...</tr>');

googleDocs の文書行のように

于 2011-03-22T14:32:30.843 に答える
0

Chase の言うとおりです。JavaScript を介して HTML をどれだけ速く生成できるかは問題ではありません。DOM の挿入が命取りになります。どんなプログラミング言語も DOM と結びつけると遅くなります。

私の唯一の提案は、一度に多くをロードしないようにテーブルをページ分割するか、AJAX をまったく使用しないことです。

于 2009-02-26T20:00:14.990 に答える
0

昨日、大量のhtmlを追加することをいじっていました。サーバー側でのレンダリングと挿入が進むべき道だと思います。また、ここにある私のテストでは、jqueryを使用しない方が50〜100ミリ秒高速であると付け加えることができます。

http://programmingdrunk.com/playground

速度の結果を表示するには、firebug コンソールを有効にする必要があります

于 2009-02-26T05:17:04.300 に答える
-1

サーバー側で HTML 生成を行い、Ajax を使用して HTML を取得して DOM に追加すると、パフォーマンスが向上する可能性があります。(とにかく、Ajax を使用してサーバーからすべてのデータを取得していると仮定しています。)

于 2009-02-26T04:48:35.850 に答える