Javascript HTML表格大时响应慢

Slow response when the HTML table is big

提问by Fong-Wan Chau

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.

我正在使用 JavaScript 生成一个 4 列的 HTML 表格，但是当表格变得非常大（例如超过 1000 行）时，用户可能会面临交互之间的延迟（例如悬停在一行上、滚动或单击某物）和网页的响应。

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}
::-moz-focus-inner{border:none}
#tables table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
#tableHeader{top:101px}
.indexCol{width:50px}
.SKUCol{width:115px}
.brandCol{width:105px}
.stockCol{width:85px}
tr#noItem{text-align:center;cursor:default}
tr#noItem:hover{background:#FFF}
.stock{text-align:right}
#tables th,#tables td{padding:9px 6px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#tables thead th{border-bottom:1px solid #CCC;background-color:#F5F5F5;background-image:-webkit-gradient(linear,left top,left bottom,from(#F5F5F5),to(#F1F1F1));background-image:-moz-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-o-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:linear-gradient(top,#F5F5F5,#F1F1F1);font-weight:700;cursor:default}
#tables tbody th{font-weight:700;text-overflow:none}
#tables tbody tr{background:#FFF;cursor:pointer}
#tables tbody tr:nth-child(even){background:#F8F9FC}
#tables tbody tr:hover{background:#CDE}

#editItem{position:fixed;top:101px;bottom:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 20px;visibility:hidden;opacity:0;-webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);transform:scale(2);-webkit-transition:.3s linear;-moz-transition:.3s linear;-o-transition:.3s linear;transition:.3s linear}
#editItem.active{visibility:visible;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
#editItem header{height:51px;overflow:auto}
#editItem h2{float:left;margin:0 20px 0 0;padding:10px 0;color:#7B4;font:400 20px 'Seoge UI',Arial,Helvetica,sans-serif}
#editItem ul{list-style:none;margin:10px 0;padding:0;border-bottom:1px solid #7B4}
#editItem li{display:inline-block;margin:0 5px;padding:8px 10px 7px;color:#7B4;cursor:pointer;text-transform:uppercase;-webkit-transition:.15s linear;-moz-transition:.15s linear;transition:.15s linear}
#editItem li:hover{background:rgba(204,204,204,.4);color:#000}
#editItem li.active{background-color:#7B4;color:#FFF;font-weight:700;cursor:default}
#editItem .container{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;overflow:hidden}
#editItem .tabs{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
#editItem section{width:100%;height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow-y:auto}
#editItem section div{float:left;width:50%;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#editItem label{float:left;width:20%;min-width:50px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#editItem table{width:100%;table-layout:fixed}
#descriptionsTable{margin-top:5px;border-top:1px solid #DDD}
#editItem th{font-weight:700;text-align:left}
#editItem th, #editItem td{padding:5px 2px}
#editItem img{display:block;margin:0 auto;opacity:.5;cursor:pointer}
#editItem tr:hover img{opacity:1}
#inputsTable .labelCol{width:100px}
#inputsTable label{float:none;display:block;width:100%;height:100%}
#editItem input, #editItem select{width:100%;height:26px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#editItem .languageCol{width:190px}
#editItem .deleteCol{width:25px}
#editItem #statusInput{width:auto;height:auto;margin:4px 4px 4px 0;-webkit-appearance:checkbox}
#editItem label[for="statusInput"]{display:inline;width:auto;height:auto}
#editItem textarea{box-sizing:border-box;width:100%}
#newDescriptionRow select{visibility:hidden}

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" media="screen" href="/s/master.css">
<link rel="stylesheet" media="screen" href="/s/stock.css">
<title>Existencia | HDX</title>
<body>
<header id="gheader"><nav id="gpanel"><ul id="gnav"><li id="stock"><a href="/76091132/existencia/">Existencia</a></ul><ul id="gmanager">
<li id="user"><a href="/76091132/">Tester</a>
<li id="exit"><a href="/76091132/salir">Salir</a>
</ul>
</nav>
</header><div id="overlay" class="hidden">
<form id="addItemPage" class="hidden">
<h1>Agregar un artículo</h1>
<div class="contentArea">
<p><label>SKU<input type="text" id="newSKUInput" maxlength="20" autocomplete="off"></label>
<p><label>Descripción<input type="text" id="newDescriptionInput" maxlength="100" autocomplete="off"></label>
<p><label>Precio unitario<input type="number" id="newUnitPriceInput" min="1" value="1" autocomplete="off"></label>
</div>
<div class="b">
<input type="submit" value="Agregar"><input type="reset" value="Cancelar">
</div>
</form>
</div>
<div id="body"><header>
<div id="functions">
<ul>
<li id="addItemButton">Agregar un artículo
<li id="cancelButton" class="hidden">Cancelar
<li id="saveButton" class="hidden">Guardar
</ul>
</div>
<h1 class="fn">Existencia</h1>
</header>
<div id="tables" tabindex="0">
<table id="tableHeader">
<colgroup>
<col class="indexCol">
<col class="SKUCol">
<col>
<col class="stockCol">
</colgroup>
<thead>
<tr><th>#<th>SKU<th>Descripción<th>Existencia
</thead>
</table>
<table id="tableContent">
<colgroup>
<col class="indexCol">
<col class="SKUCol">
<col>
<col class="stockCol">
</colgroup>
<tbody></tbody>
</table>
</div>
</div>

