为什么在相同目的下，.html()比.text()快那么多？

Question

为什么在相同目的下，.html()比.text()快那么多？

javascriptjqueryperformancedomjsperf

14

我正在使用jQuery的.text()和.html()方法进行编程，并运行一些简单的jsPerf测试，惊讶地发现.html()在检索文本方面快了近一个数量级：

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

为什么.text()比.html()慢这么多，结果却相同？.text()执行了哪些操作，而.html()跳过了这些操作，导致出现如此大的差异？

我知道每种方法都有不同的用途；我对它们被用于相同目的的情况很感兴趣。

- Casey Falk

2

我希望你没有假设这两个函数做同样的事情 :-? - Álvaro González

不，不，不——我很好奇为什么只有文本这样的内部内容时会有如此巨大的差异。 - Casey Falk

1

好的，我们在这里看到了很多东西... :) - Álvaro González

呵呵呵...我稍微澄清一下我的问题。 ;) - Casey Falk

我还假设本地的 textContent 更快（如果您可以信任文本），请参见：https://dev59.com/32Ei5IYBdhLWcg3wZ7ka - Christophe Roussy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- elixenide · Accepted Answer

这与所需的解析量有关。 .text() 比较慢，因为它需要解析内部 HTML 并剥离任何内部标签。 .html() 只是获取（或者如果你正在设置内容，则是覆盖）其中的内容并完成。

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

请注意：即使您同时使用setter并且只传递纯文本，.html()仍然更快；当您使用.text()时，浏览器仍然需要确定elem.nodeType。这实际上需要解析字符串。