1просмотров
1.8%от подписчиков
28 марта 2026 г.
Score: 1
Оптимизация / Resource Delivery / Другие сетевые оптимизации Обязательно знать для: ⭐⭐middle⭐⭐ Современные сетевые протоколы и техники предварительной загрузки позволяют дополнительно ускорить загрузку ресурсов. HTTP/2 и HTTP/3 обеспечивают мультиплексирование и параллельную загрузку, а prefetch/preconnect/preload дают браузеру подсказки о приоритетных ресурсах. Ключевые моменты:
1. HTTP/2 и HTTP/3: мультиплексирование (параллельная загрузка ресурсов в одном соединении), приоритизация запросов, уменьшение overhead 2. Prefetch / Preconnect / Preload: предварительная загрузка ресурсов, prefetch для будущих страниц, preconnect для установки соединения, preload для критичных ресурсов 3. Reducing round-trips: уменьшение количества запросов (объединение файлов, sprites), использование HTTP/2 для параллельной загрузки, DNS prefetch 4. Приоритизация ресурсов: fetchpriority="high" для критичных ресурсов, defer/async для скриптов, rel="preload" для важных ресурсов HTTP/2 и HTTP/3 решают проблему ограничений HTTP/1.1, где можно было загружать только один ресурс за раз по одному соединению. HTTP/2 позволяет загружать множество ресурсов параллельно в одном соединении, а HTTP/3 использует QUIC протокол для ещё большей эффективности. Prefetch, preconnect и preload дают браузеру подсказки о том, какие ресурсы нужно загрузить заранее, что ускоряет отображение страницы. Примеры:
Preload, Preconnect, Prefetch
<head> <!-- Preload: загрузить критичный ресурс сразу --> <link rel="preload" as="font" href="/fonts/main.woff2" crossorigin> <link rel="preload" as="image" href="/hero.webp"> <link rel="preload" as="script" href="/critical.js"> <!-- Preconnect: установить соединение заранее --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://api.example.com"> <!-- Prefetch: загрузить для будущей страницы --> <link rel="prefetch" href="/next-page.html"> <link rel="prefetch" as="script" href="/next-page.js"> <!-- DNS prefetch: резолвить DNS заранее --> <link rel="dns-prefetch" href="https://cdn.example.com">
</head> #middle
#optimization
#resource_delivery
#performance #network #http2 #http3 #preload #prefetch #optimization 📖 Читать полную версию на сайте