Низкая производительность PrimeNG Turbo Table в IE 11

Мы используем Турбо-таблицу PrimeNG с динамическими столбцами для отображения 1000 записей на странице. Включены как нумерация страниц, так и сортировка на стороне сервера. Это хорошо работает в Chrome, но ошеломительно медленно в IE при сортировке, разбивке на страницы или обновлении всех записей. Как только ответ сервера будет возвращен примерно через 9 секунд, IE зависнет на 2 минуты, а затем отобразит данные. Кроме того, таблица использует ngSwitch для определения содержимого столбца, например, в некоторых столбцах отображаются значки, в некоторых — текстовая область и так далее.

Включение prodMode помогло значительно улучшить загрузку страницы, и теперь это сравнимо с Chrome, однако у нас все еще есть проблемы с производительностью при сортировке, разбиении на страницы и обновлении записей.

Мы проверили производительность, удалив ngSwitch, и заметили небольшое улучшение — снижение на 10 секунд. Однако нам требуется функциональность ngSwitch, поэтому ее удаление на самом деле не вариант, если только нет альтернативы, которую мы можем использовать. Во всяком случае, это не совсем решает нашу проблему.

Пожалуйста, оцените любую помощь!


angular8 performance internet-explorer-11 primeng-turbotable ng-switch
person GN15    schedule 21.05.2020    source источник
comment
Вы использовали вкладку «Производительность» инструментов разработчика F12, чтобы проверить, какая часть замедляет производительность в IE? Есть ли ошибка в консоли в IE? Кроме того, вы можете попробовать использовать виртуальную прокрутку. Он делает вид, что у него есть все предметы, но на самом деле показывает только определенное количество одновременно. Я думаю, что это сохранит ваш DOM легким и повысит производительность.   -  person Yu Zhou    schedule 22.05.2020
comment
IE зависает каждый раз, когда я запускаю Dev Tools! Кроме того, я не вижу никакой ошибки в консоли. Я пытался использовать виртуальную прокрутку, но в нашем случае это не сработало. Пользователи должны иметь возможность одновременно выбирать все или некоторые записи на странице и выполнять над ними действия. Для этого мы также предоставляем функциональность контекстного меню Turbo Table.   -  person GN15    schedule 22.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

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

Без какого-либо примера кода мы можем дать только некоторые общие предложения. В этой ситуации я могу только предложить вам использовать Инструменты производительности разработчика F12 для анализа производительности пользовательского интерфейса и использования Сетевые инструменты разработчика F12, чтобы проверить время запроса. Если инструменты разработчика не работают в вашем IE, вы также можете использовать Инструментарий производительности Windows для анализа производительности веб-сайта.

person Yu Zhou    schedule 22.05.2020
comment
Большое вам спасибо за вашу помощь! Чтобы заставить Dev Tools работать, я уменьшил количество записей до 500, и это позволило мне проанализировать производительность. Похоже, что все время тратится на событие загрузки DOM, то есть на функцию globalZoneAwareCallback в polyfills-es5.js, если быть точным. Кроме того, стеки вызовов Javascript показывают, что функция «checkAndUpdateView» в vendor.js использует 35% ЦП. - person GN15; 22.05.2020
comment
Добавил в index.html ниже, но это не помогло: ‹head› ‹script› __Zone_enable_cross_context_check = true; ‹/скрипт›. ‹/head› как предложено здесь — github.com/angular/zone.js/issues/ 971 - person GN15; 22.05.2020
comment
Производительность TurboTable похожа на нативную *ngFor, поскольку она ее использует. NgFor разрывает все дерево DOM для повторения и перестраивает его для любых небольших изменений, внесенных в его данные, которые могут сильно повлиять на производительность IE. Предоставление NgFor функции trackBy позволяет ей обновлять DOM только там, где необходимы изменения. Для других проверок производительности вы можете обратиться к этому списку. - person Yu Zhou; 25.05.2020
comment
Спасибо @YuZhou. Наша таблица уже использует функцию trackBy в дополнение к стратегии обнаружения изменений onPush в компоненте. Обновление некоторых записей едва ли занимает несколько секунд. Тем не менее, если мы обновим все 1k записей одновременно, потребуется много времени. Я посмотрю список, который вы рекомендовали. - person GN15; 26.05.2020
comment
Пожалуйста. Если все необходимое было сделано, то я думаю, что это связано с ограничениями IE. В конце концов, IE использует другой движок с другими современными браузерами, и он не может быть таким же быстрым, как другие современные браузеры. - person Yu Zhou; 27.05.2020
comment
Я заменил пару вызовов функций в html конвейерами, что сократило время примерно на 7 секунд (очевидно, не такая уж большая разница). Я пробовал что-то еще... таблица получает данные из массива [значение]=данные. Я очистил массив перед началом сортировки на стороне сервера, и теперь это занимает всего на 4-5 секунд больше, чем Chrome. Однако очистка не является правильным решением, поскольку текущий набор записей в пользовательском интерфейсе исчезает, если пользователь выбирает сортировку или переходит на другую страницу. - person GN15; 27.05.2020
comment
Пример кода: this.items=[]; this.testService.getItems().subscribe((data) =› this.items = data.items....) Любые предложения по лучшему способу замены массива данных? - person GN15; 27.05.2020
comment
Это трудно воспроизвести только с одной строкой кода выше. Было бы лучше, если бы вы предоставили минимальный образец для воспроизведения проблемы. Вы можете использовать онлайн-редактор кода, например StackBlitz, чтобы показать пример, воспроизводящий проблему. - person Yu Zhou; 28.05.2020