“innerHTML + = …”vs“appendChild(txtNode)”

问题是,使用innerHTML比较concatination并将文本节点附加到现有节点。 现场发生了什么?

我到目前为止的想法:

  • 我猜这两个都在造成“ReFlow”。
  • 后者(追加一个文本节点),据我所知,也导致了一个完整的DOM重build(正确的?他们都这样做?)。
  • 前者似乎有一些其他的讨厌的副作用,如导致以前保存的引用到我正在修改innerHTML的节点的子节点,不再指向“当前的DOM”/“正确版本的子节点”。 相反,在追加儿童时,引用似乎保持不变。 为什么是这样?

我希望你们能为我解决这个问题,谢谢!

后者( appendChild )不会导致完全重buildDOM,甚至不会导致目标中的所有元素/节点。

前者(设置innerHTML )确实会导致目标元素内容的完整重build,如果您正在追加,则不需要。

通过innerHTML += content追加使浏览器遍历元素中的所有节点,构buildHTMLstring以提供给JavaScript层。 您的代码然后将文本附加到它并设置innerHTML ,导致浏览器删除目标中的所有旧节点,重新parsing所有的HTML,并build立新的节点。 所以从这个意义上讲,这可能不是有效的。 (然而,parsingHTML是浏览器所做的事情 ,而且真的很快。)

设置innerHTML的确会使对你可能持有的目标元素中的元素的任何引用无效 – 因为这些元素不再存在,所以当你设置innerHTML时,你删除了它们,然后放入新的元素(看起来非常相似)。

总之,如果你追加 ,我会使用appendChild (或insertAdjacentHTML ,见下文)。 如果你正在更换,有一些非常有效的情况,使用innerHTML比通过DOM API(速度是其中的主要部分)自己创build树更好。

最后,值得一提的是insertAdjacentHTML ,它是一个函数,可以使用HTMLstring将节点和元素插入到元素中或元素旁边。 你可以附加到一个元素: theElement.insertAdjacentHTML("beforeend", "the HTML goes here"); 第一个参数是放置HTML的地方; (在元素之外,在它之前), "afterbegin" (元素内部,开始处), "beforeend" (元素内部,最后)和"afterend" (外部)元素,就在它之后)。 请注意, "afterbegin""beforeend"插入元素本身,而"beforebegin""afterend"插入元素的父项 。 在所有主stream桌面浏览器的支持下,我不知道移动支持有多好(尽pipe我确信至lessiOS Safari和Android 2.x都有这个function),但是垫片很小。

我用innerHTML和appendChild之间的性能比较创build了一个小小的要点。

最后一个胜出

https://gist.github.com/oliverfernandez/5619180