DOMParser 与模板和innerHTML 相比的优点

我正在寻找处理解析 HTML 或 XHTML（XML 序列化）标记并将其插入网页 DOM 的最佳方法，该网页可以是 text/html 或 application/xhtml+xml。不打算使用像 jQuery 这样的库，并且只关心与最新版本 Chrome 的兼容性。

我看到两种可能的解决方案。

• 模板和innerHTML：

  let temp = document.createElement('template');
  temp.innerHTML = markuptext;
  document.body.appendChild(temp.content);
  

• DOM解析器：

  let parser = new DOMParser();
  let doc = parser.parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">' + markuptext + '</div>', 'application/xhtml+xml');
  let frag = document.createDocumentFragment(), childNode;
  while (childNode = doc.documentElement.firstChild) {
      frag.appendChild(childNode);
  }
  document.body.appendChild(frag);
  

我希望有人能指出这两种方法的优点/缺点。

对于 Template & insideHTML，我假设 Chrome 会根据页面的内容类型选择解析为 HTML/XML，并且可能无法更改它。看来模板和innerHTML允许像这样的片段<tr><td></td></tr>之外的<tbody>无论它是解析为 HTML 还是 XML。 DOMParser 也允许这样做，但是only如果它解析为 XML。

这取决于你的目标是什么。如果您只想“按原样”附加已解析的 html/xhtml，则使用 .innerHTML，它更容易而且通常更快。 然而，根据我的经验，通常，你必须进行某种转换，那么使用 dom 操作是最好的方法。但是你应该避免在循环中逐个节点附加到 document.body ，因为它很慢而且效率低下，只需创建一些“虚拟”dom 元素，在循环中向其添加节点，然后附加整个对象：

let div = document.createElement('div');
let childNode;
while (childNode = doc.documentElement.firstChild) {
    div.appendChild(childNode);
}
document.body.appendChild(div);

一个重要的注意事项是关于尝试在 JS 中找到最有效的解决方案。 JS的性能很大程度上依赖于javascript引擎，未来会优化js的哪些部分。因此，您应该始终编写某种性能测试（或使用准备好的测试套件），尤其是像 DOM API 这样的慢速“部分”。好消息是，引擎开发人员倾向于青睐众所周知的解决方案和需要优化的“良好实践”，而他们通常会留下“坏部件”。

以下是关于 innerHTML 与 DOM 附加的一些很好的测试：http://andrew.hedges.name/experiments/innerhtml/ http://andrew.hedges.name/experiments/innerhtml/

附加到 DOm 而不创建“虚拟”div：https://coderwall.com/p/o9ws2g/why-you-should-always-append-dom-elements-using-documentfragments https://coderwall.com/p/o9ws2g/why-you-should-always-append-dom-elements-using-documentfragments

以及有关 .innerHTML、.appendChild、.insertAdjacentHTML 的更多技术解释”“innerHTML += ...”与“appendChild(txtNode)” https://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode