title: Dynamic creation of large html table in javascript performance
body: <p>I have an application which is used for data analysis and I'm having a few performance issues with the creation of the table. The data is extracted from documents and it is important that all data is presented on one page (pagination is not an option unfortunately). </p>
  
  <p>Using jQuery, I make an ajax request to the server to retrieve the data. On completion of the request, I pass the data to an output function. The output function loops through the data array using a for loop and concatenating the rows to a variable. Once the looping is complete, the variable containing the table is then appended to an existing div on the page and then I go on to bind events to the table for working with the data. </p>
  
  <p>With a small set of data (~1000-2000 rows) it works relatively good but some of the data sets contain upwards of 10,000 rows which causes Firefox to either crash and close or become unresponsive. </p>
  
  <p>My question is, is there a better way to accomplish what I am doing?</p>
  
  <p>Here's some code:</p>
  
  <pre><code>//This function gets called by the interface with an id to retrieve a document
  function loadDocument(id){
      $.ajax({
          method: "get",
          url: "ajax.php",
          data: {action:'loadDocument',id: id},
          dataType: 'json',
          cache: true,
          beforeSend: function(){
              if($("#loading").dialog('isOpen') != true){
                  //Display the loading dialog
                  $("#loading").dialog({
                      modal: true
                  });
              }//end if
          },//end beforesend
          success: function(result){
              if(result.Error == undefined){
                  outputDocument(result, id);
              }else{
                  &lt;handle error code&gt;
              }//end if
              if($('#loading').dialog('isOpen') == true){
                  //Close the loading dialog
                  $("#loading").dialog('close');
              }//end if
          }//end success
      });//end ajax
  };//end loadDocument();
  
  
  //Output document to screen
  function outputDocument(data, doc_id){
  
      //Begin document output
      var rows = '&lt;table&gt;';
      rows += '&lt;thead&gt;';
      rows += '&lt;tr&gt;';
      rows += '&lt;th&gt;ID&lt;/th&gt;';
      rows += '&lt;th&gt;Status&lt;/th&gt;';
      rows += '&lt;th&gt;Name&lt;/th&gt;';
      rows += '&lt;th&gt;Actions&lt;/th&gt;';
      rows += '&lt;th&gt;Origin&lt;/th&gt;';
      rows += '&lt;/tr&gt;';
      rows += '&lt;/thead&gt;';
      rows += '&lt;tbody&gt;';
  
      for(var i in data){
          var recordId = data[i].id;
          rows += '&lt;tr id="' + recordId + '" class="' + data[i].status + '"&gt;';
          rows += '&lt;td width="1%" align="center"&gt;' + recordId + '&lt;/td&gt;';
          rows += '&lt;td width="1%" align="center"&gt;&lt;span class="status" rel="' + recordId + '"&gt;&lt;strong&gt;' + data[i].status + '&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;';
          rows += '&lt;td width="70%"&gt;&lt;span class="name"&gt;' + data[i].name + '&lt;/span&gt;&lt;/td&gt;';
          rows += '&lt;td width="2%"&gt;';
          rows += '&lt;input type="button" class="failOne" rev="' + recordId + '" value="F"&gt;';
          rows += '&lt;input type="button" class="promoteOne" rev="' + recordId + '" value="P"&gt;';
          rows += '&lt;/td&gt;';
          rows += '&lt;td width="1%"&gt;' + data[i].origin + '&lt;/td&gt;';
          rows += '&lt;/tr&gt;';
      }//end for
  
      rows += '&lt;/tbody&gt;';
      rows += '&lt;/table&gt;';
      $('#documentRows').html(rows);
  </code></pre>
  
  <p>I was initially using a jQuery each loop but switched to the for loop which shaved off some ms. </p>
  
  <p>I thought of using something like google gears to try offloading some of the processing (if that's possible in this scenario). </p>
  
  <p>Any thoughts?</p>