Czy kiedykolwiek chciałeś/chciałyś poinformować przeglądarkę o ważnym czcionce, skrypcie lub innym zasobie, którego potrzebuje strona, bez opóźniania zdarzenia onload strony? <link rel="preload"> daje twórcom stron internetowych możliwość tworzenia takich elementów za pomocą znanej składni elementu HTML z kilkoma kluczowymi atrybutami, które określają ich działanie. Jest to standard w postaci projektu, który jest dostarczany w ramach wersji Chrome 50.
Zasoby wczytywane za pomocą <link rel="preload"> są przechowywane lokalnie w przeglądarce i są nieaktywne, dopóki nie zostaną wywołane w DOM, JavaScript lub CSS. Oto przykład zastosowania, w którym plik skryptu jest wstępnie wczytany, ale nie jest wykonywany natychmiast, jak to by było w przypadku, gdyby został uwzględniony w tagu <script> w DOM.
<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
// Later on, after some condition has been met, we run the preloaded
// JavaScript by inserting a <script> tag into the DOM.
var usedLaterScript = document.createElement('script');
usedLaterScript.src = 'used-later.js';
document.body.appendChild(usedLaterScript)
</script>
Co się tutaj dzieje? Atrybut href użyty w tym przykładzie powinien być znany deweloperom stron internetowych, ponieważ jest to standardowy atrybut używany do określania adresu URL dowolnego połączonego zasobu.
Atrybut as jest prawdopodobnie nowością, ale jest używany w kontekście elementu <link>, aby przekazać przeglądarce więcej informacji o miejscu docelowym żądania wstępnego wczytywania. Te dodatkowe informacje sprawiają, że przeglądarka ustawia odpowiednie nagłówki żądania, priorytet żądania, a także stosuje odpowiednie dyrektywy Zasad bezpieczeństwa treści, które mogą być stosowane w ramach odpowiedniego kontekstu zasobu.
Dowiedz się więcej
Yoav Weiss napisał pełny przewodnik po <link rel="preload">. Jeśli chcesz zacząć używać tej funkcji na swoich stronach, przeczytaj ten artykuł, aby dowiedzieć się więcej o jej zaletach i możliwościach kreatywnych.
Do widzenia<link rel="subresource">
<link rel="preload"> zastępuje <link rel="subresource">, który zawierał poważne błędy i wady oraz nigdy nie został wdrożony w przeglądarkach innych niż Chrome. W związku z tym Chrome 50 nie obsługuje <link rel="subresource">.