title: javascript dom innerhtml scrollheight performance
body: <p>My question is two part:</p>
  
  <h2>Part1 of the question:</h2>
  
  <p>test a:</p>
  
  <pre><code>    t1 = new Date().getTime();
      for (i=0; i&lt;205; i++) {
          document.getElementById("divTest").innerHTML = sText;
  
      }           
      t2 = new Date().getTime();
      alert(t2-t1);
  </code></pre>
  
  <p>result: 16ms</p>
  
  <p>test b;</p>
  
  <pre><code>    document.getElementById("divTest").innerHTML = sText;
      t1 = new Date().getTime();
      for (i=0; i&lt;205; i++) {         
          if ( document.getElementById("divTest").scrollHeight &gt; document.getElementById("divTest").clientHeight ) {
              j++;
          }
      }           
      t2 = new Date().getTime();
      alert(t2-t1);
  </code></pre>
  
  <p>result: 2ms</p>
  
  <p>So theoretically if we put both inside the loop we should get around: 18 ms, but test c proves me wrong:</p>
  
  <p>test c:</p>
  
  <pre><code>    t1 = new Date().getTime();      
      for (i=0; i&lt;205; i++) {
          document.getElementById("divTest").innerHTML = sText;       
          if ( document.getElementById("divTest").scrollHeight &gt; document.getElementById("divTest").clientHeight ) {
              j++;
          }
      }           
      t2 = new Date().getTime();
      alert(t2-t1);
  </code></pre>
  
  <p>result : 240ms</p>
  
  <p>a staggering 240ms!!! The behaviour is consistent among browsers. Why does this happen ?</p>
  
  <h2>Part 2 of the question:</h2>
  
  <p>since </p>
  
  <pre><code>document.getElementById("divTest").innerHTML = sText;
  </code></pre>
  
  <p>is generally slow, i found here a faster way: <a href="http://blog.stevenlevithan.com/archives/faster-than-innerhtml" rel="nofollow">http://blog.stevenlevithan.com/archives/faster-than-innerhtml</a> and thus the final implementation ( test c ) becomes :</p>
  
  <pre><code>    t1 = new Date().getTime();      
      for (i=0; i&lt;205; i++) {
          el = document.getElementById("divTest").cloneNode(false);
          el.innerHTML = sText;
          document.getElementById("divTest").parentNode.replaceChild(el, document.getElementById("divTest"));
          if (el.scrollHeight &gt; el.clientHeight) {
              j++;
          }
      }           
      t2 = new Date().getTime();
      alert(t2-t1);
  </code></pre>
  
  <p>with a result of 105ms which is better than 240ms</p>
  
  <p>However I was wondering if through parentnode or some other way of dom manipulation i can get a faster way of accessing scrollheight and clientheight just like i replaced innerHTML with direct DOM manipulation ?</p>
  
  <p>Thanks in advance!</p>