HTML5 Link Prefetching

2 хв. читання

Prefetching \- це техніка, коли ви доручаєте браузеру завантажувати деякі ресурси у фоновому режимі. Браузер використовує час простою для завантаження і кешування зазначених ресурсів. В результаті, коли користувачі відвідують попередньо обрані ресурси, браузер пропонує завантажити їх з кешу. Ви можете використовувати HTML5 link prefetching, щоб прискорити ваш веб-сайт в деяких випадках. Давайте розглянемо як це працює.

Link prefetching підтримується не в кожному браузері. Використовуйте цей інструмент для перевірки.

Тег prefetch

Ви можете вказати ресурси для попереднього завантаження з допомогою <link rel="prefetch">:

    <link href="http://mydomain.com/some-page.html" rel="prefetch">

Тег вказує браузеру попередньо завантажити http://mydomain.com/some-page.html. Крім повних сторінок, ви також можете завантажувати зображення та інші ресурси. Наступний фрагмент коду завантажує зображення:

    <link href="http://mydomain.com/some-image.png" rel="prefetch">

В цьому випадку браузер отримає тільки зображення і швидко надасть його користувачу за його запитом.

Mozilla також підтримує фонове завантаження ресурсів через link.

    Link: ; rel=prefetch

У цьому випадку Mozilla завантажить зазначений ресурс.

Цікаві факти про фонове завантаження

Prefetching можна використовувати для кешування крос-доменних ресурсів.

  • Згідно Firefox Docs, тільки http:// URL-адреси може бути попередньо завантажені.

  • Якщо ви завантажуєте щось у фоновому режимі, prefetching буде відкладено до завершення фонового завантаження.

  • Краще не використовувати цю техніку для агресивного кешування кожного ресурсу на вашому сайті.

Використовуйте prefetch уважно

Фонове завантаження - це прекрасний метод, щоб прискорити ваш веб-сайт, але ви повинні використовувати його обережно. Prefetching може збільшити навантаження на сервер. Ось два класичні випадки корисного використання цієї техніки.

  1. Якщо ви відображаєте різні сторінки у слайд-шоу, ви можете використати prefetching, щоб прискорити процес.

  2. Ви можете попередньо завантажити зображення та інші ресурси, які використовуються на всіх сторінках вашого сайту.

Я впевнений, що є багато варіантів використання. пропонуйте свої варіанти!

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.6K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: .some, метод some, кешування це