Czy kiedykolwiek zdarzyło Ci się chcieć powiadomić przeglądarkę o ważnej czcionce, skrypcie lub innym zasobie, który będzie potrzebny na stronie, bez opóźnienia zdarzenia onload? <link rel="preload"> umożliwia programistom stron internetowych wykonanie tych zadań przez użycie znanej składni elementów HTML z kilkoma kluczowymi atrybutami, które pozwalają określić dokładne działanie. Jest to standard w postaci projektu, który jest dostępny w ramach 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 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? Używany w tym przykładzie atrybut href powinien być znany deweloperom witryn internetowych, ponieważ jest to standardowy atrybut używany do określania adresu URL dowolnego połączonego zasobu.
Atrybut as jest prawdopodobnie nowością. Jest on 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 zasady Content Security Policy, 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 w Chrome 50 nie będzie obsługiwana wersja <link rel="subresource">.