Всегда помните о производительности во время разработки.

Как браузер отображает контент:

  1. Отправьте запрос вместе с вашим IP-адресом в DNS Lookup (телефонная книга для Интернета).
  2. ISP (интернет-провайдеры) кэшировали DNS-информацию — на основе вашего IP-адреса рядом с вами
  3. Рукопожатие TCP: временное соединение, которое работает вместе для обмена информацией, такой как токены.
  4. Браузер отправляет запрос HTTP GET, TTFB, время до первого байта, сначала 14 килобайт, затем удваивается.
  5. Документ — дерево DOM, дерево CSSOM
  6. Контент, отправленный через CDN (сеть доставки контента) с сервера на провайдера

Шаблон PRPL — используется для создания масштабируемых, быстрых современных веб-приложений с удобным пользовательским интерфейсом.

  • Нажимайте (или предварительно загружайте) самые важные ресурсы
  • Отрисовка исходного маршрута как можно скорее
  • Предварительно кэшировать оставшиеся активы
  • Ленивая загрузка других маршрутов и некритических ресурсов

Оптимизация кода

Как вы обычно повышаете производительность?

  • используйте uglify и minify, чтобы уменьшить размер пакета
  • используйте ленивую загрузку, чтобы увеличить скорость загрузки страницы.
  • используйте сеть доставки контента для повышения скорости загрузки.
  • React.lazy и React.suspense поддерживают ленивую загрузку с помощью веб-пакета.
  • React.memo Логика shouldComponentUpdate для уменьшения ненужного повторного рендеринга, повышения производительности рендеринга компонентов
  • Делегирование событий (позволяет избежать добавления прослушивателей событий на определенные узлы)

Оптимизация JavaScript

  • Минимизируйте, чтобы уменьшить размер
  • Uglify для повышения эффективности кода
  • Разделите код и по возможности используйте модули ESM.

Идеальная загрузка JavaScript

  • для начала загрузите только критически важные JS, чтобы запустить инфраструктуру приложения.
  • далее загружаем необходимые JS модули для функциональности
  • условно импортировать модули ESM только при необходимости (ленивая загрузка)

Загрузка JavaScript: рекомендации

  • поместите тег ‹script› в ‹head›
  • использовать асинхронность по умолчанию, загружая JS и не нужно ждать, пока сначала будет создан весь DOM
  • используйте сценарии отсрочки, которым требуется полностью построенный DOM, при этом загружая сценарий асинхронно без блокировки рендеринга. А затем мы буквально откладываем выполнение JavaScript до завершения синтаксического анализа HTML.

Разница между <script>, <script async> и <script defer>.

<script>

  • Разбор HTML блокируется при чтении скрипта.
  • сценарий извлекается и выполняется немедленно, а синтаксический анализ HTML возобновляется после выполнения сценария.
  • Если поставить тег script в конец, JS-скрипт не сможет быть загружен, пока браузер не прочитает его.

<script async>

  • параллельно с анализом HTML и выполняется, как только он становится доступным (возможно, до завершения анализа HTML)

<script defer>

  • обеспечивает загрузку всего тела перед запуском JavaScript
  • параллельно с синтаксическим анализом HTML и выполняется после завершения синтаксического анализа страницы, гарантируя, что HTML будет полностью проанализирован перед выполнением.
  • Нет большой разницы в том, чтобы поставить обычный <script> в конце <body>.

Минимизация и сокращение JavaScript

  • сделайте свой код красивее, сделайте его более эффективным на этапе компиляции
  • удалить ненужный код
  • переименовать в более производительную версию для машины
  • экономить время на загрузке
  • нужен человекочитаемый код, но переводите в машиночитаемый код
  • npm terser — сделать js как можно меньше

Отложенная загрузка модулей JavaScript с помощью import()

  • обещать
  • асинхронная функция ожидания
  • подключение внешней библиотеки

Что такое JavaScript Webpack?

Сборщик статических модулей для фронтенд-разработки JS-приложений — › свяжите ваши стили (свяжите ваши файлы JavaScript вместе) — он берет весь код из вашего приложения и делает его пригодным для использования в веб-браузере.

Примеры веб-пакетов

  • HMR (горячая замена модуля): обновление страницы напрямую без полной перезагрузки страницы — более эффективная среда разработки и текущее состояние не потеряется.
  • Tree Shaking: избавьтесь от ненужного кода
  • Разделение кода: правильно разделите модули в соответствии с графом зависимостей.
  • Ленивая загрузка: разделяйте код по логическим точкам останова и загружайте определенные части дерева компонентов только тогда, когда они используются.

Аналогичная комплектация по сравнению с модулями:Snowpack, Parcel, Rollup

Динамическое программирование (кэширование — хранение активов)

  • Кэш хранит функцию для повторного использования
  • Cache-Control: инструкция кэширования запросов и ответов;
  • Redis: хранилище структуры данных в памяти (сервер), используемое в качестве постоянной базы данных NoSQL, кэша и брокера сообщений.

