Доброе утро
В этой заметке хочу вам рассказать о проблеме, возникшей в Liferay 7.2 в браузере Microsoft Edge, связанной с перформансом.
Проблема
Большое количество элементов ввода на странице приводило к просадке производительности в браузере Edge.
Попытки решения
- Уменьшить кол-во элементов на странице, а особенно выпадающих списков.
- Сделать динамическую подгрузку элементов выпадающего списка.
- Ждать решение проблемы со стороны разработчиков Liferay (ссылка на issue https://issues.liferay.com/browse/LPS-105886)
Подробное описание
На портале заказчика был развернут портлет с возможностью множественного поиска продуктов. В таблицу построчно вводились поисковые параметры, а в итоге клиент получал найденный товары в выпадающем списке. В данном поиске есть возможность подгружать csv, xls, для удобного выставления поисковых параметров. Из-за этого мы получаем возможность выполнять удобный поиск на 100 строк и более.
При тестировании оказалось, что в Edge после осуществления поиска на более 50 строк, страница начинала сильно тормозить, после перемещения курсора на поле ввода, фокус выставлялся через 3-5 секунд.
После анализа перформанса с помощью инструментов Edge были получены следующие данные.
Много CPU Time уходило на исполнение скриптов, а именно “cewrapper.fn”. Выяснилось, что это функция библиотеки YUI (Yahoo! UI Library). Функция вызывается при перемещении курсора по страницы, для вызова каких-либо функций подписанных на перемещение мыши. Как оказалось, длительность выполнения функции сильно зависит от количества элементов на странице, особенно сильно ее просаживает выпадающий список.
Были попытки составить похожую форму только из инструментов liferay, но изменений не было, “cewrapper.fn” занимал большую часть процессорного времени.
Дальнейшие испытания над выпадающем списком привели к тому, что производительность зависит еще от количества элементов в выпадающем списке. Была создана форма с 35 выпадающими списками и при 3 элементах в каждом списке в среднем вызов функции вызывал ~25мс, а при 6 элементах ~50мс.
Решением проблемы была пагинация таблицы, но в данном случае это усложнило бы пользователю работу с поиском. По итогу был написан issue на этот баг (https://issues.liferay.com/browse/LPS-105886).
На этом всё. Удачи!
