title: Creating html table with millions record using javascript blocking browser
body: <p><strong>Please read my question complete before answer or marking it duplicate because i am dealing with constraint in my problem.</strong></p>
  
  <p>Hi All Javascript rock stars,</p>
  
  <p>I am creating a html table with javascript. In table i need scroller both vertical and horizontal. I am done with this part. It is working. Now my problem starts. When i am creating millions rows for the table it block my browser. For few thousand record it work fine.</p>
  
  <p>I have done lot of google to improve performance but did not gain any significant performance improvement. Like some has suggested to use  row.appendChild(cell); I have also tried to use Workers. But then i found i can not have access of document object in Workers. setTimeout is also not sufficient to solve my problem. Here is my code for creating rows of table.</p>
  
  <pre><code>var arr = JSON.parse(rcvReq.responseText);
      var json = arr.abc;
      var columns = [];
      columns = Object.keys(json[0]);
       //Build an array containing Customer records.
      var customers = new Array();
      customers.push(columns);
      for (i = 0; i &lt; json.length; i++) { 
           var dataVal = [];
          for(j = 0; j &lt; columns.length; j++){
               var mytempvar = json[i]; 
              dataVal.push(mytempvar[columns[j]+'']);
          }
          customers.push(dataVal);
      }
      //Create a HTML Table element.
      var table = document.createElement("TABLE");
      var table1 = document.createElement("TABLE");
      table.border = "1";
      //Get the count of columns.
      var columnCount = customers[0].length;
      //Add the header row.
      var row = document.createElement('tr');
      row.className = 'fixed-header';
      for (var i = 0; i &lt; columnCount; i++) {
          var headerCell = document.createElement("TH");
          headerCell.innerHTML = customers[0][i];
          row.appendChild(headerCell);
      }
      table1.appendChild(row);
      //Add the data rows.
       var documentFragment = document.createDocumentFragment();
      for (var i = 1; i &lt; customers.length; i++) {
          row = document.createElement('tr');
          for (var j = 0; j &lt; columnCount; j++) {
              var cellVal = customers[i][j];
                  var cell = document.createElement("TD");
                  cell.innerHTML = cellVal;
                  row.appendChild(cell);
          }
          setTimeout(function(){ }, 1000);
          documentFragment.appendChild(row);
      }
       /* Event of button  */
      var siblings = e.parentNode.children;
      var childOf1stShibling = siblings[0];
      table.appendChild(documentFragment);
      var div = document.createElement("DIV");
      var dvTable = document.getElementById(siblings[1].id +'');
      var dvTable1 = document.getElementById(childOf1stShibling.children[0].id + '');
      dvTable.innerHTML = "";
      dvTable1.innerHTML = "";
      dvTable.appendChild(table);
      dvTable1.appendChild(table1);
  </code></pre>
  
  <p><strong>Constraint</strong></p>
  
  <ol>
  <li>No use of jquery. Only i can use javascript, css and html.</li>
  <li>No use of third party plugin.</li>
  <li>I can not use pagination.</li>
  <li>Records are in millions not in thousand.</li>
  </ol>
  
  <p>Please suggest any workaround keeping above constraint in mind.
   Thanks so much in advance.</p>