为什么.html（）在用于同一目的时比.text（）快得多？

Question

我正在玩jQuery的.text()和.html()方法并运行一些简单的jsPerf测试 ，当我惊讶地发现.html()在检索文本方面要快得多：

• $div.text() - 88,496 ops / sec
• $div.html() - 592,028 ops / sec

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

我知道每种方法都有不同的目的; 我很好奇他们用于同一目的的情况。

Answer 1

它与所需的解析量有关。 .text()较慢，因为它必须解析内部HTML并去除任何内部标记。 .html()只是抓住（或者，如果你正在设置内容，删除）那里的任何东西都已完成。

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

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