javascript - Slow response when the HTML table is big

Question

I am using JavaScript to generate a HTML table of 4 columns, but when the table became very large (e.g. more than 1000 rows), the user could face lag between their interaction (e.g. hovering on a row, scrolling, or clicking something) and the response of the webpage.

This is the demo to show my issue, please run it on fullscreen, you can notice (or not noticing it if your computer is fast enough...) a small lag of hover effect when you move your mouse quickly between rows:

/**
 * @namespace Start the project called 'stck'
 */
var stck = {};

/**
 * Variable to save stock loaded
 */
stck.stockInfo = [];

/**
 * Load the item informaction acording the SKU
 * @private
 * @param {string} SKU The SKU of the item
 */
stck.loadItemInformation = function(SKU) {
  var descriptionsTable = document.getElementById('descriptionsTable');
  for (var rowsLength = descriptionsTable.rows.length - 1; --rowsLength; ) {
    descriptionsTable.deleteRow(1);
  }
  var pricesTable = document.getElementById('pricesTable');
  for (var rowsLength = pricesTable.rows.length - 1; --rowsLength; ) {
    pricesTable.deleteRow(1);
  }
  document.getElementById('tableHeader').style.cssText = '';
  document.getElementById('tableContent').style.cssText = '';

  // Load data with AJAX and process here
  document.getElementById('addItemButton').className = 'hidden';
  document.getElementById('saveButton').className = document.getElementById('cancelButton').className = '';
  document.getElementById('tables').className = 'hidden';
  document.getElementById('editItem').className = 'active';
};

/**
 * Show row to the 'tableContent' table.
 * @public
 * @param {number} showQuantity The quantity that will be loaded
 * @param {boolean} isLoadNewStock Define if the quantity that are going to be show are lower than stock, will load new stock information or not
 */
stck.showRow = function(showQuantity, isLoadNewStock) {
  var stock = stck.stockInfo;
  var tableContent = document.getElementById('tableContent');
  var tableContentRowsLength = tableContent.rows.length;
  var stockInfoLength = stck.stockInfo.length;
  var toIndex = tableContentRowsLength + showQuantity;
  if (toIndex > stockInfoLength) {
    if (isLoadNewStock && stck.loadStock(10, true, false)) {
      return;
    } else {
      toIndex = stockInfoLength;
    }
  }
  for (var i = tableContentRowsLength, row, rowNumber, cellIndex, SKUCell, descriptionCell, stockCell, clickHandler; i < toIndex; ++i) {
    row = tableContent.insertRow(i);
    rowNumber = document.createElement('TH');
    rowNumber.innerText = i + 1;
    row.appendChild(rowNumber);
    cellIndex = 0;
    SKUCell = row.insertCell(++cellIndex);
    SKUCell.innerHTML = stock[i][0];
    descriptionCell = row.insertCell(++cellIndex);
    descriptionCell.innerHTML = stock[i][1];
    stockCell = row.insertCell(++cellIndex);
    stockCell.className = 'stock';
    stockCell.innerHTML = stock[i][2];
    clickHandler = function(row) {
      return function() {
        stck.loadItemInformation(stock[row][0]);
      };
    };
    row.onclick = clickHandler(i);
  }
};

/**
 * This code is for test
 */
for (var i = 0; i < 10000; ++i) {
  stck.stockInfo.push(['TESTSKU', 'A test item', i]);
}
stck.showRow(10000, false)

