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

Jeff Posnick

Czy kiedykolwiek zdarzyło Ci się chcieć powiadomić przeglądarkę o ważnej czcionce, skrypcie lub i innych zasobów, które będą potrzebne stronie, bez opóźnienia onload zdarzenie? <link rel="preload"> daje programistom stron internetowych uprawnienia do wykonywania tylko tych czynności Przy użyciu znajomej składni elementów HTML z kilkoma kluczowymi atrybutami dokładne określenie zachowania. Jest wersja robocza standardu objętego dostawą w ramach Wersja Chrome 50.

Zasoby wczytywane przez <link rel="preload"> są przechowywane lokalnie w przeglądarce, i są skutecznie obojętne, dopóki nie pojawią się przywoływane w obiekcie DOM, JavaScript lub CSS. Oto przykład potencjalnego użycia, w którym plik skryptu jest wstępnie wczytywana, ale nie jest wykonywana od razu, jak gdyby została które są uwzględniane 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? Zastosowany w tym przykładzie atrybut href powinien: nie musi być dobrze znany programistom stron internetowych, ponieważ jest to standardowy atrybut służący do określania adres URL dowolnego zasobu, do którego prowadzi link.

Atrybut as to może być jednak dla Ciebie zupełnie nowa i jest używana w kontekście elementu <link> aby przekazać przeglądarce więcej informacji miejsce docelowe z żądania wstępnego wczytywania. Te dodatkowe informacje zapewniają, przeglądarka ustawi odpowiednie nagłówki żądań, priorytet żądania, a także zastosuje odpowiednie zasady Content Security Policy. dyrektywy, które można zastosować dla właściwego kontekstu zasobów.

Dowiedz się (dużo) więcej

Yoav Weiss napisał przewodnika do użycia: <link rel="preload">. Jeśli Cię to zaciekawiło i chcesz zacząć z niego korzystać na własnych stronach, zalecam przeczytanie artykułu na ten temat, między korzyściami i przypadkami użycia kreacji.

<link rel="preload"> zastępuje <link rel="subresource">, która ma poważnych błędach i wadach, który nigdy nie został wdrożony w przeglądarkach innych niż Chrome. Dlatego Chrome 50 usunie obsługę argumentu <link rel="subresource">