.insertAdjacentHTML与替代品的优势？

Question

在.insertAdjacentHTML上使用.innerHTML方法有什么好处？是否有任何令人信服的理由使用.innerHTML代替.insertAdjacentHTML？哪个有更好的表现？ .innerHTML如何运作？还有什么其他选择？

Answer 1

.insertAdjacentHTML比.innerHTML有一些好处。第一个是表演。在进行的基准测试中，.innerHTML在5秒内附加了200多条Twitter推文。另一方面，insertAdjacentHTML在相同的时间范围内附加了近30,000个。需要追加的数据越多，执行的.innerHTML越差。但请注意，在这种情况下，使用.innerHTML +=附加数据。

另一个好处是控制。 .insertAdjacentHTML为您提供了对要附加数据的位置的控制权，而`.innerHTML则没有。

.insertAdjacentHTML的最终好处是它不会破坏DOM。以下是.innerHTML +=的工作原理。

1. 通过序列化后代来获取.innerHTML的值 元件。
2. 它将+ =的右侧附加到字符串。
3. 删除元素的子元素。
4. 它解析新的字符串 包含旧后代的序列化，后跟一些 新标记。 显然，最后的好处并不适用于使用.innerHTML =。
的情况

.innerHTML的其他替代方法是.insertBefore方法，顾名思义是在另一个节点之前将节点作为子节点插入，以及插入子节点的.appendChild方法作为最后一个节点。

.insertAdjacentHTML是一种多功能工具，因为它可以执行.innerHTML，.insertBefore以及.appendChild的工作。

资料来源：https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/