javascript - 为什么 .html() 在用于相同目的时比 .text() 快得多？

Question

我正在研究 jQuery 的 .text() 和 .html() 方法并运行 some simple jsPerf tests ，当我惊讶地发现 .html() 在检索文本时几乎快了一个数量级:

• $div.text() – 88,496 次操作/秒
• $div.html() – 592,028 次操作/秒

当结果相同时，为什么 .text() 比 .html() 慢很多？ .text() 执行哪些操作 .html() 会跳过以解释这种差异？

我知道每种方法都有不同的目的；我很好奇它们用于相同目的的情况。

Answer 1

它与所需的解析量有关。 .text() 较慢，因为它必须解析内部 HTML 并去除任何内部标签。 .html() 只是抓取(或者，如果您正在设置内容，则删除)那里已经完成的任何内容。

可以看到the source for .text() here (第 123-144 行)和 the source for .html() here (第 404-441 行)。当简单地获取(而不是设置)一个值时，.text() 有递归，但是 .html() 做一个简单的 return elem.innerHTML; 因此速度要快得多。即使将它用作 setter，.html() 也更简单。

另请注意:即使您将两者都用作 setter 并仅传递纯文本，.html() 也会更快；当您使用 .text() 时，浏览器仍然需要确定 elem.nodeType。这实际上需要解析字符串。