"innerHTML + =..." vs "appendChild (txtNode)" - программирование

Вопрос заключается в сравнении конкатенации с использованием innerHTML и добавлении текста node к существующему node. Что происходит за сценой?

Мои мысли об этом до сих пор:

Я предполагаю, что оба 'REflow.
Последнее (добавление текста node), из того, что я знаю, также вызывает полную перестройку DOM (правильно? Они оба это делают?).
У первого, похоже, есть другие неприятные побочные эффекты, например, вызывать ранее сохраненные ссылки на дочерние узлы на node, я изменяю innerHTML, чтобы больше не указывать на "текущую DOM" /"правильную версию ребенок node '. Напротив, при добавлении детей ссылки, похоже, остаются нетронутыми. Почему это?

Я надеюсь, вы, люди, можете это очистить, спасибо!

Ответ 1

Последний (appendChild) не вызывает полной перестройки DOM или даже всех элементов/узлов в пределах цели.

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

Добавляя через innerHTML += content, браузер обозревает все узлы в элементе, создавая строку HTML, чтобы передать уровень JavaScript. Затем ваш код добавляет к нему текст и устанавливает innerHTML, заставляя браузер удалять все старые узлы в целевом объекте, повторно анализировать весь этот HTML и строить новые узлы. Поэтому в этом смысле это может быть неэффективно. (Тем не менее, разбор HTML - это то, что делают браузеры, и они действительно, очень быстро на нем.)

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

Короче говоря, если вы добавляете, я бы использовал appendChild (или insertAdjacentHTML, см. ниже). Если вы заменяете, существуют очень правильные ситуации, когда использование innerHTML является лучшим вариантом, чем создание самого дерева через DOM API (скорость является главной среди них).

Наконец, стоит упомянуть insertAdjacentHTML, которая является функцией, которую вы можете использовать для вставки узлов и элементов в элемент или рядом с ним используя строку HTML. Вы можете добавить к нему элемент: theElement.insertAdjacentHTML("beforeend", "the HTML goes here"); Первым аргументом является размещение HTML; ваш выбор "beforebegin" (вне элемента, прямо перед ним), "afterbegin" (внутри элемента в начале), "beforeend" (внутри элемента, в конце) и "afterend" (вне элемент, сразу после него). Обратите внимание, что "afterbegin" и "beforeend" вставляются в сам элемент, тогда как "beforebegin" и "afterend" вставляются в родительский элемент. Поддерживается всеми основными браузерами для настольных компьютеров, я понятия не имею, насколько хороша мобильная поддержка (хотя я уверен, что iOS Safari и Android 2.x, по крайней мере, имеют это, но прокладка крошечная.

Ответ 1

Ответ 2