Javascript jQuery动态DOM创建性能

在jQuery中动态创建HTML元素时，以下两种方法在性能方面是否存在差异

// First approach
var elem = $('<div/>').attr('id', 'foo').addClass('myClass');

// Second approach
var elem = $('<div id="foo" class="myClass" />');

//第一种方法
var elem=$（''）.attr（'id'，'foo'）.addClass（'myClass'）；
//第二种方法
变量元素=$（''）；

---

另外，一种方法比另一种方法有什么明显的优势，还是仅仅是品味的问题？

我想很多人都没有意识到jQuery中最受欢迎和使用最频繁的组件——选择器——实际上在幕后发挥了很多魔力，因此需要使用一些资源。 第一种方法比第二种方法更多地使用选择器。我认为你的第二种方法也更容易阅读，更干净。我会坚持那一条。
如果您必须修改已经创建的元素，则方法1更适合，但我实际上不会这样创建它。 希望这有帮助

做了一个快速测试，看起来没有太大的差异，我得到了一个可以忽略不计的差异，第一个是在大多数跑步中稍微快一点

我个人认为第一种方法更干净。更少的字符串解析。我发现代码中处理字符串的次数越少，它就越稳定

---

利用jQuery的不同方法将在某种程度上证明您的代码的未来性，因为它将能够生成在未来任何浏览器中都能工作的元素，而您的html字符串可能并不总是保持兼容。

问题在于速度

“以下两种方法在性能方面是否存在差异？”

与大多数情况一样，每秒要挤出更多的操作，可读性就不存在了

我更喜欢第二个的可读性，但第一个实际上更快。（在我费心测试的浏览器中）

---

除了其他答案中讨论的速度（第一个答案稍微快一点），我发现最可读的答案（以及我使用的答案）是

---

比较在

第一种方法更具可读性，但它使用了大量数据。链接不是坏事，但比第二种方法慢

第一个方法实际上是创建一个jquery对象，然后对其调用两个（或更多）方法。但是每次创建一个新的$（）对象并将其返回给调用链元素时

第二个方法创建一个新元素（如果参数是正确的html字符串），然后。。。就这样。没有别的了。非常便宜

尝试中断这两个方法，然后逐步执行调试器

我向你推荐几篇我以前读过的文章：我喜欢它们

---

我使用第二种方法，因为它对我来说更自然。就性能而言，我怀疑这有什么真正的区别。我更喜欢第一种，因为它的字符串解析更少。不确定哪一个更快，我会对它进行测试，结果几乎没有什么不同：使用和FF15进行测试时，string方法的速度提高了约20%。就我个人而言，我更喜欢第一种方法，因为我觉得它更容易阅读。威廉，我认为这取决于我的偏好TBH LOL=）好的，谢谢大家的意见，我想我暂时还是使用第二种方法，因为我认为它更具可读性，尽管正如许多人指出的，第一种方法速度更快。我不同意，我认为第一种方法要干净得多。怎么会呢是你能得到的最干净、最朴素的。这甚至是第1种方法最终将输出的结果。是的，但这是一个简单的标记，如果我想开始添加事件处理程序，我现在混合使用字符串解析和流畅的接口。我宁愿保持一致。标签越复杂，属性越多，可能嵌套的元素越多，你的底线在哪里？注意，这项测试是在最新的Chromeno中进行的，这并不重要，但问题不仅仅是“速度”，它还问，“一种方法比另一种方法有什么明显的优势，或者只是品味的问题吗？”没错，不过，我把它作为附加信息阅读，并补充了我对可读性的看法。

var elem = $('<div/>', {
    'id': 'foo',
    'class': 'myClass'
});

var elem = $('<div/>').prop('id', 'foo').addClass('myClass');