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. To wersja robocza standardu, który jest wysyłany w ramach wersji Chrome 50.
Zasoby wczytywane przez <link rel="preload"> są przechowywane lokalnie w przeglądarce i w praktyce pozostają obojętne, dopóki nie odwołują się do nich w DOM, JavaScript lub CSS. Oto przykład potencjalnego zastosowania, w którym plik skryptu jest wstępnie wczytywany, ale nie jest wykonywany od razu, jak gdyby został on 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ć dobrze znany programistom stron internetowych, ponieważ to standardowy atrybut używany do określania adresu URL każdego połączonego zasobu.
Atrybut as jest prawdopodobnie nowy, ale jest używany w kontekście elementu <link>, aby udostępnić przeglądarce więcej informacji o miejscu docelowym żądania wstępnego wczytywania. Te dodatkowe informacje zapewniają, że przeglądarka ustawi odpowiednie nagłówki żądań i priorytety żądań, a także zastosuje odpowiednie dyrektywy Content Security Policy, które mogą być stosowane dla właściwego kontekstu zasobów.
Dowiedz się (dużo) więcej
Yoav Weiss napisał przewodnik po korzystaniu z tagu <link rel="preload">. Jeśli zainteresował Cię ten pomysł i chcesz zacząć go używać na własnych stronach, przeczytaj artykuł z jego pomocą, aby dowiedzieć się więcej o jego zaletach i zastosowaniach kreatywnych.
Do widzenia: <link rel="subresource">
<link rel="preload"> zastępuje <link rel="subresource">, który ma znaczące błędy i wady, dlatego nigdy nie został zaimplementowany w przeglądarkach innych niż Chrome. W związku z tym Chrome 50 wycofuje obsługę <link rel="subresource">.