JavaScript HTML注入效率/最佳实践

Question

我希望通过JavaScript将HTML注入工作页面.

我想知道的是,如果注入重写页面的效率比使用类似方法在整个页面中注入片段效率更高或更低getElementById().

例如:

document.getElementById("Example").innerHTML = '<h2 id="Example" name="Example">Text</H2>'
document.getElementsByClassName("Example").innerHTML = '<H1>Test</H1>'

...等等.这比单纯注入我自己版本的整个页面的HTML开始完成更有效/有效吗？

编辑: Per Lix的评论,我应该澄清一下,我可能会在页面中注入大量内容,但它会随时影响不超过十几个元素.

Answer 1

如果您的项目可以管理它,最好创建DOM元素并将它们附加到树中.

效率的最大问题是设置.innerHTML属性将首先删除所有节点,然后解析html并将其附加到DOM.

很明显,你应该避免删除和重新添加相同的元素,所以如果你确定"Example"元素将始终保留在页面上,你设置它们的方式似乎是一个很好的优化.

如果你想进一步优化它,你可以解析你想要附加到节点的html,并有一个函数来检查应该追加哪些,哪些不应该.但请注意,访问DOM的成本很高.阅读有关ECMA-DOM桥的更多信息.

编辑:在某些情况下,让浏览器进行html解析和注入可能会更好innerHTML.这取决于您插入的HTML数量以及您要删除的数量.请参阅@Nelson Menezes关于innerHTML与append的评论.