<div id="editItem">
<header>
<h2>Editar artículo</h2>
<nav>
<ul id="tabsLabels">
<li id="generalTabButton" class="active">General
<li id="stockTabButton">Existencia
<li id="facturationTabButton">Facturación
<li id="optionsTabButton">Opciones
</ul>
</nav>
</header>
<div id="tabsContainer" class="container">
<div id="tabsContents" class="tabs">
<section id="generalTab">
<div>
<table id="inputsTable">
<colgroup>
<col class="labelCol">
</colgroup>
<tr><th><label for="SKUInput">SKU</label><td><input type="text" id="SKUInput" autocomplete="off">
</table>
<table id="descriptionsTable">
<colgroup><col><col class="languageCol"><col class="deleteCol"></colgroup>
<tr><th>Descripción<th>Idioma<th>
<tr id="newDescriptionRow"><td><input type="text" id="descriptionInput" placeholder="Escriba aquí para una descripción nueva en otro idioma" autocomplete="off"><td><select id="languageSelect"><option value="aa">afar<option value="ab">abjaso<option value="ae">avéstico<option value="af">afrikaans<option value="ak">akano<option value="am">amárico<option value="an">aragonés<option value="ar">árabe<option value="as">asamés<option value="av">avar<option value="ay">aimara<option value="az">azerí<option value="ba">baskir<option value="be">bielorruso<option value="bg">búlgaro<option value="bh">bhojpurí<option value="bi">bislama<option value="bm">bambara<option value="bn">bengalí<option value="bo">tibetano<option value="br">bretón<option value="bs">bosnio<option value="ca">catalán<option value="ce">checheno<option value="ch">chamorro<option value="cn">chino<option value="co">corso<option value="cr">cree<option value="cs">checo<option value="cu">eslavo eclesiástico antiguo<option value="cv">chuvasio<option value="cy">galés<option value="da">danés<option value="de">alemán<option value="dv">maldivo<option value="dz">dzongkha<option value="ee">ewe<option value="el">griego<option value="en">inglés<option value="eo">esperanto<option value="es">espa?ol<option value="et">estonio<option value="eu">euskera<option value="fa">persa<option value="ff">fula<option value="fi">finés<option value="fj">fiyiano<option value="fo">feroés<option value="fr">francés<option value="fy">frisón<option value="ga">irlandés<option value="gd">gaélico escocés<option value="gl">gallego<option value="gn">guaraní<option value="gu">guyaratí<option value="gv">manés<option value="ha">hausa<option value="he">hebreo<option value="hi">hindi<option value="ho">hiri motu<option value="hr">croata<option value="ht">haitiano<option value="hu">húngaro<option value="hy">armenio<option value="hz">herero<option value="ia">interlingua<option value="id">indonesio<option value="ie">occidental<option value="ig">igbo<option value="ii">yi de Sichuán<option value="ik">inupiaq<option value="io">ido<option value="is">islandés<option value="it">italiano<option value="iu">inuktitut<option value="ja">japonés<option value="jv">javanés<option value="ka">georgiano<option value="kg">kongo<option value="ki">kikuyu<option value="kj">kuanyama<option value="kk">kazajo<option value="kl">groenlandés<option value="km">camboyano<option value="kn">canarés<option value="ko">coreano<option value="kr">kanuri<option value="ks">cachemiro<option value="ku">kurdo<option value="kv">komi<option value="kw">córnico<option value="ky">kirguís<option value="la">latín<option value="lb">luxemburgués<option value="lg">luganda<option value="li">limburgués<option value="ln">lingala<option value="lo">lao<option value="lt">lituano<option value="lu">luba-katanga<option value="lv">letón<option value="mg">malgache<option value="mh">marshalés<option value="mi">maorí<option value="mk">macedonio<option value="ml">malayalam<option value="mn">mongol<option value="mr">maratí<option value="ms">malayo<option value="mt">maltés<option value="my">birmano<option value="na">nauruano<option value="nb">noruego bokm?l<option value="nd">ndebele del norte<option value="ne">nepalí<option value="ng">ndonga<option value="nl">neerlandés<option value="nn">nynorsk<option value="no">noruego<option value="nr">ndebele del sur<option value="nv">navajo<option value="ny">chichewa<option value="oc">occitano<option value="oj">ojibwa<option value="om">oromo<option value="or">oriya<option value="os">osético<option value="pa">panyabí<option value="pi">pali<option value="pl">polaco<option value="ps">pastú<option value="pt">portugués<option value="qu">quechua<option value="rm">retorrománico<option value="rn">kirundi<option value="ro">rumano<option value="ru">ruso<option value="rw">ruandés<option value="sa">sánscrito<option value="sc">sardo<option value="sd">sindhi<option value="se">sami septentrional<option value="sg">sango<option value="sh">serbocroata<option value="si">cingalés<option value="sk">eslovaco<option value="sl">esloveno<option value="sm">samoano<option value="sn">shona<option value="so">somalí<option value="sq">albanés<option value="sr">serbio<option value="ss">suazi<option value="st">sesotho<option value="su">sundanés<option value="sv">sueco<option value="sw">suajili<option value="ta">tamil<option value="te">telugú<option value="tg">tayiko<option value="th">tailandés<option value="ti">tigri?a<option value="tk">turcomano<option value="tl">tagalo<option value="tn">setsuana<option value="to">tongano<option value="tr">turco<option value="ts">tsonga<option value="tt">tártaro<option value="tw">twi<option value="ty">tahitiano<option value="ug">uigur<option value="uk">ucraniano<option value="ur">urdu<option value="uz">uzbeko<option value="ve">venda<option value="vi">vietnamita<option value="vo">volapük<option value="wa">valón<option value="wl">walisiano<option value="wo">wolof<option value="xh">xhosa<option value="yi">yídish<option value="yo">yoruba<option value="za">chuan<option value="zh">chino<option value="zu">zulú</select><td>
</table>
</div>
<div>
<table id="inputsTable">
<colgroup>
<col class="labelCol">
</colgroup>
<tr><th>Estado<td><input type="checkbox" id="statusInput" value="1"><label for="statusInput">Activo</label>
<!--<tr><th><label for="departmentSelect">Departamento</label><td><select></select>
<tr><th><label for="categorySelect">Categoría</label><td><select></select>
<tr><th><label for="noteTextArea">Notas</label><td><textarea></textarea>-->
</table>
</div>
</section>
<section id="stockTab">
<div>
<table id="stadisticTable">
<tr><th>Inventario<td>0
<tr><th>Cantidad vendido<td>0
<tr><th>última fecha de modificación<td>
</table>
</div>
</section>
<section id="facturationTab">
<div>
<table id="pricesTable">
<colgroup><col><col><col><col><col class="deleteCol"></colgroup>
<tr><th>Código<th>Unidad<th>Cantidad equivalente<th>Precio<th>
<tr id="newPriceRow"><td><input type="text" id="codeInput" autocomplete="off"><td><input type="text" id="unitInput" autocomplete="off"><td><input type="text" id="quantityInput" autocomplete="off"><td><input type="text" id="priceInput" autocomplete="off"><td>
</table>
</div>
</section>
<section id="optionsTab">
<p>Imprimir precio
</section>
</div></div>

