предисловие
Эпоха интерфейсных фреймворков произвела революцию в опыте разработки, эффективности и производительности страниц. Все взяли набор инструментов для упаковки (webpack/parcel и т. д.) и быстро создали SPA-страницу с набором загрузчиков.
Преимущества SPA-приложений очевидны;
- Улучшить переключение страниц
- Сокращение времени переключения
- Простое развертывание и разделение передней и задней частей
Но это также приносит ряд проблем с производительностью:
- Сценарий начальной загрузки большой
- Долгое пустое время на первом экране
- Когда страница возвращается, данные пассивно повторно извлекаются
Эти проблемы неизбежны при использовании режима SPA.Понимая процесс загрузки SPA, вы можете постепенно увидеть основную причину проблем с производительностью и добавить эти проблемы, уточняя приложения.
Грусть спа
все более и более благословенный
По сравнению с обычными простыми страницами, самая большая проблема SPA заключается в том, что он вводит большое количество скриптов схемы фреймворка при инициализации, из-за чего объем скрипта увеличивается по мере развития проекта.
больше, чем объем
Многие люди обращают внимание на объем загрузки скрипта и используют ряд решений для повышения скорости попадания в кэш и уменьшения количества запросов скрипта. В мобильном терминале с плохим сетевым окружением очень важно минимизировать время запроса.
Но это не панацея: мобильные устройства имеют низкую производительность при синтаксическом анализе, компиляции и выполнении скриптов (справочник по загрузке скриптов).«Сценарий на кончике языка»), Даже если вы можете воспользоваться преимуществами кэша, время выполнения также является серьезным узким местом производительности.
Keep SPA Fit
Принцип оптимизации производительности: бедные останутся одни, а богатые помогут миру.
Как содержать большой СПА?
По мере непрерывного развития проекта количество страниц продолжает увеличиваться, а на сайт постоянно добавляются сторонние компоненты и библиотеки инструментов.BundleВнутри хорошая архитектура SPA может гарантировать, что крупномасштабные проекты SPA по-прежнему сохранят максимальную производительность и удобство. Ниже представлены характеристики отличного СПА с производительностью и опытом:
оптимизация производительности
1. Быстрый запуск - значительно повышает скорость загрузки (важно)
Быстро запустите приложение, инициируйте загрузку пакета и параллельную загрузку исходных данных. Я полагаю, что все обнаружили, что когда SPA инициализируется, он должен дождаться возврата и выполнения пакета, прежде чем инициируется загрузка данных.
Поскольку загрузка пакета на мобильных устройствах занимает очень много времени (даже с кешем), мы можем воспользоваться этим временем для предварительной загрузки данных. Эта особенность делает последующую оптимизацию более очевидным эффектом.
Следующий пример кода:
// app.js
Promise.all([load('bundle'), load('data')])
2. Разделить по маршруту — уменьшить первоначальный размер загрузки
При использовании метода асинхронной загрузки предоставляется метод асинхронного извлечения компонентов, когда маршрут зарегистрирован, и соответствующий компонент будет загружен только тогда, когда необходимо ввести соответствующий маршрут.
route({
Home: () => import('@/coms/home'),
About: () => import('@/coms/about')
})
3. Независимая упаковка общедоступного пакета асинхронных компонентов — улучшите возможность повторного использования и частоту попаданий в кэш.
существуетHomeа такжеAboutВ других маршрутах может быть общий набор компонентов пользовательского интерфейса.Если общедоступные компоненты асинхронной загрузки не упакованы единообразно, каждый раз при загрузке маршрута будет загружаться дополнительный набор компонентов пользовательского интерфейса. Извлекая и упаковывая общие компоненты вVendor, что может уменьшить объем загрузки и время следующего въездного маршрута.
Кстати: вwebpack < 4, вам по-прежнему необходимо вручную поддерживать общие компоненты асинхронно загруженных компонентов.webpack4Обеспечить более богатую абстракцию асинхронных компонентовстроить планы.
4. Предварительная загрузка компонентов — сокращение времени переключения страниц
Когда загружается первый экран, устройство и сеть находятся в состоянии ожидания, а другие компоненты маршрутизации могут быть предварительно загружены для повышения производительности переключения страниц.
Предварительная загрузка — очень утомительный процесс, мы можем разработать минимальную программу запуска для быстрой предварительной загрузки последующих компонентов после рендеринга страницы:
// 所有包含Page的路由组件均会被预加载
boostraper.loadMatch('Page')
5. Используйте синтаксис ESM — библиотеку инструментов упаковки по запросу, чтобы уменьшить размер пакета.
webpack4в ЕСМtree shakingОн был значительно оптимизирован, так что при ссылке на библиотеку инструментов он действительно «упаковывается по запросу», что требует, чтобы, будь то библиотека инструментов, разработанная вами или сторонней библиотекой инструментов, очень необходимо упаковать & используйте версию ЕСМ.
6. Используйте с PWA, вкус лучше - уменьшите время рендеринга первого экрана, значительно улучшите опыт
Согласно политике кэширования PWA, посещенные страницы могут бытьindex.htmlКэшируется, при следующем открытии кеша сначала будет использован кеш, а потом будет выдан запрос на обновление кеша. Это позволяет приложению SPA загружать поток документов в верхней части страницы практически без дополнительного времени.
Опыт оптимизации
1. Создайте свой минимализмSkeleton Page
Первая загрузка экрана SPA сталкивается с длинным белым экраном, а скелетная диаграмма является идеальным «замедлением». исследователь в гуглстатьяУпоминается, что скелетная диаграмма значительно улучшает взаимодействие с пользователем:
- быстрое шоу
- Благодаря кэшу первого экрана PWA можно мгновенно загрузить и отобразить карту скелета, а первый экран визуально улучшен.
- стабильная загрузка
- Устранение «дрожания» при начальной загрузке страницы из-за многочисленных перерисовок и загрузки ресурсов
Следует отметить, что скелетная диаграмма должна быть как можно меньше и проще, чтобы она не серьезно повлияла на последующую загрузку страницы.
2. Переключение страниц Загрузка
Независимо от того, как оптимизировать загрузку производительности, данные страницы все равно необходимо получать при переключении страниц, и если они не обрабатываются должным образом, перед возвратом данных может быть короткий недружественный «пробел». С этим можно прекрасно справиться:
- Удобная загрузка перед переключением
- Прежде чем обеспечить загрузку компонентов и данных, можно гарантировать интерактивность страницы и уменьшить ощущение блокировки пользователя.
- анимация перехода
- В большинстве нативных приложений анимация перехода является стандартной.
- Даже если компоненты и данные полностью загружены, время рендеринга страницы все еще требуется в момент переключения на новую страницу, что может привести к тому, что страница будет временно пустой или «визуально заблокированной».
- За счет времени анимации перехода эту проблему можно очень хорошо решить.Большинство страниц гарантированно отрисовываются после завершения анимации перехода.
наконец
В дополнение к решениям по оптимизации SPA, упомянутым выше, основы веб-производительности также являются необходимыми основами (такими как конвергенция доменных имен, разумная структура документов). Суть оптимизации производительности заключается в процессе детального мониторинга и работы страниц, а также требует от нас большего осмысления и понимания процесса и логики веб-загрузки.