Скрипт, в котором в цикле обрабатыватся 600 строк очень долго работает на Firefox
function getUnusedBuses() { $('#unused_buses_table').find("tr:not('.tr_to_copy')").remove() $('#unused_buses_table_loading').show(); $.get( "advertisement.html/unusedBuses", getFilterObjectUnusedBuses(), function (data) { if (data.total != -1) { $('#unused_buses_table_loading').hide(); $('#rows_count_unused_buses').html(data.total); var rows = data.rows; var id_autopark = -1; for (var i = 0; i < data.total; i++) { console.log('итерация: ' + i) if (id_autopark !== rows[i].autopark) { var trElementH = $('#subheader_buses_table').clone().removeAttr('id').removeClass('tr_to_copy').show(); var mas = $(trElementH.find('td')[0]).html(rows[i].autopark); $('#unused_buses_table').append(trElementH); } var trElement = $('#tr_unused_bus').clone().removeAttr('id').removeAttr('class', 'tr_to_copy').show(); var mas = trElement.find('td'); $(mas[0]).html(rows[i].id_bus); $(mas[1]).html(rows[i].autopark); $(mas[2]).html((rows[i].is_image == null || rows[i].is_image === 0 ) ? rows[i].bus_route : '<a style="cursor: pointer;" onclick="showRouteMap(' + rows[i].id_bus_route + ')">' + rows[i].bus_route + '</a>'); $(mas[3]).html(rows[i].state_number); $(mas[4]).html(rows[i].garage_number); $(mas[5]).html(rows[i].busyness_expiration); $(mas[6]).html(rows[i].inactivity_frequency); $('#unused_buses_table').append(trElement); id_autopark = rows[i].autopark; } console.log('конец цикла') countCheckedBuses(); } else { $.messager.alert('Внимание!', data.msg); } }, 'json' ); } data.rows - это массив(джейсонина). В массиве 600 строк. Их нужно показать на таблице. tr_unused_bus - это строка - шаблон. subheader_buses_table - это тоже строка- шаблон, но только подзаголовок. В опере, хроме, все это дело отрабатывает довольно быстро- секунда-полтора. В Мозилле же это занимает больше 10 секунд!! не пойму, в чем разница. И да, когда этот скрипт отрабатывает в первый раз в Мозилле, по времени он занимает почти столько же как и в остальных браузерах. Но в последующие разы все очень печально. Поделитесь мнениями. В JavaScript я не профессионал. Поэтому так получилось <tbody id="unused_buses_table" style="border-bottom: 1px black dotted;"> <div id="unused_buses_table_loading" class="panel-loading content-center-abs">Loading...</div> <tr id="subheader_buses_table" class="table_header table-group tr_to_copy" style="display:none;"> <td colspan="7" class="text-center bleft">$</td> </tr> <tr id="tr_unused_bus" class="tr_to_copy" style="display: none;"> <td class="id-display"></td> <td class="text-center bleft" style="width: 10%;"></td> <td class=" text-center " style="width: 10%;"></td> <td class="text-center" style="width: 10%;"></td> <td class="text-center" style="width: 10%;"></td> <td class=" text-center" style="width: 10%;"></td> <td class="text-center bright" style="width: 10%;"></td> <td class=" text-center bleft bright" style="width: 10%;"> <input type="checkbox" value="" onchange="countCheckedBuses()"> </td> </tr> </tbody> |
для начала сюда https://learn.javascript.ru/multi-insert
зачем вставлять в цикле в цикле формируйте html html +='new data'; а по окончанию цикла одним действием вставляйте у вас же каждую вставку перерисовывается документ, потому так и долго |
Часовой пояс GMT +3, время: 01:43. |