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

【问题标题】：Why is .html() so much faster than .text() when used for the same purpose?为什么 .html() 用于相同目的时比 .text() 快得多？
【发布时间】：2014-09-17 17:43:04
【问题描述】：

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

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

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

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

【问题讨论】：

我希望你不要假设这两个函数做同样的事情 :-?
不，不，不——我很好奇，当唯一的内部内容是文本时，为什么会有如此巨大的差异。
好吧，我们在这里看到了很多东西...... :)
Hue hue hue... 我会稍微澄清一下我的问题。 ;)
我还假设原生 textContent 更快（如果您可以信任文本），请参阅：stackoverflow.com/questions/21311299/…

标签： javascript jquery performance dom jsperf

【解决方案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() 也更简单。

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

【讨论】：

你可以看到the source for .text() here（第123-144行）和the source for .html() here（第404-441行）。当简单地获取（不设置）一个值时，.text() 具有递归，但.html() 执行简单的return elem.innerHTML;，因此要快得多。即使将其用作 setter，.html() 也更简单。
+1 用于了解源代码。非常感谢，埃德！
一般使用 .text 当输入不是你的用户输入时。当您知道源代码安全时使用 .html。