HTML表格大时响应慢 [英] Slow response when the HTML table is big

问题描述

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

这是显示我的问题的演示，请在全屏模式下运行，当您在行之间快速移动鼠标时，您会注意到(或者如果您的计算机足够快则不会注意到它...):

/*** @namespace 启动名为stck"的项目*/var stck = {};/*** 变量以保存加载的库存*/股票信息 = [];/*** 根据 SKU 加载商品信息* @私人的* @param {string} SKU 商品的 SKU*/stck.loadItemInformation = 功能(SKU){var descriptionsTable = document.getElementById('descriptionsTable');for (var rowsLength = descriptionsTable.rows.length - 1; --rowsLength; ) {descriptionsTable.deleteRow(1);}var priceTable = document.getElementById('pricesTable');for (var rowsLength =pricesTable.rows.length - 1; --rowsLength; ) {价格表.deleteRow(1);}document.getElementById('tableHeader').style.cssText = '';document.getElementById('tableContent').style.cssText = '';//使用 AJAX 加载数据并在此处处理document.getElementById('addItemButton').className = '隐藏';document.getElementById('saveButton').className = document.getElementById('cancelButton').className = '';document.getElementById('tables').className = '隐藏';document.getElementById('editItem').className = 'active';};/*** 显示行到 'tableContent' 表.* @上市* @param {number} showQuantity 将加载的数量* @param {boolean} isLoadNewStock 定义要显示的数量是否低于库存，是否加载新的库存信息*/stck.showRow = 函数(showQuantity，isLoadNewStock){var 股票 = 股票信息；var tableContent = document.getElementById('tableContent');var tableContentRowsLength = tableContent.rows.length;var stockInfoLength = stck.stockInfo.length;var toIndex = tableContentRowsLength + showQuantity;如果(toIndex > stockInfoLength){如果 (isLoadNewStock && stck.loadStock(10, true, false)) {返回;} 别的 {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);单元格索引 = 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 = '股票';stockCell.innerHTML = stock[i][2];clickHandler = 函数(行){返回函数(){stck.loadItemInformation(stock[row][0]);};};row.onclick = clickHandler(i);}};/*** 此代码用于测试*/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:抗锯齿；光标:默认}::-moz-selection,::selection{background:transparent}::-moz-focus-inner{border:none}正文{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}{大纲:无}img{border:none;be​​havior:url(/i/iepngfix.htc)}表{边框间距:0;边框折叠:折叠}文章，旁边，hgroup，页脚，页眉，导航，部分{显示:块}输入，选择{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}输入:悬停，选择:悬停{边框颜色:#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;大纲:无}输入::-moz-focus-inner{border:0;padding:0}.b{clear:both;margin-top:10px;padding:0 4px;border-top:1px 虚线 #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-图像:-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 缓入缓出;-moz-transition:0.1s 缓动-进出;-o-transition:0.1s 缓入出;过渡:0.1s 缓入出;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-线性梯度(顶部，#4D90FE，#357AE8)；背景图像:-o-线性梯度(顶部，#4D90FE，#357AE8)；背景图像:线性梯度(顶部，#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}输入:禁用，文本区域:禁用{颜色:#999；光标:不允许}textarea:disabled::-webkit-input-placeholder{color:#F9F9F9}.b 输入:禁用{颜色:#EEE；光标:不允许}.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 缓入缓出;-moz-transition:.1s 缓入缓出;-o-transition:0.1s 缓入缓出;过渡:.1s 缓入缓出;溢出:隐藏;z-索引: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 缓入-out;-moz-transition:.1s 缓入缓出;-o-transition:0.1s 缓入缓出;transition:.1s 缓入缓出}#gpanel a:hover{background-color:rgba(204,204,204,.4);color:#FFF}@-webkit-keyframes 加载 {0% {background-color:rgba(204,204,204,.4)}50% {背景颜色:rgba(119,187,68,.9)}100% {background-color:rgba(204,204,204,.4)}}@-moz-keyframes 加载 {0% {background-color:rgba(204,204,204,.4)}50% {背景颜色: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 无限线性;-moz-animation:loading .5s 无限线性}#gnav{浮动:左；溢出:隐藏}#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));背景:-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-索引: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) 底部重复-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表{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-颜色:#FC0 #F60 #F60 #FC0;背景:#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 标签{font-weight:700}form#addItemPage{width:500px;margin:-126px 0 0 -251px}#addItemPage .contentArea p{overflow:auto}#addItemPage .contentArea 标签{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-边界半径:2px；边界半径:2px；背景:#4D90FE；背景图像:-webkit-gradient(线性，左上，左下，从(#4D90FE)，到(#4787ED))；背景图像:-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-渐变(顶部，#4D90FE，#357AE8)；背景图像:-o-线性梯度(顶部，#4D90FE，#357AE8)；背景图像:线性梯度(顶部，#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:规模(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:悬停{背景:#FFF}.stock{文本对齐:右}#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));背景图像:-moz-线性梯度(顶部，#F5F5F5，#F1F1F1)；背景图像:-o-线性梯度(顶部，#F5F5F5，#F1F1F1)；背景图像:线性梯度(顶部,#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%;填充:0 20px；可见性:隐藏；不透明度:0；-webkit-transform:scale(2)；-moz-transform:scale(2)；-o-transform:scale(2)；-ms-transform:scale(2);transform:scale(2);-webkit-transition:.3s 线性;-moz-transition:.3s 线性;-o-transition:.3s 线性;transition:.3s 线性}#editItem.active{visibility:visible;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);变换:缩放(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 线性；过渡:.15s 线性}#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 缓入缓出;-moz-transition:.5s 缓入缓出;-o-transition:.5s 缓入缓出;transition:.5s 缓入缓出}#editItem 部分{width:100%;height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow-y:auto}#editItem 部分 div{float:left;width:50%;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#editItem 标签{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 标签{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}

<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<身体><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/">测试员</a><li id="exit"><a href="/76091132/salir">Salir</a></nav></header><div id="overlay" class="hidden"><form id="addItemPage" class="隐藏"><h1>Agregar un artículo</h1><div class="contentArea"><p><label>SKU<input type="text" id="newSKUInput" maxlength="20" autocomplete="off"></label><p><label>Description<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 class="b"><input type="submit" value="Agregar"><input type="reset" value="Cancelar">

</表单>

<div id="body"><header><div id="函数"><ul><li id="addItemButton">Agregar un artículo<li id="cancelButton" class="hidden">取消<li id="saveButton" class="隐藏">Guardar

<h1 class="fn">Existencia</h1></标题><div id="tables" tabindex="0"><table id="tableHeader"><colgroup><col class="indexCol"><col class="SKUCol"><col><col class="stockCol"></colgroup><头><tr><th>#<th>SKU<Description<th>Existencia</thead><table id="tableContent"><colgroup><col class="indexCol"><col class="SKUCol"><col><col class="stockCol"></colgroup><tbody></tbody>

<div id="editItem"><标题><h2>Editar artículo</h2><导航><ul id="tabsLabels"><li id="generalTabButton" class="active">General<li id="stockTabButton">Existencia<li id="facturationTabButton">Facturación<li id="optionsTabButton">Opciones</nav></标题><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 id="descriptionsTable"><colgroup><col><col class="languageCol"><col class="deleteCol"></colgroup><tr><th>Description<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">;南非荷兰语<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">孟加拉语<option value="bo">tibetano<option value="br">bretón<option value="bs">bosnio<option value="ca">catalán<option value="ce">chechenoguyaratícoreano<选项值="kr">kanuri<option value="ks">cachemiro<option value="ku">kurdo<option value="kv">komi<option value="kw">cónico<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<optionvalue="mg">malgache<option value="mh">marshalés<option value="mi">maorí<option value="mk">macedonio<option value="ml">马拉雅拉姆语<optionvalue="mn">mongol<option value="mr">maratí<option value="ms">malayo<option value="mt">maltés<option value="my">birmano<optionvalue="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">;eslovenosamoano<option value="sn">shona<option value="so">omaí<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">泰米尔语<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>