.insertAdjacentHTML與替代品的優點？

使用.insertAdjacentHTML方法比.innerHTML有什麼好處？是否有任何令人信服的理由使用.innerHTML而不是.insertAdjacentHTML？哪個有更好的表現？ .innerHTML如何工作？什麼是其他的選擇？.insertAdjacentHTML與替代品的優點？

來源

2014-01-20 Azrael

這兩者是完全不同的。使用其中一個的原因取決於情況。 –

有幾個好處.insertAdjacentHTML已經超過.innerHTML。首先是表現。在進行的基準測試中，.innerHTML在滿五秒的時間內稍微超過了200條Twitter推文。另一方面，在相同的時間框架內附加了近30,000個。需要追加的數據越多，執行的情況就越糟糕。但請注意，在這種情況下，數據是使用.innerHTML +=附加的。

另一個好處是控制。 .insertAdjacentHTML可以讓你控制你想要追加數據的位置，而`.innerHTML不會。

.insertAdjacentHTML的最終好處是它不會破壞DOM。 .innerHTML +=的工作原理如下。

它通過序列元件的後代獲取的.innerHTML值。
它將+ =的右邊追加到字符串。
它刪除元素的孩子。
它解析新的字符串，包含舊的後代的序列化後跟一些新的標記。很明顯，最後的好處並不適用於使用.innerHTML =的情況。

到.innerHTML其他替代方案是.insertBefore方法，它顧名思義插入一個節點作爲另一個節點前的孩子，以及這將插入一個子節點的最後一個節點.appendChild方法。

.insertAdjacentHTML是一種多功能工具，因爲它可以執行.innerHTML,.insertBefore以及.appendChild的作業。

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

來源

2014-01-20 23:09:46 Azrael

你的問題沒有說使用'+ ='和'.innerHTML'，所以我不確定你的答案爲什麼要處理這種情況。這幾乎就像你沒有讀過你自己的問題。 –

我編輯了這個問題，目前我的答案是一樣的。 – Azrael

.insertAdjacentHTML與替代品的優點？

回答

相關問題