javascript - Browser freezes while appending data to DOM -

here's scenario. i've built grid min. 1 max. 132 columns more 10k rows. using knockout data binding. data fetched $.ajax function of jquery. on first call fetches 100 rows , 100 rows on each scroll. if less 100 returns rows.

the browser not freeze when ajax call made browser freezes after ajax call. once we've data @ client side, binds table. browser freezes second or 2 while appending rows data table.

    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) {     } 

even tried put self.loaddetaildata(data) in web worker still browser freezes.

update: there way load next 100 rows in background , append without freezing browser on scroll ???

update-2

please find below <tbody> structure:

 <tbody data-bind="foreach: datalist">     <tr data-bind="foreach: rowvalues()">         <td data-bind="style :{ width :colwidth + 'em' , 'min-width' :colwidth + 'em' , 'max-width' :colwidth + 'em'  }">             <!-- ko if: displayflag == true -->                 <!-- ko if: flagdata  == false -->                         rendering div                 <!-- /ko -->                 <!-- ko if: flagdata  == true -->                         rendering div                 <!-- /ko -->             <!-- /ko -->             <!-- ko if: displayflag == false -->                         rendering div             <!-- /ko -->                     </td>                 </tr>             </tbody> 

how prevent browser freezing in such case ???

i using chrome version 38.0.2125.111 m , have resolve issue chrome view displayed in awsomium control.