Непонятная разница в производительности в настройках innerHTML / textContent - PullRequest
4 голосов
/ 02 декабря 2011

Это тест, сравнивающий производительность innerHTML / textContent как с существующими, так и с вновь созданными style элементами: http://jsperf.com/innerhtml-vs-textcontent/3

Результаты подразумевают:

  • innerHTML и textContent выполняют абсолютно идентичные операции на вновь созданных style узлах в каждом протестированном браузере
  • На существующих style узлах они работают точно так же в Safari и Opera, но innerHTML быстреев Firefox и Chrome
  • Замена style вновь созданного узла на быстрее, чем перезапись его textContent в Firefox и Chrome , медленнее в Opera и без разницы вSafari.

Хотя неудивительно, что браузеры отличаются по производительности, я нахожу части , выделенные жирным шрифтом довольно удивительными.

Итак, как же может быть innerHTMLбыстрее, чем textContent, и почему замена некоторого узла будет быстрее, чем замена его содержимого?

1 Ответ

1 голос
/ 02 декабря 2011

Проверьте это: innerHTML, innerText, textContent, html () и text ()?

InnerHTML вернет вам весь контент внутри элемента, в то время как textContent в основном пытается проанализировать контент (избавиться от тегов) при доступе к элементу. Я предполагаю, что причина для первого пункта заключается в том, что Google и Mozilla провели некоторую оптимизацию до innerHTML, используя указатель вместо кучи obj в качестве ссылки, и поэтому он быстрее (назначение указателя по сравнению с манипулированием obj). Я предполагаю, что FF / Chrome будет иметь лучшую производительность, чем другие браузеры для тега innerHTML.

Кажется, textContent пытается получить доступ к дочерним узлам каждый раз, когда вы получаете к нему доступ.

для второй части, из предоставленного вами кода, js сделал удаление дочерних узлов перед вызовом textContent. Как я уже сказал, textContent пытается получить доступ к дочерним узлам и анализировать их во время вызова, будет быстрее, если он обнаружит, что дочерний узел не добавлен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...