web-dev-qa-db-ja.com

HTMLテーブルが大きい場合の応答が遅い

JavaScriptを使用して4列のHTMLテーブルを生成していますが、テーブルが非常に大きくなると（たとえば、1000行を超える）、ユーザーは操作（たとえば、行にカーソルを合わせる、スクロールする、または何かをクリックする）とWebページの応答。

これは私の問題を示すためのデモです。フルスクリーンで実行してください。マウスを行間ですばやく移動すると、ホバー効果の小さな遅れに気付く（またはコンピューターが十分に高速である場合は気付かない）ことができます。

/**
 * @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>

この問題の解決策はありますか？

javascriptcsshtml-table
22
Fong-Wan Chau

ループが遅くなる最初のことは.insertRow()です。ループの上部でこれを行ってから、それにセルを追加します。行が追加された後、各セルが追加された後、ブラウザーはレイアウト計算を実行しています。代わりに、ループの最後で.createElement()を使用し、次に.appendChild()を使用します。

デモ： http://jsfiddle.net/ThinkingStiff/gyaGk/

交換：

row = tableContent.insertRow(i);

と：

row = document.createElement('tr');

ループの最後にこれを追加します。

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

これで読み込み速度の問題が解決します。ホバーに関しては、タグセレクターを使用してtrおよびtd要素に影響を与えるCSSルールが多すぎます。私はいくつかを削除し、いくつかのクラスを使用しました。ホバーの強調表示ははるかに高速です。具体的には、overflow: hiddentd要素を使用すると、速度が大幅に低下しました。いくつかのルールを組み合わせ、よりシンプルなセレクターを使用し、要素にクラスを追加してCSS処理を高速化することを検討してください。カーソルを合わせている間、レイアウトエンジンは多くのことを再計算する必要があり、CSSルールが少ないほど良いでしょう。あなたのコードで見た1つの例は#tables tbody trテーブルにtbodyが1つしかない場合。 #tables trで十分でしょう。これらのどちらよりも優れているのはクラスです。 .rowデモで。

Google Page Speed のベストプラクティス：

  • 子孫セレクターを避ける：table tbody tr td
  • 冗長な祖先を避ける：body section article（body不要）
  • ユニバーサル（*）セレクターを使用しない：body *
  • タグセレクターをキーとして使用しないでください（一番右）：ul li
  • 子または隣接するセレクターを避けます：ul > li > a
  • 過度に修飾されたセレクターは避けてください：form#UserLogin（#はすでに特定されています）
  • ルールをできるだけ具体的にします（クラスまたはID）。
21
ThinkingStiff

また、ChromeのHTML要素と同様に、「transform：rotateX（0deg）;」を追加します。 table要素にハードウェアアクセラレーションを強制し、スクロールを大幅に高速化します（問題の場合）。

5
Javier Guerrero

テーブルに通常の列がある場合（colspanおよび/またはrowspanなし）、table-layout:fixedプロパティを適用してレンダリング時間を少し改善できます。

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

「固定」レイアウト方式では、最初のテーブル行をダウンロードして分析すると、テーブル全体をレンダリングできます。これにより、「自動」レイアウト方式よりもレンダリング時間が短縮されますが、後続のセルのコンテンツが、提供された列幅に収まらない場合があります。

4
Fabrizio Calderan

テーブルは、表示される前にダウンロードして完全にレンダリングする必要があり、表示に時間がかかるように見えます。この経過はすべて処理能力に依存します。

大きなhtmlテーブルは遅いですか？

あなたが持っている行の量について、あなたが顕著なラグを目にしていることに驚いていますが、私たちがあなたを助けるためにここからいくつかのことを試すことができます：

  • グラデーションの背景を削除します（ブラウザーによってレンダリングされるため）。
  • ページネーションフォームデータ
  • チャンク形式の行の出力（たとえば、一度に200行）
  • すべてのCSSを削除すると役立ちますか？
  • 表の行、セルに正確な幅+高さを指定する
2
paulcol.

非常に大きなテーブル（たとえば、5000または500,000行）で作業している場合は、 Clusterize と呼ばれる小さなプラグインをお勧めします。 jQueryを使用する必要さえありません。アイデアは遅延読み込み画像に似ており、実際には非常にうまく機能します。

2
thdoan

大きなテーブルをdivに入れると、setTimeoutを使用するのが最善です。 Chromeでテーブルを最初にグローバル変数に保存してから、setTimeoutで関数を呼び出すと、これが大幅にスピードアップするようです。

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

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

乾杯！ B55

0
b55