title: Why is calling .empty() before .html() faster?
body: <p>I'm populating a table with an ajax call. I'm able to reload the table contents by making another ajax call. The initial request takes 50ms, but any subsequent requests take 2 seconds to update the table. The only difference is that the table is empty for the initial call.   </p>
  
  <p>This is a table with many rows and nested tables. The table container starts off with the css display property set to 'none' and tbody empty.</p>
  
  <pre><code>&lt;div class="table-container"&gt;
      &lt;table&gt;
          &lt;tbody&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The table tbody is empty before the first call. I started with this, but subsequent calls take around 2 seconds to load. </p>
  
  <pre><code>function LoadData(dataFromAjax) {
      $('.table-container tbody').html(dataFromAjax);
      $('.table-wrapper').css('display','inline-block');
  }
  </code></pre>
  
  <p>Calling .empty() beforehand solves the issue (loads in 50-100ms), but I'm not sure why it's necessary. </p>
  
  <pre><code>function LoadData(dataFromAjax) {
      $('.table-container tbody').empty();
      $('.table-container tbody').html(dataFromAjax);
      $('.table-wrapper').css('display','inline-block');
  }
  </code></pre>
  
  <p>I thought I ready that jQuery empties the children of the target element first when .html() is used. Am I missing something?</p>