Код, написанный на .innerHTML, улучшает производительность?

Question

У меня есть раздел со значительным содержанием MathJax, который отображается с помощью функции нажатия кнопки. Два варианта отображения:

onClick(){
  document.getElementById('section').style.display = 'inline';
}

onClick2(){
  document.getElementById('section').innerHTML = '[entire section code]'
}

Будет ли вариант .innerHTML сравнительно улучшить скорость загрузки страницы? Если это так, есть ли способ «вызвать» весь код раздела внутри функции вместо того, чтобы печатать его, следуя .innerHTML =?

Помощь приветствуется.

Answer 1

Будет ли вариант .innerHTML сравнительно улучшить скорость загрузки страницы?

Скорее всего, нет. Это снизит производительность, потому что анализатору HTML придется перестраивать дерево DOM. .innerHTML также потенциально может открыть дыры в безопасности и уничтожить все ранее зарегистрированные обработчики событий.

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

С MDN в .innerHTML :

Значение

DOMString, содержащая сериализацию HTML элемента потомки. Установка значения innerHTML удаляет все потомки элемента и заменяет их узлами, построенными парсинг HTML, заданного в строке htmlString.