html{height:100%;background-color:#FFF;background:-webkit-gradient(linear,left top,left bottom,from(#EEE),to(#FFF));background:-webkit-radial-gradient(#FFF,#FFF 35%,#EEE);background:-moz-radial-gradient(#FFF,#FFF 35%,#EEE);background:radial-gradient(#FFF,#FFF 35%,#EEE);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;cursor:default}
::-moz-selection,::selection{background:transparent}
::-moz-focus-inner{border:none}
body{margin:0;background-color:transparent;overflow:hidden}
body,th,td,input,textarea{color:#333;font:13px/1.2 Arial,Helvetica,sans-serif;-webkit-border-radius:0;text-rendering:optimizelegibility}
a{outline:none}
img{border:none;behavior:url(/i/iepngfix.htc)}
table{border-spacing:0;border-collapse:collapse}
article,aside,hgroup,footer,header,nav,section{display:block}

input,select{margin:2px 0;padding:3px;-webkit-border-radius:0;-webkit-box-shadow:none;-webkit-appearance:none;border:1px solid #B8ADA5;overflow:visible}
input[type="number"]::-webkit-outer-spin-button{display:none}
input:hover,select:hover{border-color:#4A0}
input:focus,select:focus{border-color:#4A0;-webkit-box-shadow:0 0 3px #4A0;-moz-box-shadow:0 0 3px #4A0;box-shadow:0 0 3px #4A0;outline:none}
input::-moz-focus-inner{border:0;padding:0}
.b{clear:both;margin-top:10px;padding:0 4px;border-top:1px dashed #CCC;text-align:right}
.b input{width:auto;min-width:54px;height:29px;margin:6px 0 6px 6px;padding:0 8px;border:1px solid #3079ED;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:#4D90FE;background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));background-image:-moz-linear-gradient(top,#4D90FE,#4787ED);background-image:-o-linear-gradient(top,#4D90FE,#4787ED);background-image:linear-gradient(top,#4D90FE,#4787ED);color:#FFF;font-weight:700;text-decoration:none;line-height:27px;-webkit-transition:0.1s ease-in-out;-moz-transition:0.1s ease-in-out;-o-transition:0.1s ease-in-out;transition:0.1s ease-in-out;text-align:center;cursor:pointer}
.b input:hover{background-color:#357AE8;background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));background-image:-moz-linear-gradient(top,#4D90FE,#357AE8);background-image:-o-linear-gradient(top,#4D90FE,#357AE8);background-image:linear-gradient(top,#4D90FE,#357AE8)}
.b input:active,.b input:focus{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none}
input:disabled,textarea:disabled{color:#999;cursor:not-allowed}
textarea:disabled::-webkit-input-placeholder{color:#F9F9F9}
.b input:disabled{color:#EEE;cursor:not-allowed}
.b input:disabled:hover{background-color:#4D90FE;background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));background-image:-moz-linear-gradient(top,#4D90FE,#4787ED);background-image:-o-linear-gradient(top,#4D90FE,#4787ED);background-image:linear-gradient(top,#4D90FE,#4787ED);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}

#gpanel{position:fixed;top:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:43px;padding:0 5px;-moz-border-radius:0 1px;border-bottom:1px solid #000;background-color:rgba(0,0,0,.85);line-height:46px;-webkit-transition:.1s ease-in-out;-moz-transition:.1s ease-in-out;-o-transition:0.1s ease-in-out;transition:.1s ease-in-out;overflow:hidden;z-index:10}
#gpanel.hidden{top:-44px}
#gpanel ul{list-style:none;margin:0;padding:0}
#gpanel li{float:left;overflow:hidden}
#gpanel a{display:block;padding:0 10px;color:#DDD;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-transition:.1s ease-in-out;-moz-transition:.1s ease-in-out;-o-transition:0.1s ease-in-out;transition:.1s ease-in-out}
#gpanel a:hover{background-color:rgba(204,204,204,.4);color:#FFF}
@-webkit-keyframes loading {
  0% {background-color:rgba(204,204,204,.4)}
  50% {background-color:rgba(119,187,68,.9)}
  100% {background-color:rgba(204,204,204,.4)}
}
@-moz-keyframes loading {
  0% {background-color:rgba(204,204,204,.4)}
  50% {background-color:rgba(119,187,68,.9)}
  100% {background-color:rgba(204,204,204,.4)}
}
#gpanel a:active,#gpanel a:focus{background-color:rgba(119,187,68,.9);-webkit-animation:loading .5s infinite linear;-moz-animation:loading .5s infinite linear}
#gnav{float:left;overflow:hidden}
#gmanager{float:right;margin-right:4px}

#body{margin-top:44px;overflow:auto}

#overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(127,127,127,0.5);background:-webkit-radial-gradient(rgba(127,127,127,.5),rgba(127,127,127,.5) 35%,rgba(0,0,0,.7));background:-moz-radial-gradient(rgba(127,127,127,.5),rgba(127,127,127,.5) 35%,rgba(0,0,0,.7));-webkit-transition:opacity .25s linear;-moz-transition:opacity .25s linear;transition:opacity .25s linear;opacity:1;overflow-y:auto;z-index:15}
#overlay.hidden{opacity:0;visibility:hidden}
#overlay .hidden{display:none}
#overlay form{position:absolute;top:50%;left:50%;border:1px solid #BCC1D0;-webkit-border-radius:2px;-moz-border-radius:2px;-webkit-box-shadow:0px 5px 80px #505050;-moz-box-shadow:0px 5px 80px #505050;background:#FFF url(../image/lightbox.png) bottom repeat-x;text-align:left}.window p{margin:5px 0}.window label{display:block;text-transform:uppercase;font:700 10px Tahoma,Geneva,sans-serif;zoom:1}.window input[type="text"],.window input[type="number"],.window input[type="password"],.window textarea{padding:2px;border:1px solid;border-color:#999 #333 #333 #999;background:#FFF}.window table{margin:0;border-spacing:0;border-collapse:collapse}.window th,.window td{border:none;border-bottom:1px solid #CCC;background:none}.window select{width:65px}#code,#desc,#desc_cn,#password,#largedescription{width:350px}#price{width:100px}.window input[type="submit"]{padding:5px 10px;border:1px solid;border-color:#FC0 #F60 #F60 #FC0;background:#F90}.window input[type="reset"]{padding:5px 10px;border:1px solid;border-color:#EEE #333 #333 #EEE;background:#CCC}
#overlay h1,#body h1{margin:0;padding:10px 20px 5px;border-bottom:1px solid #CCC;color:#848589;font:400 30px 'Segoe UI',Arial,Helvetica,sans-serif}
#overlay h1{font-size:24px}
#overlay .contentArea{padding:10px 15px 5px}
#overlay label{font-weight:700}
form#addItemPage{width:500px;margin:-126px 0 0 -251px}
#addItemPage .contentArea p{overflow:auto}
#addItemPage .contentArea label{display:block;width:470px;line-height:28px}
#addItemPage .contentArea input{float:right;width:330px;margin-right:3px}

#body h1{height:41px}
#stock a{color:#FFF;background-color:#7B4}
#functions{padding:13px 10px;float:right}
#functions ul{list-style:none;margin:0;padding:0}
#functions li{display:inline-block;min-width:54px;height:27px;margin-left:6px;padding:0 8px;border:1px solid #3079ED;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#4D90FE;background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));background-image:-moz-linear-gradient(top,#4D90FE,#4787ED);background-image:-o-linear-gradient(top,#4D90FE,#4787ED);background-image:linear-gradient(top,#4D90FE,#4787ED);color:#FFF;font-weight:700;text-decoration:none;line-height:27px;cursor:pointer}
#functions li:hover{background:#357AE8;background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));background-image:-moz-linear-gradient(top,#4D90FE,#357AE8);background-image:-o-linear-gradient(top,#4D90FE,#357AE8);background-image:linear-gradient(top,#4D90FE,#357AE8)}
#functions li:active,#functions li:focus{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none}
#functions li.hidden{display:none}

#tables{position:absolute;top:101px;bottom:0;width:100%;-webkit-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear;overflow-y:scroll}
#tables.hidden{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}
#tables:focus{outline:none}
::

Answer 1

The first thing that is slowing your loop down is .insertRow(). You're doing this at the top of your loop and then adding cells to it. After the row is added, and after each cell is added, the browser is doing layout calculations. Instead use .createElement() and then .appendChild() at the end of your loop.

Demo: http://jsfiddle.net/ThinkingStiff/gyaGk/

Replace:

row = tableContent.insertRow(i);

With:

row = document.createElement('tr');

And add this at the end of your loop:

tableContent.tBodies[0].appendChild(row);

That will solve your loading speed issue. As for the hover, you have way too many CSS rules affecting your tr and td elements using tag selectors. I removed a few, and used classes on a few, and the hover highlighting is much faster. Specifically, I noticed that overflow: hidden on the td elements slowed it down considerably. Consider combining some of your rules, using simpler selectors, and adding classes to elements for quicker CSS processing. During hover many things have to be recalculated by the the layout engine, and the fewer CSS rules the better. One example I saw in your code was #tables tbody tr when there was only one tbody in the table. #tables tr would have sufficed. Better than either of those is a class. I used .row in my demo.

Best practices from Google Page Speed:

• Avoid descendant selectors: table tbody tr td
• Avoid redundant ancestors: body section article (body never needed)
• Avoid universal (*) selectors: body *
• Avoid tag selectors as the key (right-most): ul li
• Avoid child or adjacent selectors: ul > li > a
• Avoid overly qualified selectors: form#UserLogin (# is already specific)
• Make your rules as specific as possible (class or id).