Вимоги: При запиті на веб-сайт потрібно завантажити багато ресурсів, мережеві запити також впливають на швидкість рендерингу веб-сторінки, коли користувач натискає на операцію для завантаження деяких ресурсів, це може вплинути на користувацький досвід, а тепер швидкий розвиток Інтернету, пропускна здатність і трафік вже не такі дорогі, як заздалегідь завантажувати ресурси або встановити зв'язок із цільовим сервером?
Передз'єднання
Ключове слово 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 шрифтами, Google Analytics та CDN.
«DNS-запити мають дуже мало трафіку, але затримка може бути високою, особливо на мобільних пристроях. DNS, визначений за допомогою prefetching, може суттєво зменшити затримку в певних ситуаціях, наприклад, коли користувач натискає на посилання. Іноді навіть затримку в одну секунду можна зменшити — Mozilla Developer Network"
Синтаксис такий:
Документації:Вхід за гіперпосиланням видно.
Попереднє навантаження
Значення попереднього завантаження властивості element дозволяє оголосити запит на вибірку в HTML, вказуючи ресурси, які сторінці знадобляться найближчим часом, і ви хочете почати завантаження на ранньому етапі життєвого циклу сторінки, до того, як почнеться основний механізм рендерингу браузера. Це гарантує, що вони будуть доступні раніше і менш схильні блокувати рендеринг сторінки, покращуючи продуктивність. Навіть якщо ім'я містить термін load, скрипт не завантажується і не виконується, а просто планує завантаження та кешування з вищим пріоритетом.
Preload — це новий веб-стандарт, який контролює, як завантажуються конкретні ресурси, оновлення subresource prefetch, яке було скасовано у січні 2016 року. Цю команду можна <link> використовувати, наприклад, <link rel="preload">. Загалом, найкраще використовувати preload для завантаження найважливіших ресурсів, таких як зображення, CSS, JavaScript і файли шрифтів. Це не слід плутати з презавантаженням браузера, яке попередньо завантажує ресурси, оголошені лише в HTML. Директива попереднього завантаження фактично долає це обмеження і дозволяє попередньо завантажувати ресурси, визначені в CSS та JavaScript, а також вирішувати, коли застосовувати кожен ресурс.
Preload відрізняється від prefetch тим, що фокусується на поточній сторінці та завантажує ресурси з високим пріоритетом, тоді як Prefetch фокусується на ресурсі, який завантажується наступна сторінка, і завантажується з низьким пріоритетом. Також зверніть увагу, що попереднє завантаження не блокує подію завантаження вікна.
Можна попередньо завантажити багато різних типів контенту. Можливі як значення властивостей такі:
аудіо: аудіофайл, зазвичай використовується для <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: Ресурс, який має бути <embed>вбудований у елемент.
fetch: ресурс, до якого можна отримати через запит на fetch або XHR, наприклад, ArrayBuffer або JSON-файл.
font: 字体文件。
зображення: файл зображення.
об'єкт: Ресурс, який потрібно <object>вбудувати в елемент.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
worker: JavaScript веб-працівник або спільний працівник.
Відео: відеофайл, зазвичай використовується для <video>.
Синтаксис такий:
Документації:Вхід за гіперпосиланням видно.
|
Опубліковано 26.09.2022 21:45:08
|
|
|
|
Опубліковано 28.09.2022 08:54:26
|
