使用方法語法或純html構建jQuery對象是否更快？

使用jQuery什麼提供更快的對象構造：使用方法語法或純html構建jQuery對象是否更快？

的HTML代碼

$('<dd class="foo baz" id="bar"> foobar </dd>')

或者與純對象/方法方案

$('</dd>').addClass('foo').addClass('baz').id('bar').text('foobar')

我不知道怎麼的內部工作，隨時提供高層次的總結。

來源

2010-06-10 Evan Carroll

今天早些時候提出了一個類似的問題：http://stackoverflow.com/questions/3015335/jquery-html-vs-div-creation/3015581 – James 2010-06-10 20:47:59

**寫一點測試用具，嘗試兩種方式，看看哪個速度更快**這種類型的事情可能會因瀏覽器和瀏覽器的不同而不同，以及您正在構建的jQ對象的類型。任何人都會說（除非他們自己已經對此進行了基準測試）很可能是猜測。 – LBushkin 2010-06-10 20:48:44

我該如何寫測試？你的意思是隻是用螢火蟲剖析？ – adardesign 2010-06-10 21:01:16

HTML方法肯定會更快，因爲它可以利用瀏覽器的內置innerHTML功能。這也是更少的方法調用。第3方法是最好的第2，雖然我想說的第一仍然是最快：

$('<dd/>', { 
    'class': "foo baz", 
    id: "bar", 
    text: "foobar" 
});

（類是在引號，因爲它是一個保留字）的差異不會太大，雖然。除非我有一個真正的性能問題，否則我會堅持這種第三種方式，只有當你做了這麼多的時候纔會出現這種問題。

來源

2010-06-10 20:43:56 InfinitiesLoop

我會發佈一個比較兩者的猜測。想象一下，jquery可以優化html標籤的創建，而所有的屬性都只有一個語言解析。很多功能都被抽象爲節點是如何實際構建的，這可以進行優化。我也會想，如果jquery碰巧進入ecma腳本規範，並且所有瀏覽器都開始在其本地代碼中實現它。那麼你的第一種方法會快得多。

但在第二種方法中，您幾乎修復了關於如何創建節點的方法$('</dd>').addClass('foo').addClass('baz').id('bar').text('foobar')。這可以導致優化這些方法中的每一個addClass(s), id(s), text(s)，但所有這些都是鏈接操作更多的面向對象的東西，並有其自己的開銷。

我想jQuery必須做 $('<div/>')和$('<div id='ss' />')相同的語言解析。所以有什麼區別，我沒有看到任何！

一種方法是擺脫完全像document.createElement("div");一樣的語言解析，如果你可以強制jquery創建節點只是從名稱'div'它不會需要解析哪個會更快。我相信你可以構建一個jQuery擴展來實現這一點。

在目前情況下，jquery是一個JavaScript庫，第一種方法將需要更復雜的字符串解析，因此它可能會更慢。方法addClass(s), id(s), text(s)將直接轉換爲本地DOM創建功能，速度更快。

來源

2011-01-29 07:55:20

使用方法語法或純html構建jQuery對象是否更快？

回答

相關問題