document.write VS. document.createElement

Benchmark created by Addy Osmani on

Description

A performance comparison of document.write VS document.createElement

Preparation HTML

<script>
  function writeTest() {
   var newHTML = "<div><h1>Hi there!</h1></div>";
   document.write(newHTML);
   document.close();
  };
  
  function elemTest() {
   var newDiv = document.createElement("div");
   newDiv.innerHTML = "<h1>Hi there!</h1>";
   document.body.appendChild(newDiv);
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
document.write
writeTest();
ready
document.createElement
elemTest();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.