Требования: При запросе веб-сайта нужно загрузить много ресурсов, сетевые запросы также влияют на скорость рендеринга веб-страницы, когда пользователь кликает по операции для загрузки некоторых ресурсов, это может повлиять на пользовательский опыт, теперь быстрое развитие Интернета, пропускная способность и трафик уже не так дороги, как заранее заранее установить связь с целевым сервером?
Preconnect
Ключевое слово preconnect для свойств элементов — это подсказка браузеру, что пользователю могут понадобиться ресурсы целевого источника, чтобы браузер мог ими пользоватьсяУлучшите пользовательский опыт, заранее инициируя соединения с этим источником。
предсвязка позволяет браузеру выполнить ряд действий до официальной отправки HTTP-запроса на сервер, включая разрешение DNS, согласование TLS, TCP-рукопожатие, что устраняет задержку в ответ и экономит время пользователю.
Предсоединение — важный способ оптимизации для сокращения траектории круга во многих запросах — в некоторых случаях на сотни или тысячи миллисекунд задержки.
Вот пример использования preconnect для Google Fonts, когда, добавив запрос preconnect в fonts.gstatic.com, браузер сразу же инициирует запрос, который выполняется параллельно с CSS-запросом. В этом случае предсоединение исключает три RTT (время кругового рейса) из критического пути иСнижение задержки более чем на полсекунды。
Синтаксис таков:
Документация:Вход по гиперссылке виден.
DNS-prefetch использует DNS-prefetch
Ключевое слово dns-prefetch атрибута элемента предупреждает браузера о том, что пользователю может понадобиться ресурс от целевого источника, чтобы браузер мог улучшить пользовательский опыт, предварительно выполнив DNS-разрешение для этого источника.
Предвыборка DNS позволяет браузеру находиться на странице во время просмотраЗапускайте разрешение DNS в фоне。 Таким образом, разрешение DNS завершается при клике пользователя по ссылке, что позволяет снизить задержку. DNS-предвыборка заданного URL может быть выполнена, добавив rel="dns-prefetch" к свойствам тега ссылки, мы рекомендуем использовать Google fonts, Google Analytics и CDN.
«DNS-запросы имеют очень мало трафика, но задержка может быть высокой, особенно на мобильных устройствах. DNS, заданный с помощью предварительной выборки, может значительно снизить задержку в определённых ситуациях, например, когда пользователь кликает по ссылке. Иногда можно сократить даже задержку в одну секунду — Mozilla Developer Network»
Синтаксис таков:
Документация:Вход по гиперссылке виден.
Преднагрузка с преднагрузкой
Значение предзагрузки свойства element позволяет объявить запрос на извлечение в HTML, указывая ресурсы, которые странице понадобятся в ближайшее время, и вы хотите начать загрузку на ранних этапах жизненного цикла страницы, до начала основного механизма рендеринга браузера. Это гарантирует, что они станут доступны раньше и менее склонны блокировать рендеринг страницы, повышая производительность. Даже если имя содержит термин load, скрипт не загружается и не выполняется, а просто планирует загрузку и кэш с более высоким приоритетом.
Предзагрузка — это новый веб-стандарт, контролирующий загрузку конкретных ресурсов, обновление предварительной выборки субресурсов, которая была устарела в январе 2016 года. Эта команда может <link> использоваться в , например, <link rel="preload">. В целом, лучше использовать предзагрузку для загрузки самых важных ресурсов, таких как изображения, CSS, JavaScript и файлы шрифтов. Это не следует путать с предзагрузкой браузера, которая только предзагружает ресурсы, объявленные в HTML. Директива предзагрузки фактически преодолевает это ограничение и позволяет предварительно загружать ресурсы, определённые в CSS и JavaScript, а также решать, когда применять каждый ресурс.
Предзагрузка отличается от предварительной выборки тем, что она фокусируется на текущей странице и загружает ресурсы с высоким приоритетом, а предвыборка — на ресурсе, который будет загружаться на следующей странице, и загружается с низким приоритетом. Также обратите внимание, что предзагрузка не блокирует событие загрузки окна.
Можно предварительно загрузить множество различных типов контента. Возможные значения свойств таковы:
аудио: аудиофайл, обычно используемый для <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: Ресурс, который должен быть встроен <embed>в элемент.
fetch: Ресурс, к которому можно получить через запрос на выборку или XHR, например, ArrayBuffer или JSON-файл.
font: 字体文件。
изображение: файл изображения.
объект: Ресурс, который должен быть встроен <object>в элемент.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
worker: веб-работник JavaScript или общий работник.
Видео: видеофайл, обычно используемый для <video>.
Синтаксис таков:
Документация:Вход по гиперссылке виден.
|
Опубликовано 26.09.2022 21:45:08
|
|
|
|
Опубликовано 28.09.2022 8:54:26
|
