Тема
- #Загрузка страницы
- #Загрузка ресурсов
- #Оптимизация браузера
Браузеры обычно выполняют рендеринг в следующем порядке.
- Разбор HTML (сверху вниз, head -> body):
1. Разбор HTML и создание DOM
2. Загрузка и применение CSS-файлов (блокировка рендеринга)
3. Загрузка и выполнение скриптов (блокировка рендеринга)
4. Рендеринг содержимого секции <body> (изображения, текст и т.д.)
Управление приоритетом ресурсов браузера позволяет оптимизировать скорость загрузки страницы.
Ниже я хочу записать основные атрибуты, которые могут улучшить порядок рендеринга.
- JavaScript: async, defer, module
- CSS: preload, media
- Изображения: loading="lazy", srcset, sizes
- Другие: prefetch, preconnect, dns-prefetch
JavaScript
async: загружается параллельно с разбором HTML и выполняется сразу после загрузки. Если какой-либо ресурс страницы связан с этим JS, лучше убрать атрибут async.
defer: загружается параллельно с разбором HTML и выполняется после полного завершения разбора HTML. = Порядок гарантирован. Если необходимо выполнить скрипт после полной отрисовки HTML, лучше добавить атрибут defer.
Браузер по умолчанию сначала загружает HTML, но если в теге head есть скриптовый источник, рендеринг блокируется. Добавление двух вышеуказанных атрибутов позволяет предотвратить блокировку рендеринга HTML.
CSS
stylesheet: значение по умолчанию. Является элементом, блокирующим рендеринг, и используется, если CSS обязательно должен быть загружен.
preload: предварительно загружает без блокировки рендеринга. При возникновении события onload изменяется на stylesheet и применяется стиль.
media: Рендеринг выполняется, если условие размера экрана выполняется.
Изображения
loading="lazy" : Загрузка изображения происходит, когда оно отображается на экране. (когда положение прокрутки находится рядом с элементом, в котором находится изображение)
srcset: Выбирает оптимальное изображение в соответствии с размером экрана. (Оптимизация размера изображения)
sizes : Предоставляет подсказку браузеру для выбора подходящего изображения в зависимости от размера видового окна.
В случае с последним тегом img, когда есть изображения шириной 480 пикселей и 1024 пикселя, атрибут size указывает, что при max-width 600 пикселей отображается изображение 480 пикселей, а в остальных случаях - изображение 1024 пикселя.
* В электронной коммерции на одной странице может быть десятки изображений, поэтому уменьшение размера изображений дает значительный эффект.
Например, на странице результатов поиска есть не менее 20 изображений, и поиск выполняется 100 000 раз в день...
Другие
rel="prefetch": предварительно загружает ресурсы перед переходом на страницу, чтобы улучшить скорость загрузки на следующей странице.
rel="preconnect": предварительно устанавливает сетевое соединение для определенной ссылки. (большие видео, шрифты и т.д.)
rel="dns-prefetch": выполняет поиск DNS внешних ресурсов для более быстрой загрузки ресурсов. (в основном внешние CDN)
* preconnect против dns-prefetch
preconnect включает TCP-соединение (DNS - TCP handshake - TLS handshake), поэтому это тяжелая операция, занимающая ресурсы браузера. Используется, когда необходимо быстро загрузить внешний ресурс. (очень важный ресурс, и быстрая отрисовка этого ресурса важна)
dns-prefetch выполняет только поиск DNS, поэтому это более легкая операция. Подходит для неважных ресурсов, которые будут загружены позже.
Комментарии0