Для чого варто використовувати попередню завантаження

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

Статті по цій темі на SmashingMagazine:

Попереднє завантаження ( ) Це декларативна директива вибірки.

Хіба у нас немає такої можливості?

Щось схоже є. з'явився в інтернеті давно і підтримується в більшості браузерів. Деякий час назад в Chrome з'явився і . Так що нового в предзагрузкі? Чим вона відрізняється від інших директив? Вони ж усі говорять браузеру про вибірку ресурсів, чи не так?

Так, це так, але між ними є значні відмінності. Ці відмінності як раз і вимагають появи нової директиви, що вирішує завдання, непосильні старим.

Префетчінг ( ) Це директива, що повідомляє браузеру про необхідність вибірки ресурсу, який знадобиться при переході на наступну сторінку. Це означає, що вибірка ресурсу буде відбуватися з вкрай низьким пріоритетом (адже браузер знає, що ресурси для поточної сторінки важливіші, ніж ресурси, які знадобляться на наступній). Це означає, що основне використання префетчінга це прискорення завантаження наступної сторінки, а не поточної.

Субресурс ( ) Був запланований для вирішення завдань на поточній сторінці, але в більшості питань він виявляється неефективним. Так як розробник не можемо встановити пріоритет завантаження ресурсів, браузер (точніше Chrome і браузери на основі Chromium) завантажує їх з досить низьким пріоритетом, в більшості випадків це означає, що запит до ресурсу займає приблизно таку ж кількість часу, як і без використання субресурса.

Як можна домогтися кращої предзагрузкі?

Предзагрузкі створена для роботи на поточній сторінці, також як субресурс, але з одним невеликим, але важливим відзнакою. У предзагрузкі є атрибут as. дозволяє браузеру робити речі, які неможливі з префетчінгом і субресурсом:

• Браузер може задати правильний пріоритет ресурсів, відповідно до якого вони будуть завантажуватися - не буде ні затримки важливих ресурсів, ні наполегливої ​​викачування другорядних.
• Браузер може забезпечити відповідність ресурсу директивам політики безпеки контенту і не виходити на ненадійний сервер.
• Браузер може відправити відповідні заголовки Accept на основі типу ресурсу (наприклад, image / webp при вибірці зображень).
• Браузер знає тип ресурсу і тому може визначити, чи може він використовуватися на випадок повторних запитів до того ж ресурсу.

Предзагрузкі також відрізняється тим, що в ній є функціональне подія onload (як мінімум в Chrome ця подія не працює для двох інших значень rel).

Також предзагрузкі не блокує подія вікна onload. зрозуміло, за винятком випадків, коли предзагружаемий ресурс запитує інший ресурс, який блокує цю подію.

Поєднання всіх цих характеристик реалізує цілий спектр можливостей, раніше нам недоступних.

Розглянемо їх окремо.

Завантаження "пізно-які виявляються" ресурсів

Тепер у вас є кошти сказати браузеру: "Ей, браузер! Ось цей ресурс тобі обов'язково знадобиться, тому завантажуй його зараз ".

У коді ця фраза виглядає наступним чином:

Атрибут as вказує тип викачуваного ресурсу, у нього можуть бути такі значення:

Повний список значень є в специфікації.

Пропуск атрибута as або завдання некоректного значення еквівалентно XHR-замовлення, в якому браузер не знає, що він вибирає, внаслідок чого вибірка відбувається з низьким пріоритетом.

Рання завантаження шрифтів

Однією з популярних різновидів "пізно виявляються критичних ресурсів" є веб-шрифти. З одного боку, в більшості випадків вони критичні для рендеринга тексту на сторінці (поки у нас не будуть реалізовані властивості font-display). З іншого, шрифти знаходяться глибоко в надрах CSS і навіть якщо браузерні предзагрузчік розпарсити CSS, він не може бути впевнений в тому, що вони знадобляться, поки не розбереться з прив'язкою викликають їх селектор до конкретних вузлів DOM. Хоча в теорії браузери повинні з цим розбиратися, жоден з них не робить цього, бо як це призводило б до помилкових Завантаженнями у випадках, коли стильові декларації переписуються в наступних рядках CSS.

Загалом, все складно.

Але ми могли б обійти всю цю складність включивши директиву предзагрузкі шрифтів, які точно вам знадобляться. наприклад:

Один момент слід уточнити: ви повинні додати атрибут crossorigin при вибірці шрифтів, так як вона проводиться в анонімному режимі CORS. Так, навіть у тому випадку, якщо шрифти знаходяться на тому ж хості, що і сторінка. На жаль.

Атрибут type забезпечує предзагрузкі цього ресурсу тільки в тих браузерах, які підтримують цей тип шрифту. На даний момент попередня завантаження підтримується тільки в Chrome і він прекрасно підтримує WOFF2, але в майбутньому предзагрузкі може з'явитися і в інших браузерах і ми не можемо гарантувати, що в них буде підтримка WOFF2. Те ж саме відноситься і до решти типам ресурсів, які ви попередньо завантажуєте і у яких немає стовідсоткової підтримки в браузерах.

Динамічне завантаження без запуску

Наступний цікавий сценарій, який стає доступним, це скачування потрібного вам ресурсу, який ви не збираєтеся відразу запускати. Наприклад, в разі, якщо ви хочете виконати скрипт в певний період існування сторінки, не маючи контролю над скриптом (тобто без можливості додати функцію runNow ()).

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

Так що ви можете зробити?

Без попереднього завантаження небагато. В окремих випадках ви могли виконати вміст скрипта за допомогою eval (). але це не завжди можливо і тягне побічні ефекти. Але з попередньою завантаженням все можливо!

Ви можете запустити це на самому початку завантаження сторінки, до тієї точки, коли ви хочете виконати скрипт (але як тільки ви будете впевнені, що цей код не буде заважати завантаженні інших, більш критичних ресурсів). Тепер, коли вам треба його запустити, просто вставте тег script і цього вистачить.

Асинхронний завантажувач в розмітці

Інший крутий хак це використання обробника onload для створення якоїсь подібності асинхронного завантажувача прямо в розмітці. Скотт Джел першим експериментував з цим, як до частини своєї бібліотеки loadCSS. Ми можемо використовувати наступний короткий код:

І цього достатньо, щоб отримати асинхронну завантаження стилів. Скотт також зробив сторінку, яка демонструвала б цю можливість.

Це також працює і з асинхронними скриптами.

Але ви скажете, що у нас вже є