Кэширование на стороне сервера

  • Жизненно важно для контента, отображаемого на стороне сервера из системы управления контентом (CMS), такой как WordPress, Drupal и т. д.
  • Кэширование динамических ресурсов означает, что серверу не нужно генерировать одни и те же ресурсы для каждого запроса.
  • Остерегайтесь динамических обновлений активов

Кэширование браузера

  • браузеры кэшируют файлы автоматически
  • вы можете управлять кэшированием браузера с помощью заголовков HTTP
  • стратегии кэширования теперь часто контролируются CDN
  • разделение пакетов JS и CSS на несколько файлов означает, что обновления не требуют повторной загрузки и повторного кэширования больших файлов.

Автоматическое кэширование браузера

  • CSS
  • JavaScript
  • Изображений

Кэширование CDN

Расширьте стратегию кэширования, предоставляемую вашим хостом и CDN.

  • CDN фактически являются внешним кэшированием для активов.
  • Подавать кешированные версии сайта с ближайшего к посетителю сервера
  • Пограничные вычисления перемещают динамическое создание активов в CDN для более быстрого и удобного обслуживания.

CDN — это сеть доставки контента, подключенная к вашему серверу хостинга.

  • Без CDN каждый посетитель должен получать файлы с вашего сервера.
  • При использовании CDN CDN захватывает копию вашего сайта, кэширует ее и распределяет по всем своим распределенным серверам, а посетитель получает копию с любого ближайшего к ним сервера CDN, таким образом , пользователь получает гораздо более быстрый доступ к вашему сайту, а нагрузка на вашего хостинг-провайдера гораздо меньше.

Например, Cloudflare, популярный CDN, можно настроить на автоматическое создание и сохранение WebP-версий всех изображений на вашем сайте, а затем предоставлять их браузерам, поддерживающим этот формат изображения.

Оптимизация доставки

Сжимайте данные с помощью Gzip и Brotli (Brotli занимает больше времени, чем Gzip)

Ссылка: предварительная загрузка, предварительное подключение, предварительная выборка, предварительная визуализация

  • preload — загружает исходники с высоким приоритетом, которые необходимо загрузить быстрее;
  • preconnect — если для ускорения рукопожатия требуются какие-то ресурсы, используйте их для уменьшения задержки;
  • prefetch — загружает младшие априорные ресурсы и кеш;
  • DNS-prefetch — уменьшает задержку разрешения доменных имен до запроса ресурсов;
  • prerender — аналогично prefetch + кеширует всю страницу;

Предварительная загрузка и предварительная выборка

  • Когда мы знаем, что браузеру понадобится ресурс, мы можем предварительно загрузить этот ресурс в кеш браузера до того, как он понадобится браузеру.
  • предварительная выборка: более низкий приоритет

Узкие места

Безусловно, самым большим узким местом для любого современного сайта или службы является IMAGES.

Повысить производительность изображения:

  • оптимизация изображений для уменьшения размера их файлов
  • использование адаптивной разметки изображений
  • ленивая загрузка изображений, поэтому они загружаются только тогда, когда они действительно нужны браузеру
  • используйте меньше изображений или не используйте изображения вообще
  • Кэш: используйте CDN (сеть доставки контента) для распространения статических данных;
  • Ленивая загрузка изображений и видео — используйте <img loading="lazy"/> или библиотеки, такие как lazysizes;

Параметры формата изображения

  • JPG/JPEG — фото, сложная графика
  • PNG — сложная графика, прозрачность
  • GIF — избегайте анимации, вместо этого используйте видео.
  • SVG — масштабируемая графика, иконки, графики (простые)
  • WebP — фото, прозрачность

Автоматическая оптимизация изображений

  • нпм — изображениемин
  • npm-squooch cli
  • нпм — резкий

от HTML до CSS и JavaScript, а изображения и все остальное можно и нужно максимально сжимать и оптимизировать, чтобы сделать физическую передачу данных как можно меньше.

HTTP/2 и мультиплексирование

HTTP/1.1: синхронная загрузка (медленная), должны быть параллельные подключения к серверу, чтобы отключить сервер => блокировка начала строки, когда первый файл, HTML-файл, сдерживает остальные файлов от скачивания.

Это также создает огромную нагрузку на интернет-соединение и инфраструктуру, как на браузер, так и на сервер, потому что теперь вы работаете с шестью соединениями вместо одного соединения.

HTTP/2, у нас есть так называемое мультиплексирование. Браузер может загружать множество отдельных файлов одновременно по одному соединению, и каждая загрузка не зависит от других. Это означает, что с HTTP/2 браузер может начать загрузку нового ресурса, как только он встретится, и весь процесс будет происходить значительно быстрее.