Priorytetyzacja zasobów za pomocą linku rel='preload'

Jan Posnick

Czy kiedykolwiek zdarzyło Ci się poinformować przeglądarkę o ważnej czcionce, skrypcie lub innym zasobie, który będzie potrzebny stronie, nie opóźniając jej zdarzenia onload? Parametr <link rel="preload"> pozwala programistom stron internetowych wykorzystać do tego celu znanej składni elementów HTML z kilkoma kluczowymi atrybutami, które określają dokładny sposób działania. To wersja robocza standardu udostępniana w ramach wersji Chrome 50.

Zasoby wczytywane przez <link rel="preload"> są przechowywane lokalnie w przeglądarce i są bezwładne, dopóki nie zostaną odwołane w DOM, JavaScript lub CSS. Oto jeden z potencjalnych przypadków użycia, w którym plik skryptu jest wstępnie wczytywany, ale nie uruchamiany od razu, jakby to było, 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? Użyty w tym przykładzie atrybut href powinien być znany deweloperom stron internetowych, ponieważ jest to standardowy atrybut używany do określania adresu URL każdego linku zasobu.

Atrybut as prawdopodobnie jest dla Ciebie nowością. Jest on używany w kontekście elementu <link>, aby przekazać przeglądarce więcej informacji na temat miejsca docelowego, w którym wysyłane jest żądanie wstępnego wczytywania. Te dodatkowe informacje dają pewność, że przeglądarka ustawi odpowiednie nagłówki żądań i priorytet żądań, a także zastosuje odpowiednie dyrektywy Content Security Policy, które mogą obowiązywać w przypadku właściwego kontekstu zasobu.

Więcej informacji

Yoav Weiss opracował kompletny przewodnik po korzystaniu z <link rel="preload">. Jeśli ciekawi Cię ten temat i chcesz zacząć stosować go na własnych stronach, polecam lekturę tego artykułu. Znajdziesz w nim więcej informacji o jego zaletach i przypadkach użycia.

Komponent <link rel="preload"> zastępuje wersję <link rel="subresource">, która ma wiele błędów i wad. Nigdy nie została zaimplementowana w przeglądarkach innych niż Chrome. W związku z tym Chrome 50 wycofuje obsługę wersji <link rel="subresource">.