title: But why's the browser DOM still so slow after 10 years of effort?
body: <p>The web browser DOM has been around since the late '90s, but it remains one of the largest constraints in performance/speed. </p>
  
  <p>We have some of the world's most brilliant minds from Google, Mozilla, Microsoft, Opera, W3C, and various other organizations working on web technologies for all of us, so obviously this isn't a simple "Oh, we didn't optimize it" issue.</p>
  
  <p><strong>My question is</strong> if i were to work on the the part of a web browser that deals specifically with this, why would I have such a hard time making it run faster?</p>
  
  <p><strong>My question is not</strong> asking <em><a href="http://www.merriam-webster.com/dictionary/what" rel="noreferrer">what</a></em> makes it slow, it's asking <strong><a href="http://www.merriam-webster.com/dictionary/why?show=0&amp;t=1311602447" rel="noreferrer">why</a></strong> hasn't it become faster?</p>
  
  <p>This seems to be against the grain of what's going on elsewhere, such as JS engines with performance near that of C++ code.</p>
  
  <p>Example of quick script:</p>
  
  <pre><code>for (var i=0;i&lt;=10000;i++){
      someString = "foo";
  }
  </code></pre>
  
  <p>Example of slow because of DOM:</p>
  
  <pre><code>for (var i=0;i&lt;=10000;i++){
      element.innerHTML = "foo";
  }
  </code></pre>
  
  <hr>
  
  <p>Some details as per request:</p>
  
  <p>After bench marking, it looks like it's not an unsolvable slow issue, but often the wrong tool is used, and the tool used depends on what you're doing cross-browser.</p>
  
  <p>It looks like the DOM efficiency varies greatly between browsers, but my original presumption that the dom is slow and unsolvable seems to be wrong.</p>
  
  <p>I ran tests against Chrome, FF4, and IE 5-9, you can see the operations per second in this chart:</p>
  
  <p><img src="https://i.stack.imgur.com/OjUXN.jpg" alt="enter image description here"></p>
  
  <p>Chrome is lightning fast when you use the DOM API, but vastly slower using the .innerHTML operator (by a magnitude 1000-fold slower), however, FF is worse than Chrome in some areas (for instance, the append test is much slower than Chrome), but the InnerHTML test runs much faster than chrome.</p>
  
  <p>IE seems to actually be getting worse at using DOM append and better at innerHTML as you progress through versions since 5.5 (ie, 73ops/sec in IE8 now at 51 ops/sec in IE9).</p>
  
  <p>I have the test page over here:</p>
  
  <p><a href="http://jsperf.com/browser-dom-speed-tests2" rel="noreferrer">http://jsperf.com/browser-dom-speed-tests2</a></p>
  
  <p>What's interesting is that it seems different browsers seem to all be having different challenges when generating the DOM. Why is there such disparity here?</p>