Question

考慮到jQuery代碼片段，其中不相同：

$("<div />").css({ 
    "background-color" : "red", 
    "color" : "white", 
    "border" : "solid 1px black" }) 
    .appendTo(someElement); 

和

$("<div style='background-color:red;color:white;border:solid 1px black' />") 
    .appendTo(someElement); 

第一個是在我看來更具可讀性，但兩者之間有什麼表現差異？還是性能差異太小，以致可讀性應該在顯式標籤聲明之前進行？

[編輯：澄清]

使用CSS和風格僅僅是一個例子。它也可以添加許多其他屬性/值。

Answer 1

嗯....這取決於。如果你插入了很多，第二個速度更快，因爲重複工作較少（但最初解析更多......而這部分取決於瀏覽器，無論是解析還是明確設置CSS都更快）。

您正在使用的html字符串被緩存爲文檔片段，用於將來的插入，因此第二個將具有整個字符串樣式，並且可以立即進行克隆，而不是每次都設置樣式，所以在一個循環更快。

不幸的是，因爲這個緩存的，所以很難測試，因爲最好的方法來測試......重複循環，它的優化。這裏有一個快速測試演示，可在Chrome或Firefox/Firebug中運行，只需打開控制檯即可查看結果（頁面在打開時會滯後...運行測試）：

http://jsfiddle.net/XAece/

在這個測試中，我的機器上10萬次迭代在Chrome：

• .css()方法：4654ms
• 內嵌樣式方法：4056ms
• $(html, props)方法：5816ms

對於Firefox：

• .css()方法：8648ms
• 內嵌樣式方法：3371ms
• $(html, props)方法：10250ms

---

作爲一個側面說明，有另一個方法（第三在上面的測試），$(html, props)，在那裏你可以將事件處理程序，使用text獲得編碼的內部文本等：

$("<div />", { 
    css: { "background-color" : "red", 
     "color" : "white", 
     "border" : "solid 1px black" }, 
    click: function() { alert('You clicked me!'); } 
}).appendTo(someElement); 

Answer 2

使用：

$('<div class="someClass" />').appendTo(someElement); 

，你會保留兩個

或

$('<div style="\ 
    border:1px solid #888;\ 
    padding:2px;\ 
" />').appendTo(someElement);