为什么从 text/html 文档创建元素比从 application/xml 文档创建元素慢？

Question

场景：我想创建一个表单并一次添加 20k+ 个输入字段，步长为 10。

实现：我使用JS DOMParser创建Document并使用Document.createElement方法创建这些元素。

问题：使用 mimetype "text/html" 通常比使用 "application/xml".

慢 5 倍以上

问题：

我应该继续使用 "application/xml" mimetype 来创建大型 HTML DOM 层次结构吗？
"text/html" 这么慢有什么原因吗？
在构建 HTML DOM 时使用 "application/xml" 有缺点吗？

示例测试

以下代码段是我要完成的工作的基本示例。它对两个 mimetype 选项都有测试，并将经过的时间输出到控制台。

JSFiddle link

// Controls
const htmlTest = document.getElementById('html');
const xmlTest = document.getElementById('xml');
const progress = document.getElementById('progress');
const formContainer = document.getElementById('form');
// Generate input field data for test, 2000 sets of 10 inputs each.
const inputSets = [];
for (let i = 0; i < 2000; i++) {
  const inputSet = [];
  for (let j = 0; j < 10; j++) {
    inputSet.push({
      name: `abc[${i}]`,
      value: "123"
    });
  }
  inputSets.push(inputSet);
}
// Each set will be created in a task so that we can track progress
function runTask(task) {
  return new Promise(resolve => {
    setTimeout(() => {
      task();
      resolve();
    });
  });
}
// The actual create form function
function createForm(isXML, callback) {
  formContainer.innerHTML = '';
  const domparser = new DOMParser();
  let doc;
  if (isXML) {
    doc = domparser.parseFromString('<?xml version="1.0" encoding="UTF-8"?><form method="POST" action="targetAction" target="_blank"></form>', "application/xml");
  } else {
    doc = domparser.parseFromString('<form method="POST" action="targetAction" target="_blank"></form>', "text/html");
  }

  const form = doc.getElementsByTagName('form')[0];

  const start = Date.now();
  console.log('===================');
  console.log(`Started @: ${(new Date(start)).toISOString()}`);
  let i = 0;
  const processTasks = () => {
    runTask(() => {
      for (let input of inputSets[i]) {
        const inputNode = doc.createElement('input');
        inputNode.setAttribute('type', 'hidden');
        inputNode.setAttribute('name', input.name);
        inputNode.setAttribute('value', input.value);
        form.appendChild(inputNode);
      }
    }).then(() => {
      i++;
      if (i < inputSets.length) {
        progress.innerHTML = `Progress: ${Math.floor((i / inputSets.length) * 100)} %`;
        processTasks();
      } else {
        progress.innerHTML = 'Progress: 100 %'
        const serializer = new XMLSerializer();
        // EDIT: By using the xml serializer you can append valid HTML
        formContainer.innerHTML = serializer.serializeToString(form);
        const end = Date.now();
        console.log(`Ended @: ${(new Date(end)).toISOString()}`);
        console.log(`Time Elapsed: ${(end - start) / 1000} seconds`);
        console.log('===================');
        callback && callback();
      }
    });
  };
  // Append all the inputs
  processTasks();
}

htmlTest.onclick = () => {
  createForm(false, () => {
    const tForm = formContainer.getElementsByTagName('form')[0];
    tForm.submit();
  });

};

xmlTest.onclick = () => {
  createForm(true, () => {
    const tForm = formContainer.getElementsByTagName('form')[0];
    tForm.submit();
  });
};

<button id="html">text/html test</button>
<button id="xml">application/xml test</button>
<div id="progress">Progress: 0 %</div>
<div id="form"></div>

EDIT：我使用答案中提供的新信息编辑了示例。通过使用 XMLSerializer 将 xml 设置为 innerHTML 作为字符串，我能够保留 application/xml 并创建有效的 HTML 表单。这样我可以更快地生成表单，但仍然能够提交它，就好像它是由 window.document.createElement（text/html 文档）创建的一样。

Answer 1

Should I continue with the "application/xml" mimetype to create large HTML DOM hierarchies?

我真的不明白你想做什么（大局）所以很难说。

Is there a reason "text/html" is so slow?"

是的。首先，仅创建一个 HTML 文档比创建一个 XML 文档要复杂得多。
只需检查您创建的两个 DOM，HTML 有更多的元素。

const markup = '<form></form>'
console.log(
  'text/html',
  new XMLSerializer().serializeToString(
    new DOMParser().parseFromString(markup, 'text/html')
 )
);
console.log(
  'application/xml',
  new XMLSerializer().serializeToString(
    new DOMParser().parseFromString(markup, 'application/xml')
 )
);

现在，您的案例甚至不仅会创建文档，还会在创建元素 并为其设置属性 之后创建文档。

您将在 HTML 中设置的属性是会触发大量副作用的 IDL 属性，而在 XML 版本中它们不对应，因此设置起来更快。

const xmldoc = new DOMParser().parseFromString('<div/>', 'application/xml');
const xmlinput = xmldoc.createElement('input');
xmlinput.setAttribute('type', 'text');
console.log("xml input", xmlinput.type) // undefined

const htmldoc = new DOMParser().parseFromString('<div/>', 'text/html');
const htmlinput = htmldoc.createElement('input');
htmlinput.setAttribute('type', 'text');
console.log("html input", htmlinput.type) // "text"

Is there a downside to using "application/xml" when building an HTML DOM?

是：您没有构建 HTML DOM。您正在创建的 None 个元素继承自 HTMLElement，并且 none 的行为与它们的 HTML 对应相同。

const xmldoc = new DOMParser().parseFromString('<div/>', 'application/xml');
const xmlinput = xmldoc.createElement('input');
xmlinput.setAttribute('type', 'text');
console.log("is HTMLElement", xmlinput instanceof HTMLElement) // false

因此，如果您需要 HTML DOM，则不能将其解析为 XML。

我希望你能从那里回答自己的第一个问题。

为什么从 text/html 文档创建元素比从 application/xml 文档创建元素慢？

Why is creating elements from a text/html Document slower than creating them from an application/xml Document?

javascript

html

xml

dom

domparser

示例测试