Я создаю приложение, используя Vue 2. Есть страница, которая содержит простую галерею изображений, содержащую около 20 изображений и одно большое фоновое изображение страницы.
Фоновое изображение самой страницы фактически содержитсяв фиксированном элементе div, который position: fixed;, имеет 100% width и height и использует background-size: cover; для отображения изображения.
Все ~ 20 элементов в галерее такжеиспользуются элементы div, а *3011* отображается в сетке из 3 столбцов, а изображения отображаются с использованием динамически генерируемого свойства CSS background-url с использованием вычисляемого свойства Vue.Пути к изображениям никогда не меняются, поэтому они не пересчитываются постоянно AFAIK.
Производительность этой страницы в Chrome ужасна, загрузка занимает вечность (хотя это некоторые изображения с высоким разрешением, хотя и шириной 4K)и как только изображения загружены, я могу немного взаимодействовать со страницей, но все становится крайне медленным, и иногда страница перестает отвечать на запросы полностью.
С другой стороны, в Firefox и Edge все в основном маслянисто гладко, как во времязагрузка изображений и во время прокрутки / рендеринга.Взаимодействие с приложением никогда не блокируется.
Я помню, как пытался это исправить, заменяя элементы div обычными тегами img и загружая изображения с их использованием.Кроме того, я пытался кэшировать изображения, я пытался использовать статические URL-адреса изображений для тестирования - то же самое происходит каждый раз - другие браузеры справляются с этим хорошо, Chrome его душит.
Вот скриншотиз сводки производительности за ~ 30 секунд, с момента, когда я нажимаю URL страницы, до момента, когда в основном все загружено, и браузер все еще пытается что-то отобразить и обработать любое взаимодействие со страницей.Очевидно, что этап рисования является проблемой здесь:
Есть совет?Спасибо!