Медленный ответ, когда таблица HTML большая - PullRequest
Новая
       1

Медленный ответ, когда таблица HTML большая

21 голосов
/ 27 декабря 2011

Я использую JavaScript для создания HTML-таблицы из 4 столбцов, но когда таблица стала очень большой (например, более 1000 строк), пользователь может столкнуться с задержкой между их взаимодействием (например, зависание на строке, прокрутка или нажатиечто-то) и ответ веб-страницы.

Это демо, чтобы показать мою проблему, пожалуйста, запустите ее на весь экран, вы можете заметить (или не замечать, если ваш компьютер достаточно быстр ...) небольшойзадержка эффекта наведения при быстром перемещении мыши между рядами: 

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

Есть ли решение этой проблемы?

Ответы [ 6 ]

20 голосов
/ 28 декабря 2011

Первое, что замедляет ваш цикл - это .insertRow().Вы делаете это в верхней части цикла, а затем добавляете к нему ячейки.После добавления строки и добавления каждой ячейки браузер выполняет расчеты макета.Вместо этого используйте .createElement(), а затем .appendChild() в конце цикла.

Демо: http://jsfiddle.net/ThinkingStiff/gyaGk/

Замените: 

row = tableContent.insertRow(i);

С: 

row = document.createElement('tr');

И добавьте это в конце цикла: 

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

Это решит проблему скорости загрузки.Что касается наведения, у вас слишком много CSS-правил, влияющих на элементы tr и td с помощью селекторов тегов.Я удалил несколько и использовал классы для нескольких, и выделение при наведении курсора намного быстрее.В частности, я заметил, что overflow: hidden на элементах td значительно замедлил его.Рассмотрите возможность объединения некоторых правил, использования более простых селекторов и добавления классов к элементам для ускорения обработки CSS.Во время наведения мышью многие вещи должны быть пересчитаны механизмом компоновки, и чем меньше правил CSS, тем лучше.Один пример, который я видел в вашем коде, был #tables tbody tr, когда в таблице был только один tbody.#tables tr было бы достаточно.Лучше, чем любой из них класс.Я использовал .row в своей демонстрации.

Лучшие практики от Скорость страницы Google :

  • Избегайте селекторов потомков: table tbody tr td
  • Избегайте избыточных предков: body section article (body никогда не требуется)
  • Избегайте универсальных (*) селекторов: body *
  • Избегайте селекторов тегов в качестве ключа (крайний справа): ul li
  • Избегайте дочерних или смежных селекторов: ul > li > a
  • Избегайте чрезмерно квалифицированных селекторов: form#UserLogin (# уже определено)
  • Сделайте ваши правила такими конкретными, каквозможно (класс или идентификатор).
5 голосов
/ 07 мая 2017

Также, как и в любом HTML-элементе в Chrome, добавляем «transform: rotateX (0deg);»к элементу таблицы вынуждает ускорение аппаратного обеспечения, значительно ускоряя прокрутку (если это проблема).

4 голосов
/ 27 декабря 2011

если ваша таблица имеет обычные столбцы (без colspan и / или rowspan), вы можете немного улучшить время рендеринга, применив свойство table-layout:fixed:

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

При «фиксированном» методе компоновки вся таблица может отображаться после загрузки и анализа первой строки таблицы. Это может ускорить время рендеринга по сравнению с «автоматическим» методом макета, но последующее содержимое ячейки может не вписаться в предоставленную ширину столбца.

2 голосов
/ 19 мая 2017

Если вы работаете с очень большими таблицами (скажем, 5000 или даже 500 000 строк), я рекомендую небольшой плагин под названием Clusterize . Вам даже не нужен jQuery, чтобы использовать его. Идея похожа на ленивую загрузку изображений и на практике работает очень хорошо.

2 голосов
/ 27 декабря 2011

Таблицы должны быть загружены и отрисованы полностью, прежде чем они будут отображаться, а для их отображения требуется больше времени.Этот промежуток все зависит от вычислительной мощности:

Медленны ли большие html-таблицы?

При количестве строк у вас есть удивление, что вы видите заметное отставание,хотя вы можете попробовать несколько вещей отсюда, чтобы помочь нам помочь вам:

  • удалить градиентные фоны (как они отображаются браузером)
  • разбить данные формы на страницы
  • выводить строки формы в чанках (скажем, 200 строк за раз)
  • действительно ли удаление всей помощи css?
  • указывает точную ширину + высоту строк таблицы, ячейки
0 голосов
/ 30 июля 2014

Я считаю, что, помещая большую таблицу в div, лучше всего использовать setTimeout.Похоже, это значительно ускоряет работу в Chrome, когда сначала хранится таблица в глобальной переменной, а затем вызывается функция в setTimeout.

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

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

Ура!B55

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...