Сводка по оптимизации производительности внешнего интерфейса

Производительность является очень важной частью разработки интерфейса.В отличие от приложений, все ресурсы веб-страниц должны быть изначально переданы по сети.Поэтому то, как лучше выполнять сетевую передачу, имеет большое влияние на производительность интерфейса.Кроме того, есть части рендеринга браузера.оптимизация. В любом случае, как оптимизировать производительность фронтенда — вечная тема. Эта статья представляет собой буклет для чтенияПринцип и практика оптимизации производительности интерфейсаПосле добавления некоторых моих предыдущих идей, пожалуйста, обратитесь к буклету за более подробными принципами.

Оригинальная ссылка

Профиль:Оптимизация производительности внешнего интерфейса.xmind.zip

Обзор

С каких аспектов следует начать оптимизацию производительности? Мы должны сначала понять процесс открытия веб-страницы в браузере.

Браузер выполняет разрешение DNS на URL
Браузер устанавливает TCP-соединение с сервером
Браузер делает HTTP-запрос
Сервер возвращает HTTP-ответ
Браузер отображает страницу

Далее мы оптимизируем эти этапы по отдельности.

Браузер для разрешения DNS

DNS означает систему доменных имен. Это «адресная книга» Интернета, в которой записывается взаимосвязь между доменными именами и фактическими IP-адресами, а доменные имена предназначены для человеческой памяти. Каждый раз, когда мы находим веб-сайт, мы должны запрашивать IP-адрес сервера веб-сайта через DNS-серверы на всех уровнях, а затем мы можем получить доступ к серверу.

Разрешите DNS заранее

Необходимо использовать разрешение DNS заранееDNS prefetchТехнология. можно использовать в html

<link ref="dns-prefetch" href="">

form для предварительного разрешения определенного доменного имени, браузер выполнит этот процесс после загрузки страницы

Также вы можете использоватьX-DNS-Prefetch-Control: on/offЗаголовки ответа для управления переключателем подготовки. можно использовать в html

<meta http-equiv="x-dns-prefetch-control" content="on/off">

Для достижения этого эффекта или напрямую позвольте серверу вернуть заголовок ответа.

Установить TCP-соединение с сервером

Полное название TCP — протокол управления передачей. Ориентированный на соединение надежный транспортный протокол, расположенный на транспортном уровне модели OSI.

Браузер отправляет HTTP-запрос

уменьшить количество запросов

Консолидация ресурсов
- Используйте инструменты для упаковки
  
  Используйте такие инструменты, как webpack, для упаковки ресурсов js и css, чтобы избежать слишком большого количества файлов js или css.
  
  Однако мы также должны учитывать проблему, заключающуюся в том, что упакованный файл слишком велик, что необходимо всесторонне рассмотреть.
  
  Обычная практика в SPA заключается в том, что сначала загружаются общие файлы, извлеченные веб-пакетом, а затем файлы, связанные с маршрутом, загружаются по запросу.
- спрайт
  
  Изображение после объединения нескольких миниатюр.
  
  При его использовании используйте background-position для позиционирования.
тайник
- HTTP-кэш (объяснить подробно)
  - Сильный кеш
    
    Специфика сильного кеширования в том, что нет необходимости спрашивать у сервера, оно реализуется через expires и cache-control. Приоритет cache-control выше, чем expires, все они используются для указания времени истечения срока действия, expires — это отметка времени хранения, а cache-control использует max-age для указания относительного времени.
    
    No-cache управления кешем не запрашивает браузер, а напрямую запрашивает сервер (для согласованного кэширования). И no-store не использует никакой стратегии кэширования. s-maxage действует только на прокси-серверах.
    
    Если срок действия ресурса не истек, он будет использоваться напрямую.
  - Согласовать кеш
    
    Согласование кеша заключается в том, что после запроса к серверу сервер решает, следует ли вернуть новый ресурс или указать браузеру использовать старый ресурс.
    
    Каждый раз, когда сервер возвращает ресурс, он будет содержать временную метку Last-Modified, и каждый раз, когда сервер запрашивает временную метку If-Modified-Since, сервер определяет, соответствует ли время модификации ресурса этому времени.
    
    Проблема с last-modified заключается в том, что хотя время модификации файла на сервере изменилось, содержимое файла на самом деле не изменилось.
    
    Все добавленные ETag представляют собой уникальные идентификаторы, вычисляемые из содержимого файла. При запросе выводит значение с If-None-Match для оценки сервером
- Service Worker Cache
- Memory Cache & Disk Cache
  
  Они работают с http-кэшированием. Кэш памяти работает быстрее всего, но у него более короткий цикл. Образы Base64, меньшие js и css могут иметь больше шансов быть записанными в память. Однозначного вывода нет. Другие более крупные файлы js, css и изображения будут записываться непосредственно на жесткий диск для кэширования.
