Снижение производительности с помощью jQuery UI Sortable Widget, когда некоторые строки скрыты - PullRequest
0 голосов
/ 12 апреля 2019

Я столкнулся с проблемой производительности в проекте, где я использую jQuery UI, сортируемый с таблицей с довольно большим количеством строк и столбцов. Время инициализации виджета увеличивается до секунд после некоторого изменения кода.

Я отладил, и, похоже, основная проблема заключается в том, что инициализация возникает, когда некоторые строки таблицы скрыты.

Я сделал скрипку, чтобы показать это: Сравните два разных времени инициализации, в зависимости от того, скрыты или нет 10 строк демонстрационной таблицы: в этом примере инициализация занимает ~ 20 мс и увеличивается до ~ 30 мс, когда скрыты 10 строк. Любая идея, что может быть причиной и что можно сделать для обхода?

sorter = $("#sorter tbody");

$("#b1").click(function() {
  //Show or hide rows 11-19
  sorter.find("tr:gt(9):lt(9)").toggle("slow");
})

$("#b2").click(function() {
  //init jquerui-sortable
  start = performance.now()
  sorter.sortable();
  stop = performance.now()
  sorter.sortable("destroy")
  
  alert("inittime: " + (stop - start) + " ms");  
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id=b1>toggle 10 rows</button>
<button id=b2>init sorting</button>

<table id="sorter">
<tbody>
<tr><td>This is row #1</td><td>Another random demo content 8886737</td></tr>
<tr><td>This is row #2</td><td>Another random demo content 9318262</td></tr>
<tr><td>This is row #3</td><td>Another random demo content 7124588</td></tr>
<tr><td>This is row #4</td><td>Another random demo content 2024210</td></tr>
<tr><td>This is row #5</td><td>Another random demo content 4974586</td></tr>
<tr><td>This is row #6</td><td>Another random demo content 9646380</td></tr>
<tr><td>This is row #7</td><td>Another random demo content 8058196</td></tr>
<tr><td>This is row #8</td><td>Another random demo content 8591363</td></tr>
<tr><td>This is row #9</td><td>Another random demo content 4743409</td></tr>
<tr><td>This is row #10</td><td>Another random demo content 2272506</td></tr>
<tr><td>This is row #11</td><td>Another random demo content 9875725</td></tr>
<tr><td>This is row #12</td><td>Another random demo content 1443297</td></tr>
<tr><td>This is row #13</td><td>Another random demo content 4468011</td></tr>
<tr><td>This is row #14</td><td>Another random demo content 2538380</td></tr>
<tr><td>This is row #15</td><td>Another random demo content 8952721</td></tr>
<tr><td>This is row #16</td><td>Another random demo content 3873270</td></tr>
<tr><td>This is row #17</td><td>Another random demo content 6126887</td></tr>
<tr><td>This is row #18</td><td>Another random demo content 7262402</td></tr>
<tr><td>This is row #19</td><td>Another random demo content 4551621</td></tr>
<tr><td>This is row #20</td><td>Another random demo content 5941782</td></tr>
<tr><td>This is row #21</td><td>Another random demo content 7735794</td></tr>
<tr><td>This is row #22</td><td>Another random demo content 5309242</td></tr>
<tr><td>This is row #23</td><td>Another random demo content 2347331</td></tr>
<tr><td>This is row #24</td><td>Another random demo content 6204679</td></tr>
<tr><td>This is row #25</td><td>Another random demo content 7578519</td></tr>
<tr><td>This is row #26</td><td>Another random demo content 6390498</td></tr>
<tr><td>This is row #27</td><td>Another random demo content 5922984</td></tr>
<tr><td>This is row #28</td><td>Another random demo content 8387382</td></tr>
<tr><td>This is row #29</td><td>Another random demo content 9958999</td></tr>
<tr><td>This is row #30</td><td>Another random demo content 9020067</td></tr>
</tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...