Is there any solution to this problem?

这个问题有什么解决办法吗？

采纳答案by ThinkingStiff

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.

减慢循环速度的第一件事是.insertRow(). 您在循环的顶部执行此操作，然后向其中添加单元格。添加行后，添加每个单元格后，浏览器正在进行布局计算。而是在循环结束时使用.createElement()and then .appendChild()。

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

演示：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 trand tdelements 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: hiddenon the tdelements 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 trwhen there was only one tbodyin the table. #tables trwould have sufficed. Better than either of those is a class. I used .rowin my demo.

这将解决您的加载速度问题。至于悬停，你影响你太多的CSS规则tr和td使用标签选择元素。我删除了一些，并在一些上使用了类，悬停突出显示要快得多。具体来说，我注意到overflow: hidden在td元素上大大减慢了速度。考虑组合一些规则，使用更简单的选择器，并为元素添加类以加快 CSS 处理。在悬停期间，布局引擎必须重新计算很多事情，CSS 规则越少越好。我在你的代码中看到的一个例子#tables tbody tr是tbody表中只有一个。#tables tr就足够了。比这两个更好的是一个类。我.row在我的演示中使用过。

Best practices from Google Page Speed:

来自Google Page Speed 的最佳实践：

• Avoid descendant selectors: table tbody tr td
• Avoid redundant ancestors: body section article(bodynever 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).

