About a month ago，Firefox 8實現了insertAdjacentHTML方法，該方法與innerHTML一起添加到IE4中。根據this基準，insertAdjacentHTML通常爲，其數量級比innerHTML快。insertAdjacentHTML如何比innerHTML快得多？
我假設兩者都調用相同的HTML解析器，那麼爲什麼差別很大？ insertAdjacentHTML是一個簡單的方法調用，而innerHTML是一個getter/setter，可能會有一些開銷，但我永遠不會想象那麼多。
work.innerHTML += "<span>test</span>";相當於work.innerHTML = work.innerHTML + "<span>test</span>";，即每次運行時，它必須將work的所有現有內容序列化，然後重新分析整個批次以及額外的跨度。
work.insertAdjacentHTML("BeforeEnd", "<span>test</span>");只是每次解析一個跨度，然後將小文檔片段附加到DOM。
我希望一個好的瀏覽器會優化'work.innerHTML + =「測試」'簡單地附加到'innerHTML'，就像現代瀏覽器優化字符串連接。儘管我可能是錯的，但如果瀏覽器供應商沒有想到這一點，那將是令人驚訝的。 –
這並不容易。序列化/解析循環具有許多副作用，例如重置某些節點屬性並刪除動態附加的事件處理程序。優化將需要那些被準確複製。瀏覽器製造商有更好的事情要做。 'Element.innerHTML + = ...'是一種在JS代碼中很容易避免的反模式。只是不要這樣做。 – Alohci
+1有意義。我不同意'e.innerHTML + = ...'雖然是一個反模式。有一些涉及Ajax的有效用途，我不明白爲什麼它在其他地方是有害的（除了緩慢）。 –
innerHTML setter將不得不刪除所有現有的子節點，然後再添加新節點。
不知道這是否是唯一的原因，但這當然是一個因素。
請注意，使用'appendChild'比兩者快得多。可能因爲不需要解析器。 與「appendChild」相比，'insertAdjacentHTML'和'innerHTML'之間的區別似乎不顯着。但是，如果你確實需要解析html字符串，'appendChild'不會有太大的幫助。這裏有一個詳細的JSperf：http://jsperf.com/insertadjacenthtml-perf/28 – oriadam