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 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ą, 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 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 można korzystać z funkcji<link rel="subresource">.