Question

使用jQuery提供更快的对象构造：

使用HTML代码

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

或使用纯对象/方法变体

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

我不确定内部是如何工作的，随时提供高级别的摘要。

Answer 1

HTML方法肯定更快，因为它可以利用浏览器的内置innerHTML功能。它也减少了方法调用。第三种方法比你的第二种更好，虽然我会说第一种方法仍然是最快的：

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

（类是引号，因为它是一个保留字）但差别不大。除非我遇到真正的性能问题，否则我会坚持第三种方式，这种情况只有在你做了大量工作时才会发生。

Answer 2

我会发布关于两者比较的推测。想象一下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创建函数。

使用方法语法或纯html构造jQuery对象更快吗？

2 个答案: