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);