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

Question

我在玩 jQuery.text()和.html()方法并运行一些简单的 jsPerf 测试时，我惊讶地发现.html()检索文本的速度几乎快了一个数量级：

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

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

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

Answer 1

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

您可以查看此处的源代码.text()（第 123-144 行）和此处的源代码.html()（第 404-441 行）。当简单地获取（不设置）一个值时，.text()具有递归，但.html()执行简单return elem.innerHTML;，因此速度更快。即使将其用作设置器，.html()也更简单。

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