title: IE DOM manipulation performance
body: <p>I encountered severe performance issue when my JS code runs under IE (10, 11). It is 10 times slower when compared to another browsers. </p>
  
  <p>I did some profiling and it seems that <code>innerHTML</code> and <code>createElement</code> is super slow.</p>
  
  <p>I tried to optimize using <code>createDocumentFragment</code>, which even speed up my code in other browsers, but performance under IE remains intact.</p>
  
  <p>Here's the code </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
      &lt;script&gt;
          function a() { 
              var CNT = 100000;
              var start, end, time;
              start = window.performance.now();
              var frag = document.createDocumentFragment();
              for (var i = 0, l = CNT; i &lt; l; ++i) {
                  var el = document.createElement('div');
                  el.innerHTML = i;
                  frag.appendChild(el);
              }
              document.body.appendChild(frag);
              end = window.performance.now();
              time = end - start;
              console.log('time', time);
          }
          a();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried to optimize using string concatenation to avoid costly DOM operations, which made it much more faster, but still very slow when comparing to other browsers.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
      &lt;script&gt;
          function a() {
              var CNT = 100000;
              var start, end, time;
              start = window.performance.now();
              var frag = document.createDocumentFragment();
              var content = '';
              for (var i = 0, l = CNT; i &lt; l; ++i) {
                  content += '&lt;div&gt;' + i + '&lt;/div&gt;';
              }
              var holder = document.createElement('div');
              holder.innerHTML = content;
              frag.appendChild(holder);
              document.body.appendChild(frag);
              end = window.performance.now();
              time = end - start;
              console.log('time', time);
          } 
          a();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there any way to make dynamic DOM fast in IE? I need to generate quite large DOM trees using Javascript with some templating and IE performance is just a killer in this case.</p>
  
  <p>Any help?</p>