• 避免后代选择器： table tbody tr td
• 避免重复祖先：body section article（body不需要的）
• 避免通用 (*) 选择器： body *
• 避免标签选择器作为键（最右边）： ul li
• 避免子选择器或相邻选择器： ul > li > a
• 避免过于合格的选择：form#UserLogin（#已经是特定的）
• 使您的规则尽可能具体（类或 ID）。

回答by Javier Guerrero

Also, as in any HTML element in chrome, adding "transform: rotateX(0deg);" to the table element forces hardware acceleration to kick in, speeding up scrolling significantly (if that's the issue).

此外，就像在 chrome 中的任何 HTML 元素中一样，添加“transform:rotateX(0deg);” 到 table 元素强制硬件加速启动，显着加快滚动速度（如果这是问题所在）。

回答by Fabrizio Calderan

if your table has regular columns (without colspan and/or rowspan) you can improve a bit the rendering time applying the table-layout:fixedproperty:

如果您的表具有常规列（没有 colspan 和/或 rowspan），您可以稍微改进应用该table-layout:fixed属性的渲染时间：

MDN: https://developer.mozilla.org/en/CSS/table-layout

MDN：https: //developer.mozilla.org/en/CSS/table-layout

Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided.

在“固定”布局方法下，一旦下载并分析了第一个表格行，就可以呈现整个表格。这可以加快“自动”布局方法的渲染时间，但随后的单元格内容可能不适合提供的列宽。

回答by thdoan

If you are working with very large tables (say, 5000 or even 500,000 rows), I recommend a tiny plugin called Clusterize. You don't even need jQuery to use it. The idea is similar to lazy loading images, and it works extremely well in practice.

如果您正在处理非常大的表（例如，5000 甚至 500,000 行），我推荐一个名为Clusterize的小插件。你甚至不需要 jQuery 来使用它。这个想法类似于延迟加载图像，它在实践中非常有效。

回答by paulcol.

Tables have to be downloaded and render in full before they are displayed, appearing to take a longer to display. This lapse all depends on processing power:

表格必须在显示之前下载并完整呈现，这似乎需要更长的时间来显示。这种失误完全取决于处理能力：

Are large html tables slow?

大型 html 表格很慢吗？

For the amount of rows you have I'm surprised you are seeing any noticeable lag, though you can try a few things from here, to help us help you out:

对于您拥有的行数，我很惊讶您看到任何明显的延迟，尽管您可以从这里尝试一些方法，以帮助我们为您提供帮助：

• remove gradient backgrounds (as they are rendered by the browser)
• paginate form data
• output form rows in chunks (say, 200 rows at a time)
• does removing all css help?
• specify a exact width + height on table rows, cells

• 删除渐变背景（因为它们由浏览器呈现）
• 分页表单数据
• 以块的形式输出表单行（例如，一次 200 行）
• 删除所有 css 有帮助吗？
• 在表格行、单元格上指定精确的宽度 + 高度

回答by b55

I find that putting a large table into a div, it's best to use a setTimeout. This seems to speed it up significantly in Chrome when storing the table in a global var first then calling the function in a setTimeout.

我发现将大表放入 div 中，最好使用 setTimeout。当首先将表存储在全局变量中然后在 setTimeout 中调用该函数时，这似乎在 Chrome 中显着加快了速度。

setTimeout("setTable(tdata)",1);

function setTable(d) {
        $("#myDiv").html(d);
}

Cheers! B55

干杯! B55