Element.inner HTML слишком дорого обходится, нужны альтернативы

Question

Недавно я столкнулся с проблемой при профилировании моего JS кода и обнаружил в коде очень маленькую функцию, которая занимала 3-10 мс. После расследования я выяснил, что функция Element.innerHTML - это та функция, которая занимает почти все время процессора при вызове 1-2 раза внутри этой функции.

Например: element1.innerHTML = "<span>text</span>".

Я ищу альтернативу сокращению времени процессора.

Answer 1

Если вы можете игнорировать с помощью Element.inner HTML, сделайте это. это супер дорого. Вместо этого используйте document.createElement и Element.appendChild.

Я преобразовал этот код element1.innerHTML = "<span>text</span>" в этот код:

var element2 = doc.createElement('span');
element2.innerText = "text";
element1.appendChild(element2);

Когда я сделал это изменение в обоих местах, я сбросил ЦП с каждого внутреннего использования HTML с 1,5 мс до 0,01 мс и даже 0 мс в большинстве случаев.

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

Решением этого является использование:

element.appendChild(document.createTextNode('\u00A0'))

, которое будет делать тот же эффект без innerHTML. Даже использование Element.insertAdjacentHTML приводит к синтаксическому анализу HTML и требует больше процессорного времени, поэтому я также попытался игнорировать его использование.

Надеюсь, это поможет.