Медленный отклик при большой HTML-таблице

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

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

 / ** * @namespace Запустите проект под названием 'stck' * / var stck = {}; / ** * Переменная для сохранить загруженный товар * / stck.stockInfo = []; / ** * Загрузить информацию о товаре в соответствии с артикулом * @private * @param {string} SKU Артикул товара * / stck.loadItemInf ормация = функция (артикул) {var descriptionsTable = document.getElementById ('descriptionsTable'); for (var rowsLength = descriptionsTable.rows.length - 1; --rowsLength;) {descriptionsTable.deleteRow (1); } var priceTable = document.getElementById ('priceTable'); for (var rowsLength = priceTable.rows.length - 1; --rowsLength;) {priceTable.deleteRow (1); } document.getElementById ('tableHeader'). style.cssText = ''; document.getElementById ('tableContent'). style.cssText = ''; // Загружаем данные с помощью AJAX и обрабатываем здесь document.getElementById ('addItemButton'). ClassName = 'hidden'; документ.getElementById ('saveButton'). className = document.getElementById ('cancelButton'). className = ''; document.getElementById ('таблицы'). className = 'скрытый'; document.getElementById ('editItem'). className = 'активный'; }; / ** * Показать строку в таблице tableContent. * @public * @param {number} showQuantity Количество, которое будет загружено * @param {boolean} isLoadNewStock Определяет, если количество, которое будет отображаться, ниже, чем количество, будет загружаться новая информация о запасах или нет * / stck.showRow = функция (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; }} для (var i = tableContentRowsLength, row, rowNumber, cellIndex, SKUCell, descriptionCell, stockCell, clickHandler; i 
 html {height: 100%; background-color: #FFF; background: -webkit-gradient (линейный, слева вверху, слева внизу, от (#EEE) до (# 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; курсор : 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: нет; поведение: url (/i/iepngfix.htc)} table {border-spacing: 0; border-collapse: collapse} article, aside, hgroup, footer, header, nav, sec ввод {display: block}, выберите {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} ввод: : -moz-focus-inner {граница: 0; отступ: 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 (линейный, слева вверху, слева внизу, от (# 4D90FE) до (# 4787ED)); фон -image: -moz-linear-gradient (сверху, # 4D90FE, # 4787ED); background-image: -o-linear-gradient (сверху, # 4D90FE, # 4787ED); background-image: linear-gradient (сверху, # 4D90FE, # 4787ED); color: #FFF; font-weight: 700; text-decoration: none; line-height: 27px; -webkit-transition: 0.1s easy-in-out; -moz-transition: 0.1s easy -in-out; -o-transition: легкость входа 0,1 с; переход: 0,1 с легкость выхода; выравнивание текста: центр; курсор: указатель} .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: вставка 0 1px 2p x rgba (0,0,0, .3); схема: нет} 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 (линейный, слева вверху, слева внизу, от (# 4D90FE) до (# 4787ED)); background-image: -moz -linear-gradient (вверху, # 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; фон -color: rgba (0,0,0, .85); высота строки: 46 пикселей; -webkit-transition: .1s легкость входа-выхода; -moz-transition: .1s легкость входа-выхода; -o- переход: 0,1 с легкость входа-выхода; переход: .1 с легкость входа-выхода; переполнение: скрытый; z-index: 10} # gpanel.hidden {top: -44px} #gpanel ul {list-style: none; маржа: 0; отступ: 0} #gpanel li {float: left; overflow: hidden} #gpanel a {display: block; padding: 0 10px; color: #DDD; font-weight: 700; text-decoration: none; белое пространство: nowrap; курсор: указатель ter; -webkit-transition: .1s легкость входа-выхода; -moz-transition: .1s легкость входа-выхода; -o-transition: 0,1с легкость входа-выхода; переход: .1s легкость входа-выхода } #gpanel a: hover {background-color: rgba (204,204,204, .4); color: #FFF} @ -webkit-keyframes загрузка {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 загрузка {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; переполнение: 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: непрозрачность 0,25 с линейная; -moz-transition: непрозрачность 0,25 с линейная; переход: непрозрачность 0,25 с линейная; непрозрачность: 1; переполнение-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: bl ock; text-transform: uppercase; font: 700 10px Tahoma, Geneva, sans-serif; zoom: 1} .window input [type = "text"],. window input [type = "number"] ,. window input [ type = "пароль"] ,. 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, # пароль, # largedescription {width: 350px} #price {width: 100px} .window input [type = "submit"] {padding: 5px 10px; border: 1px solid; border-color: # FC0 # F60 # F60 # FC0 ; фон: # F90}.вход окна [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 вверху, слева внизу, от (# 4D90FE) до (# 4787ED)); background-image: -moz-linear-gradient (top, # 4D90FE, # 4787ED); background-image: -o-linear-gradient (вверху , # 4D90FE, # 4787ED); background-image: linear-gradient (top, # 4D90FE, # 4787ED); color: #FFF; font-weight: 700; text-decoration: none; line-height: 27px; cursor: указатель} #functions li: hover {background: # 357AE8; background-image: -webkit-gradient (linear, left top, left bottom, from (# 4D90FE), to (# 357AE8)); background-image: -moz- linear-gradient (вверху, # 4D90FE, # 357AE8); background-image: -o-linear-gradient (top, # 4D90FE, # 357A E8); 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); контур: 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 } # таблицы th, # таблицы 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 (линейный, слева вверху, слева внизу, от (# F5F5F5) до (# F1F1F1)); background-image: -moz-linear-gradient (вверху, # F5F5F5, # F1F1F1) ; background-image: -o-linear-gradient (сверху, # F5F5F5, # F1F1F1); background-image: linear-gradient (сверху, # F5F5F5, # F1F1F 1); 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-переход: .3s линейный; переход :.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; курсор: по умолчанию} #editItem .container {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 100%; overflow: hidden} #editItem .tabs {позиция: относительная; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizin g: border-box; width: 100%; height: 100%; - webkit-transition: .5s easy-in-out; -moz-transition: .5s easy-in-out; -o-transition: .5s easy -в-выход; переход :.5s easy-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; размер окна : border-box} #editItem label {float: left; width: 20%; min-width: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; размер окна: 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} # inputTable .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} 
   Existencia | HDX  
  • Согласовать искусство

Existencia

# SKU Descripción Existencia

Редактировать искусство

Descripción Idioma
Estado
-> table >
Inventario 0
Cantidad vendido 0
ltima fecha de modificación
section >
Código Unidad Cantidad Equivalent Precio

Стоимость Imprimir

div>

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

21
задан Fong-Wan Chau 14 May 2019 в 19:04
поделиться