Jak działa link rel = "preload"?

Question

Nowa wersja Chrome dodano obsługę <link rel="preload">. Opublikowali wiele informacji z odniesieniami do oryginalnej dokumentacji. Czy ktoś może podać proste wyjaśnienie, jak to działa i jaka jest różnica w porównaniu do przypadku bez numeru rel="preload".

Answer 1

W swojej najbardziej podstawowej formie ustawia link, który ma rel="preload" na wysoki priorytet. W przeciwieństwie do prefetchowania, które przeglądarka może zdecydować, czy to dobry pomysł, preload zmusi przeglądarkę, aby to zrobić.

=== Spojrzenie bardziej dogłębne: ===

Oto urywek z W3C

Wiele aplikacji wymaga precyzyjną kontrolę nad tym, kiedy zasoby są idące, przetwarzane, i zastosowane do dokumentu. Na przykład ładowanie i przetwarzanie niektórych zasobów może zostać wstrzymane przez aplikację w celu zmniejszenia rywalizacji zasobów i zwiększenia wydajności początkowego obciążenia. Takie zachowanie jest zwykle osiągane przez przeniesienie zasobów do niestandardowej logiki ładowania zasobów zdefiniowanej przez aplikację - tj. Pobieranie zasobów jest inicjowane za pomocą wstrzykiwanych elementów lub przez XMLHttpRequest, gdy spełnione są określone warunki aplikacji.

Istnieją jednak również przypadki, w których niektóre zasoby muszą zostać pobrane jak najwcześniej, ale ich logika przetwarzania i wykonywania to , z zastrzeżeniem specyficznych wymagań aplikacji - np. zależność zarządzanie, ładowanie warunkowe, gwarancje zamawiania i tak dalej. Obecnie nie można dostarczyć tego zachowania bez kary za wykonanie usługi .

Zgłaszanie zasobu za pomocą jednego z istniejących elementów (na przykład skryptu img, ) łączy pobieranie i wykonywanie zasobów. Podczas gdy aplikacja może chcieć pobrać, ale opóźnić wykonanie zasobu , dopóki nie zostanie spełniony pewien warunek. Pobieranie zasobów za pomocą XMLHttpRequest do unikanie powyższych zachowań wiąże się z poważną karą za wydajność, ukrywając deklaracje zasobów z DOM DOM agenta użytkownika i wstępnie ładując analizatory składni. Pobrane źródła są wywoływane tylko po wykonaniu odpowiedniego kodu JavaScript , który ze względu na dużą liczbę skryptów blokujących na większości stron powoduje znaczne opóźnienia i wpływa na wydajność aplikacji. Słowo wstępnego ładowania słowa kluczowego na elementach łącza dostarcza deklaratywnego prymitywu pobierania , który rozwiązuje powyższy przypadek użycia inicjowania pobierania i oddzielania pobierania od wykonania zasobu. Jako takie, słowo kluczowe wstępnego ładowania służy jako prymitywu niskiego poziomu, który umożliwia aplikacjom tworzenie niestandardowych zachowań ładowania i wykonywania zasobów, bez ukrywania zasobów od agenta użytkownika i ponoszenia opłat z powodu opóźnień o wartości .

Na przykład, aplikacja może użyć słowa kluczowego napięcia wstępnego do zainicjowania wcześnie, wysoki priorytet, a nie czyni blokowania pobierania zasobu CSS , które mogą być następnie stosowane przez aplikację w odpowiednim czasie:

<!-- preload stylesheet resource via declarative markup --> 
<link rel="preload" href="/styles/other.css" as="style"> 
<!-- or, preload stylesheet resource via JavaScript --> 
<script> 
var res = document.createElement("link"); 
res.rel = "preload"; 
res.as = "style"; 
res.href = "styles/other.css"; 
document.head.appendChild(res); 
</script> 

Oto spojrzenie naprawdę dogłębne na W3C: https://w3c.github.io/preload/

Ale byłbym ostrożny, jeśli planujesz używać go jako wsparcie przeglądarka nie jest wielki, globalny wsparcie broswer jest tylko 0,18%.

Oto pełna lista: http://caniuse.com/#search=preload