По сравнению с ранними днями, когда внешний и внутренний коды были тесно связаны между собой, а инженерам приходилось писать внешний код, теперь интерфейс и серверная часть разделены.Этот метод разработки значительно улучшает ремонтопригодность и эффективность разработки интерфейсных и серверных проектов.Фронтенд и серверные инженеры сосредоточены на своем основном бизнесе. Однако, обеспечивая удобство, он также имеет некоторые недостатки, такие как время рендеринга первого экрана (FCP), потому что первый экран должен запрашивать больше контента, большее время приема-передачи HTTP (RTT), чем оригинал, что приводит к белый Если белый экран слишком длинный, пользовательский опыт будет значительно снижен, а если скорость сети пользователя низкая, FCP будет длиннее.
Отсюда вытекает ряд методов оптимизации, а также предлагается скелетный экран.
Заинтересованные студенты могут добавить группу WeChat в конце статьи для совместного обсуждения~
1. Оптимизация FCP
Представлено в GoogleОриентированный на пользователяИз четырех показателей производительности страниц FP/FCP, вероятно, наиболее знакомы разработчикам:
Чтобы оптимизировать время рендеринга первого экрана и сократить время белого экрана, разработчики интерфейса придумали множество способов:
-
Ускорьте или уменьшите накладные расходы HTTP-запросов: использовать CDN для загрузки публичных библиотек, использовать сильный кеш и кеш согласования, использовать конвергенцию доменных имен, использовать Base64 вместо маленьких изображений, использовать запрос Get вместо запроса Post, установить
Access-Control-Max-AgeУменьшите количество предварительных запросов, используйте предварительную выборку браузера для предварительного анализа при переходе к другим доменным именам на странице или запросе ресурсов других доменных имен; - ленивая загрузка: ленивая загрузка второстепенных библиотек, нескладные изображения, ленивая загрузка компонентов SPA и т. д.;
- Уменьшите размер запрашиваемого контента: Включить сжатие Gzip на сервере, сжимать и объединять файлы JS и CSS, уменьшать размер файлов cookie и напрямую выводить обработанный HTML через SSR;
- Принцип рендеринга в браузере:оптимизациякритический путь рендеринга, чтобы свести к минимуму блокировку рендеринга JS и CSS;
- Оптимизация пользовательского опыта ожидания: Белый экран с индикатором загрузки,хризантема иллюстрация, каркасный экран и т.д.;
Что вам нужно ввести, так это оптимизировать экран скелета пользователя, чтобы дождаться опыта.Это можно рассматривать как обновленную версию исходной загрузки карты хризантем в сочетании с традиционным методом оптимизации первого экрана для оптимизации Применение для достижения хорошего эффекта.
2. Скелетный экран
Каркасный экран можно понимать какПустая версия страницы перед загрузкой данных, простой критический путь рендеринга. Вы можете посмотреть на реализацию скелетного экрана Facebook ниже.Вы можете видеть, что до того, как страница будет полностью отображена, пользователь увидит скелетную экранную страницу с простым стилем, который изображает общий фрейм текущей страницы, а затем каждый заполнитель в фактически отображается скелетный экран. Ресурсы полностью заменены. Во время этого процесса пользователь будет чувствовать, что контент постепенно загружается и будет представлен, что снижает беспокойство пользователя и делает процесс загрузки субъективно более плавным.
Вы можете взглянуть на следующие примеры изображений, первое — это скелетный экран, второе — изображение хризантемы, а третье — без оптимизации, вы можете видеть, что по сравнению с традиционным изображением хризантемы, содержимое будет отображаться плавно и не толково Резко, лучше опыт.
Сегодня эта технология широко используется в продуктах Facebook, Google, Alipay, Ele.me, Jianshu, Sina Weibo, Zhihu, Meituan, LinkedIn и других компаний. На форумах и в сообществах также есть много статей, в которых обсуждаются сценарии реализации и использования каркасных экранов.
3. Способ создания каркасного экрана
Основные способы создания каркасного экрана:
- Настройте каркас экрана для целевой страницы, написав HTML и CSS от руки.
Практика может относиться к, основная идея заключается в использованииvue-server-rendererЭтот плагин, изначально использовавшийся для рендеринга на стороне сервера, используется для преобразования
.vueФайл обрабатывается какHTML, вставьте его в точку монтирования шаблона страницы и завершите инъекцию скелетного экрана. Этот способ не очень цивилизованный, при смене стиля страницы скелет экрана приходится менять заново, что увеличивает стоимость обслуживания. Справочник по реализации стиля каркасного экранаCodePen - Используйте изображения в качестве каркасных экранов; Простое насилие, пусть студенты, изучающие пользовательский интерфейс, потратят немного усилий, ха-ха; этот метод принят на мобильной странице Xiaomi Mall, которая использует изображение Base64 в качестве каркаса экрана.
- Автоматически генерировать и автоматически вставлять статические каркасные экраны Этот способ аналогичен первому, но каркасный экран генерируется автоматически.Вы можете обратить внимание на плагин с открытым исходным кодом Ele.me.page-skeleton-webpack-plugin, он генерирует соответствующую страницу экрана скелета в соответствии с различными страницами маршрутизации в проекте и упаковывает страницу экрана скелета в соответствующую статическую страницу маршрутизации через веб-пакет, но следует отметить, что этот плагин в настоящее время поддерживает только маршрутизацию режима истории, не хеш-метод, и в настоящее время поддерживает только каркасный экран домашней страницы, и нет реализации частичного каркасного экрана на уровне компонентов.Автор сказал, что в будущем планируется реализовать его.(issue9).
Также есть плагинvue-skeleton-webpack-plugin, это изменит способ вставки каркасного экрана с ручного на автоматический.Принцип заключается в использовании функции предварительного рендеринга Vue во время построения, вставка отрендеренного HTML-фрагмента каркасного компонента экрана в точку монтирования шаблона HTML-страницы, и вставьте стиль вheadв этикетке. Этот плагин может задавать разные скелетные экраны для разных маршрутов одной страницы, а также может настраивать несколько страниц, при этом для удобства отладки при разработке скелетный экран записывается в роутер как маршрут, который довольно внимательный.
vue-skeleton-webpack-pluginссылка на конкретное использованиеvue-style-codebase, в основном сосредоточиться на нескольких файлах в каталоге сборки,Онлайн-демонстрацияОтрегулируйте скорость сети в Chrome DevTools, чтобыGast 3G / Slow 3GВы можете увидеть эффект ~
Большинство сообщений в Интернете имеют разную глубину и даже некоторые несоответствия. Следующие статьи являются кратким изложением процесса обучения. Если вы найдете какие-либо ошибки, пожалуйста, оставьте сообщение, чтобы указать ~
Ссылаться на:
- Встречайте Skeleton Screen [скелет загрузки экрана]
- Добавить каркасный экран в проект vue
- Сокращение времени выше раза, что такое концепция «прямо из»?
- Экран скелета страницы Vue
- Изучение мини-программ для создания каркасных экранов
- Практика обновления PWA от Ele.me
- Vue реализует использование многостраничного скелетного экрана плагина vue-skeleton-webpack-plugin.
PS: Всех приглашаю обратить внимание на мой публичный аккаунт [Front End Afternoon Tea], давайте работать вместе~
Кроме того, вы можете присоединиться к группе WeChat «Front-end Afternoon Tea Exchange Group», нажмите и удерживайте, чтобы определить QR-код ниже, чтобы добавить меня в друзья, обратите вниманиеДобавить группу, я заберу тебя в группу~