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

Question

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

Cas*_*alk 13 javascript performance jquery dom jsperf

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

$div.text() - 88,496次/秒
$div.html() - 592,028次/秒

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

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

Answer 1

eli*_*ide 21

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

您可以在.text()此处查看源(第123-144行)和此处的源.html()(第404-441行).当简单地获取(不设置)值时,.text()具有递归,但是.html()执行简单return elem.innerHTML;且因此更快.即使使用它作为制定者,.html()也更简单.

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

你可以看到[这里的`.text()`的来源(https://github.com/jquery/jquery/blob/c869a1ef8a031342e817a2c063179a787ff57239/src/selector-native.js)(第123-144行)和[来源]对于`.html()`here](https://github.com/jquery/jquery/blob/c869a1ef8a031342e817a2c063179a787ff57239/src/manipulation.js)(第404-441行).当简单地得到(不设置)一个值时,`.text()`有递归,但是`.html()`做一个简单的`return elem.innerHTML;`因此要快得多.即使将它用作setter,`.html()`也更简单. (5认同)
+1来获取源代码.非常感谢,Ed! (3认同)

归档时间：	11 年，7 月前
查看次数：	513 次
最近记录：	7 年，4 月前