4

jQuery で DOM 要素を作成する際のパフォーマンス (またはベスト プラクティスは何か) に違いがあるかどうか疑問に思っています。

私の知識では、これを行うには3つの方法があります。

  1. 文字列で:

    $('<a href="http://www.example.com" class="footerLink" rel="external">example</a>');`

  2. 最初に要素を作成し、後で属性を追加します:

    $('<a></a>')
  .addClass('footerLink')
  .attr({ 
     rel: 'external, 
     href: 'http://www.example.com' 
  })
  .text('example');

  3. 要素を作成し、属性オブジェクトを渡します。

    $('<a></a>', {
  'class': 'footerLink', 
  href: 'http://www.example.com',
  rel: 'external'
})
.text('example');

編集: 要素に多くのアイテムを追加する場合はどうなりますか? 最初に非常に長いものを作成しstring、ループの後に追加する必要がありますか?

4

2 に答える 2

5

文字列として添付するDOM全体を作成し、それを次のようにドキュメントに添付する最速の方法html()：

var dom = '<a href="http://www.example.com" class="footerLink" rel="external">example</a>';
$(element).html(dom);

あなたの例にある3つのうち、複雑な文字列解析を行う必要がなく、属性が連鎖関数呼び出しを使用して配置されず、単一のオブジェクトとして提供されるため、最速は3番目のものでなければなりませんパラメータをセレクタに渡します。

jQuery に関するフォーラム スレッドをチェックしてみてください。

アップデート：

要素に多くのアイテムを作成している場合は、文字列アプローチを確実に使用する必要があります。1000 個のリスト要素を作成する次の例を見てください。

// Assume we have data defined with 1000 data members
// each containing a text property
var list = [];
for (var i = 0; i < data.length; i++) {
    list.push('<li>' + data.text + '</li>');
}
$(ul).html(list.join(''));
于 2012-10-11T08:36:31.473 に答える
0

Konstantin が説明したように、文字列アプローチはパフォーマンス面で優れています。ただし、コードを記述する時点で DOM 文字列が不明な場合 (たとえば、テキストがユーザー入力から取得される場合) は、より遅いアプローチが理にかなっていることを指摘したいと思います。

  • 一連の長い文字列連結を避ける
  • jquery の"text"メソッドに、出力前に文字列をサニタイズする機会を与える

結局のところ、これは本当にテンプレート フレームワーク (口ひげやその他...) の仕事かもしれません。

于 2012-10-11T09:13:47.023 に答える