createElement + appendChild vs innerHTML vs createDocumentFragment + createElement + appendChild vs createContextualFragment + appendChild vs DOMParser + adoptNode + appendChild vs insertAdja · jsPerf

createElement + appendChild vs innerHTML vs createDocumentFragment + createElement + appendChild vs createContextualFragment + appendChild vs DOMParser + adoptNode + appendChild vs insertAdja JavaScript performance comparison Test case created by syoichi on 2011-12-23 Preparation code <div id="test"></div> <script> Benchmark.prototype.setup = function() { var doc, test; doc = document; test = doc.

[actywave]

うわーw

[htsign]

innerHTMLが如何にゴミクズかが分かるグラフ。似たようなことしたいときはinsertAdjacentHTMLを使いましょうというお話。