為什么.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 。 這實際上需要解析字符串。