У меня есть веб-приложение, в котором есть таблица для ввода данных. Каждая строка имеет 16 столбцов, из которых 14 доступны для редактирования. Эта таблица для некоторых пользователей может достигать более 100 строк. То, с чем я сталкиваюсь, находится на Chrome Mobile, когда он достигает более чем 50 строк, он начинает становиться очень медленным, и на 80+ строк он достигает примерно 1 символа в секунду для ввода текста в любую ячейку. Он отлично работает на firefox, сафари, и только немного медленный на мобильном Edge. Я сделал урезанную версию для codepen с маленькой таблицей и большой таблицей и получил те же результаты с теми же результатами, поэтому на моей странице не может быть ничего другого.
<body onload="myFunction()">
<style>
td, th {
width: 60px
}
tr:nth-child(even) {
background-color: #fff;
}
tr:nth-child(odd) {
background-color: #ddd;
}
<style/>
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
<th>C5</th>
<th>C6</th>
<th>C7</th>
<th>C8</th>
<th>C9</th>
</tr>
</thead>
<tbody id='tbody1'>
<tr>
<td contenteditable="true">Mary</td>
<td contenteditable="true">had</td>
<td contenteditable="true">a</td>
<td contenteditable="true">little</td>
<td contenteditable="true">lamb</td>
<td contenteditable="true">whose</td>
<td contenteditable="true">fleece</td>
<td contenteditable="true">was</td>
<td contenteditable="true">white</td>
</tr>
</tbody>
</table>
<br><br>
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
<th>C5</th>
<th>C6</th>
<th>C7</th>
<th>C8</th>
<th>C9</th>
</tr>
</thead>
<tbody id='tbody2'>
<tr>
<td contenteditable="true">Mary</td>
<td contenteditable="true">had</td>
<td contenteditable="true">a</td>
<td contenteditable="true">little</td>
<td contenteditable="true">lamb</td>
<td contenteditable="true">whose</td>
<td contenteditable="true">fleece</td>
<td contenteditable="true">was</td>
<td contenteditable="true">white</td>
</tr>
</tbody>
</table>
<script>
function myFunction() {
for (let i = 0; i < 20; i++) {
element = document.querySelector("#tbody1");
element.innerHTML +=
"<tr>" +
"<td contenteditable='true'>Mary</td>" +
"<td contenteditable='true'>had</td>" +
"<td contenteditable='true'>a</td>" +
"<td contenteditable='true'>little</td>" +
"<td contenteditable='true'>lamb</td>" +
"<td contenteditable='true'>whose</td>" +
"<td contenteditable='true'>fleece</td>" +
"<td contenteditable='true'>was</td>" +
"<td contenteditable='true'>white</td>" +
"</tr>";
}
for (let i = 0; i < 200; i++) {
element = document.querySelector("#tbody2");
element.innerHTML +=
"<tr>" +
"<td contenteditable='true'>Mary</td>" +
"<td contenteditable='true'>had</td>" +
"<td contenteditable='true'>a</td>" +
"<td contenteditable='true'>little</td>" +
"<td contenteditable='true'>lamb</td>" +
"<td contenteditable='true'>whose</td>" +
"<td contenteditable='true'>fleece</td>" +
"<td contenteditable='true'>was</td>" +
"<td contenteditable='true'>white</td>" +
"</tr>";
}
}
</script>
</body>
Codepen
Я пытался сделать только ячейку, которую я сейчас редактирую, редактируемой, но, похоже, это не делает никакой разницы.