место хранения(объяснить подробно)
- cookie
  
  Максимальный размер файла cookie составляет 4 КБ, который обычно используется для хранения некоторого статуса входа пользователя.Каждый раз, когда делается запрос, браузер загружает файл cookie с тем же доменным именем.
- webStrorage
  
  Существует два типа веб-хранилищ, sessionStorage и localStorage, и их размер составляет от 5 до 10 МБ. Все они хранятся в виде пар ключ-значение. Разница между sessionStorage и localStorage заключается в жизненном цикле: после закрытия вкладки sessionStorage больше не существует, а localStorage сохраняется постоянно, если только активно не удаляется.
- indexDB
  
  "База данных" на стороне браузера, поскольку она в принципе бесполезна в настоящее время, пока не будет изучаться.

Уменьшить размер запроса

сжатие ресурсов
- Gzip
  
  При передаче можно включить сжатие gzip на стороне сервера, что позволяет эффективно уменьшить размер передаваемого файла, что видно в заголовке ответа content-encoding:gzip.
- сжатие кода
  
  Используйте некоторые инструменты сжатия кода, чтобы уменьшить размер файла, удалив бесполезные комментарии, пустые строки и укоротив имена.
- Сжатие изображения
  
  Изображения — это ресурс, который занимает много трафика на веб-странице. Если потеря некоторых цветов и пикселей на изображении не сильно влияет на работу пользователя, то изображение следует сжать.
  
  В то же время вы можете выполнять некоторые операции, такие как обрезка и уменьшение изображения, чтобы уменьшить размер изображения.
Используйте правильный формат для изображений (объяснить подробно)
- PNG
  
  Формат без потерь, общая степень сжатия, поддержка прозрачного фона, часто используется для прозрачных изображений или иконок и т. д.
- JPG
  
  Формат с потерями и лучшей степенью сжатия, часто используемый для сложных больших изображений, не поддерживает прозрачный фон.
- SVG
  
  Векторная графика, программируемая. Никаких искажений при всех разрешениях, но рендеринг сложной графики более требователен к производительности. Часто используется для простой графики.
- WEBP
  
  Формат без потерь, по сравнению с PNG и JPG, степень сжатия лучше, при этом поддерживается прозрачный фон. Единственным недостатком является отсутствие совместимости. Может использоваться в браузерах с хорошей совместимостью, используя JPG и PNG в качестве резервного механизма.

Сервер отправляет HTTP-ответ

Сокращение времени отклика

Использовать CDN

Полное название CDN — сеть доставки контента. Он опирается на пограничные серверы, развернутые в различных регионах, для достижения цели получения контента рядом с пользователями, снижения перегрузки сети и повышения скорости доступа пользователей и количества попаданий. Его основной ключевой технологией является технология хранения и распространения контента.

Сокращение времени начального рендеринга страницы

рендеринг сервера

Самая большая роль серверного рендеринга заключается в оптимизации SEO.

В то же время он также может ускорить скорость рендеринга первого экрана с точки зрения производительности, но это создаст определенную нагрузку на сервер, поэтому его нужно рассматривать комплексно.

Рендеринг страницы (объяснить подробно)

уменьшить блокировку

Блокировка JS

Когда синтаксический анализ html встречает js, он сначала загрузит и выполнит файл js, что должно предотвратить возникновение таких ситуаций, когда js работает с dom. Но мы, как операторы, можем искусственно указывать, какие элементы можно лениво загружать.

Укажите async или defer для тега скрипта, чтобы отложить скрипт.

async означает, что js не будет блокироваться, а будет выполняться сразу после завершения загрузки

defer начнет выполняться до того, как загрузка будет завершена, весь документ будет проанализирован, и будет запущено событие DOMContentLoaded.
Блокировка CSS

CSS будет блокировать HTML от рендеринга, но для того, чтобы отобразить интерфейс без какого-либо стиля перед пользователем, нам нужно продвинуть CSS

Сокращение времени рендеринга

Избегайте оплавления и перекраски

Перекомпоновка, также известная как перекомпоновка, — это процесс, в котором информация, такая как положение и размер элемента, каким-либо образом изменяется, что приводит к пересчету и отображению браузером. А перерисовка — это просто изменение стилей, таких как фон, цвет и т. д.

В любом случае это повлияет на производительность, поэтому мы хотим избежать циклических операций.

Уменьшите количество узлов рендеринга

ленивая загрузка

Для некоторых элементов, которые не находятся в представлении пользователя, мы можем отображать их без рендеринга, пока элемент не появится в представлении, а затем визуализировать.

Ленивая загрузка включает в себя загрузку и рендеринг изображений или элементов dom.

Повышение эффективности рендеринга

Уменьшить работу узлов dom

Движок рендеринга браузера и движок js разделены. Вполне возможно, что «трансграничная связь» между движком js и движком рендеринга непростая. Эти накладные расходы очень велики, поэтому мы должны стараться избегать этой операции.
Воспользуйтесь преимуществами цикла событий и асинхронных обновлений (объяснить подробно)