title: Browser freezes while appending data to DOM
body: <p>Here's the scenario. I've built a grid with min. 1 to max. 132 columns with more than 10k rows. I am using <code>knockout</code> for data binding. The data is fetched by <code>$.ajax</code> function of <code>jquery</code>. On first call it fetches 100 rows and 100 rows on each scroll. If less than 100 it returns all the rows. </p>
  
  <p>The browser does not freeze when <code>ajax</code> is call made but the browser freezes after <code>ajax</code> call. So once we've data at client side, it binds to the <code>table</code>. The browser freezes for a second or two while appending rows with data to the table. </p>
  
  <pre><code>    function demoData(args){
      var self = this;
      self.dataList = ko.observableArray();
      self.fillData = function () {
      self.tableListPager = new ScrollPagerForAccordian($("#tblGrid"), 40, self.fillDetailData);
      $.ajax({ //api call });
      self.loadDetailData(data);
      }
  
      self.fillDetailData = function (pageNo) {
      $.ajax({ //api call });
      }
  
  self.loadDetailData = function (res) {
  self.dataList.push();
  }
  
      function ScrollPagerForAccordian(el, recHeight, callback) {
      }
  </code></pre>
  
  <p>Even I tried to put <code>self.loadDetailData(data)</code> in web worker but still the browser freezes.</p>
  
  <p><strong>Update:</strong>
  Is there any way to load next 100 rows in background and append it without freezing a browser on a scroll ???</p>
  
  <p><strong>Update-2</strong></p>
  
  <p>Please find below <code>&lt;tbody&gt;</code> structure:</p>
  
  <pre><code> &lt;tbody data-bind="foreach: dataList"&gt;
      &lt;tr data-bind="foreach: rowValues()"&gt;
          &lt;td data-bind="style :{ width :colwidth + 'em' , 'min-width' :colwidth + 'em' , 'max-width' :colwidth + 'em'  }"&gt;
              &lt;!-- ko if: displayFlag == true --&gt;
                  &lt;!-- ko if: flagData  == false --&gt;
                          rendering div
                  &lt;!-- /ko --&gt;
                  &lt;!-- ko if: flagData  == true --&gt;
                          rendering another div
                  &lt;!-- /ko --&gt;
              &lt;!-- /ko --&gt;
              &lt;!-- ko if: displayFlag == false --&gt;
                          rendering another div
              &lt;!-- /ko --&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
  </code></pre>
  
  <p><strong>How do I prevent browser freezing in such a case ???</strong></p>
  
  <p>I am using <code>Chrome Version 38.0.2125.111 m</code> and have to resolve this issue for <code>chrome</code> only as the view will be displayed in <code>awsomium</code> control.</p>