Question

我有一个包含大量MathJax内容的部分，该部分通过按钮onclick函数显示。显示两个选项：

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 on .innerHTML：

值

包含元素的HTML序列化的DOMString   子孙。设置innerHTML的值会删除所有   元素的后代，并将其替换为   解析字符串htmlString中给出的HTML。

用.innerHTML编写的代码是否可以提高性能？

1 个答案: