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"
.Jak działa link rel = "preload"?
Odpowiedz
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
Przeglądarka ładunki css i tak, więc jedyne co robi to, aby załadować przed js np? Nadać mu wyższy priorytet niż inni? –
@IlyaChernomordik ostatecznie wszystko zostanie załadowane oczywiście, po prostu wymusić dodanie pliku 'rel =" preload "' na górę tej kolejki. –
Naprawdę nie rozumiem, dlaczego nie jest wyjaśnione, że proste wszędzie, zamiast pisać mnóstwo rzeczy :) –