web-dev-qa-db-ja.com

jQueryを使用してHTML要素を作成するための最も効率的な方法は何ですか？

最近私はモーダルウィンドウのポップアップをたくさんしていましたが、そうでない場合は、jQueryを使用しました。私がページ上に新しい要素を作成するために使用した方法は、圧倒的に以下の方針に沿っています。

$("<div></div>");

しかし、これが最善の方法でも最も効率的な方法でもないと私は感じています。パフォーマンスの観点からjQueryで要素を作成するための最良の方法は何ですか？

この答え には、以下の提案に対するベンチマークがあります。

javascriptjqueryhtmldom
417
Darko Z

私は$(document.createElement('div'));を使いますベンチマークショー このテクニックは最速です。これは、jQueryがそれを要素として識別し、その要素自体を作成する必要がないためと考えられます。

実際には、さまざまなJavascriptエンジンでベンチマークを実行し、その結果と観客を比較検討する必要があります。そこから決定を下してください。

304
strager

個人的に私は（読みやすさのために）お勧めします：

$('<div>');

これまでの提案に関するいくつかの数字（safari 3.2.1/mac os x）：

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms
163
Owen

実際に$('<div>')をしているのであれば、jQueryはdocument.createElement()も使います。

（117行目を見てください）。

関数呼び出しのオーバーヘッドはいくらかありますが、パフォーマンスが重要でない限り（数百[数千]の要素を作成している場合）、plainDOMに戻す理由はそれほど多くありません。

新しいWebページ用の要素を作成するだけで、おそらくjQueryのやり方に固執するでしょう。

37
edwin

これは質問に対する正しい答えではありませんが、それでも私はこれを共有したいと思います...

document.createElement('div')だけを使用してJQueryをスキップすると、多数の要素をその場で作成してDOMに追加したい場合に、パフォーマンスが大幅に向上します。

20
Irshad

たくさんのHTMLコンテンツがある場合（単なるdivよりも）、HTMLを隠しコンテナ内のページに組み込んでから更新し、必要に応じて表示することを検討してください。このようにして、マークアップの大部分はブラウザによって事前に解析され、呼び出されたときにJavaScriptによって使い果たされることを回避できます。お役に立てれば！

20
Collin Allen

あなたはそれを最適化することができますが、私はあなたが最良の方法を使っていると思います：

 $("<div/>");
16
tvanfosson

あなたはCPUの観点からあなたが極端にまれに実行する操作から生のパフォーマンスを必要としません。

11
yfeldblum

最初にjQueryを使用するという状況では、要素作成のパフォーマンスの重要性は無関係であることを理解する必要があります。

覚えておいてください、あなたが実際にそれを使用するつもりでない限り、要素を作成する本当の目的はありません。

$(document.createElement('div')) vs. $('<div>')のようなものをパフォーマンステストし、$(document.createElement('div'))を使用することでパフォーマンスを大幅に向上させることができますが、それはまだDOMにはない要素です。

しかし、結局のところ、実際のテストにはf.exを含める必要があるので、とにかく要素を使用したいと思うでしょう。 .appendTo（）;

あなたがお互いに対して以下をテストするなら、見てみましょう：

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

結果が変わることに気付くでしょう。一方の方法の方が他方よりもパフォーマンスが優れていることがあります。これは、コンピュータ上のバックグラウンドタスクの量が時間の経過とともに変化するためです。

ここで自分でテストしてください

したがって、結局のところ、要素を作成するための最も小さくて読みやすい方法を選択したいと思います。そうすれば、少なくとも、スクリプトファイルは可能な限り小さくなります。 DOMで使用する前に要素を作成する方法よりも、おそらくパフォーマンスの点でより重要な要素です。

9
Jani Hyytiäinen

誰かがすでにベンチマークを作っています： jQuery document.createElementと同等のもの？

$(document.createElement('div'))が大きな勝者です。

8
Erel Segal-Halevi

1つのポイントはそれがするのがより簡単であるかもしれないということです：

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

それからそれらすべてをjquery呼び出しで行います。

7
Tobiah

私はjquery.min v2.0.3を使っています。それは私のために次のように使用することをお勧めします：

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

次のように：

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

最初のコードの処理時間は、2番目のコードよりはるかに短くなります。

3
Marcel GJS