Почему .html() намного быстрее, чем .text(), когда используется для этой же цели?

Я просто играл с методами jQuery .text() и .html() и запускал несколько простых тестов jsPFerf, когда я был поражен, обнаружив, что .html() почти на порядок быстрее при получении текста.

Почему .text() намного медленнее, чем .html(), когда результат тот же? Какие операции выполняет .text(), что .html() пропускает для учета такой разницы?

(Обновление: как отмечено в комментариях, я знаю, что каждый метод имеет другую цель, мне интересно, где они используются для той же цели.)

Статистика JSPerf для заинтересованных:

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

Ответ 1

Это зависит от требуемого количества парсинга. .text() медленнее, потому что он должен анализировать внутренний HTML и выделять любые внутренние теги. .html() просто захватывает (или, если вы устанавливаете содержимое, уничтожает) все, что есть и что делается.

Вы можете увидеть источник для .text() здесь (строки 123-144) и источник для .html() здесь (строки 404-441). Когда вы просто получаете (не устанавливаете) значение, .text() имеет рекурсию, но .html() делает простой return elem.innerHTML; и, следовательно, намного быстрее. Даже используя его как сеттер, .html() проще.

Также обратите внимание: даже если вы используете оба как сеттеры и передаете только обычный текст, .html() работает быстрее; браузеру еще нужно определить elem.nodeType, когда вы используете .text(). Это эффективно требует синтаксического анализа строки.