Всегда помните о производительности во время разработки.
Как браузер отображает контент:
- Отправьте запрос вместе с вашим IP-адресом в DNS Lookup (телефонная книга для Интернета).
- ISP (интернет-провайдеры) кэшировали DNS-информацию — на основе вашего IP-адреса рядом с вами
- Рукопожатие TCP: временное соединение, которое работает вместе для обмена информацией, такой как токены.
- Браузер отправляет запрос HTTP GET, TTFB, время до первого байта, сначала 14 килобайт, затем удваивается.
- Документ — дерево DOM, дерево CSSOM
- Контент, отправленный через 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 браузер может начать загрузку нового ресурса, как только он встретится, и весь процесс будет происходить значительно быстрее.