XML 解析 vs DOM 实现创建方法

Question

我记得很清楚，使用 DOM 实现在文档上创建新的 HTML 元素被认为比将 HTML 字符串分配给适用的 HTML 元素的“innerHTML”属性要慢得多。

在使用 JavaScript 编写 XML 文档时是否同样适用？与其使用 DOM 实现的各种创建方法，不如只生成 XML 字符串并解析它会更快吗？

只是我想知道的事情...... :)

*EDIT - 添加了一个示例 *

哪个更快？ （我将使用 jQuery 的 parseXML 函数来做解析示例）：

var myXdoc = $.parseXML("<person><name>Bob</name><relation>Uncle</relation>");

或者

var myXdoc

if (window.ActiveXObject) {
    myXdoc = new ActiveXObject("Microsoft.XMLDOM");
    myXdoc.async = false;
}
else if (document.implementation && document.implementation.createDocument)
    myXdoc = document.implementation.createDocument("", "", null);

var p = myXdoc.documentElement.appendChild(myXdoc.createElement("person"));
var n = p.appendChild(myXdoc.createElement("name"));
n.appendChild(myXdoc.createTextNode("Bob"));
var r = p.appendChild(myXdoc.createElement("relation"));
r.appendChild(myXdoc.createTextNode("Uncle"));

Answer 1

首先我们必须知道为什么createDocument() 可能会很慢。原因是 DOM 是活动的，如果您正在修改它，它会触发对 DOM 树的重新验证，并且可能会重新绘制站点。每次。但是我们可以通过使用createDocumentFragment() 来避免这种不必要的重新验证和重新绘制。 DocumentFragment 不是 DOM 的一部分，因此它不会触发任何事件。因此，您可以构建完整的 DOM 部分，并在最后一步将其附加到 DOM 树中。我认为这是创建大型 DOM 部件的最快方法。

更新 我使用 Firebug 在 Firefox 7 中对其进行了测试。代码：

console.time("a");
for(var i=0; i<1000; i++) {
$.parseXML("<person><name>Bob</name><relation>Uncle</relation></person>")
}
console.timeEnd("a");

console.time("b");
for(var i=0; i<1000; i++) {
var myXdoc
if (document.createDocumentFragment) {
    myXdoc = document.createDocumentFragment();
}
var p = myXdoc.appendChild(document.createElement("person"));
var n = p.appendChild(document.createElement("name"));
n.appendChild(document.createTextNode("Bob"));
var r = p.appendChild(document.createElement("relation"));
r.appendChild(document.createTextNode("Uncle"));
}
console.timeEnd("b");

结果：“a”大约 140 毫秒，“b”大约 35 毫秒。所以字符串解析版本比较慢。

更新2 很可能第二个变体在任何其他浏览器中也更快。因为 parse 方法也必须构建 DOM 对象，而且它很可能使用相同的方法（例如：document.createElement）。所以解析方法不能更快。但它比较慢，因为它首先要解析字符串。