Jak dokładnie działa <script defer = „defer”>?

Mam kilka <script>elementów, a kod w niektórych z nich zależy od kodu w innych <script>elementach. Widziałem, że ten deferatrybut może się tu przydać, ponieważ umożliwia odłożenie bloków kodu w trakcie wykonywania.

Aby to przetestować, wykonałem to w Chrome: http://jsfiddle.net/xXZMN/ .

<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

Ostrzega jednak 2 - 1 - 3. Dlaczego nie alarmuje 1 - 2 - 3?

ZAKTUALIZOWANO: 19.02.2016

Uważaj tę odpowiedź za nieaktualną. Informacje na temat nowszej wersji przeglądarki znajdują się w innych odpowiedziach w tym poście.

Zasadniczo odroczenie mówi przeglądarce, aby poczekała „aż będzie gotowy” przed wykonaniem javascript w tym bloku skryptu. Zwykle dzieje się to po zakończeniu ładowania DOM i document.readyState == 4

Odroczony atrybut jest specyficzny dla przeglądarki internetowej. W przeglądarce Internet Explorer 8 w systemie Windows 7 wynik, który widzę na stronie testowej JS Fiddle, to 1–2–3.

Wyniki mogą się różnić w zależności od przeglądarki.

http://msdn.microsoft.com/en-us/library/ms533719(v=vs.85).aspx

Wbrew powszechnemu przekonaniu IE częściej stosuje standardy niż ludzie, w rzeczywistości atrybut „odroczenia” jest zdefiniowany w specyfikacji DOM Level 1 http://www.w3.org/TR/REC-DOM-Level-1/level -one-html.html

Definicja odroczenia W3C: http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer :

„Po ustawieniu ten atrybut logiczny daje wskazówkę dla agenta użytkownika, że ​​skrypt nie będzie generował żadnej zawartości dokumentu (np. Brak„ document.write ”w javascript), a zatem agent użytkownika może kontynuować parsowanie i renderowanie.”

Kilka fragmentów ze specyfikacji HTML5: http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async

Nie można określić atrybutów odroczenia i asynchronizacji, jeśli atrybut src nie jest obecny.

Istnieją trzy możliwe tryby, które można wybrać za pomocą tych atrybutów [asynchronizuj i odraczaj]. Jeśli atrybut async jest obecny, skrypt zostanie wykonany asynchronicznie, gdy tylko będzie dostępny. Jeśli atrybut asynchroniczny nie jest obecny, ale atrybut odroczony jest obecny, skrypt jest wykonywany, gdy strona zakończy parsowanie. Jeśli żaden atrybut nie jest obecny, skrypt jest pobierany i wykonywany natychmiast, zanim agent użytkownika będzie kontynuował parsowanie strony.

Dokładne szczegóły przetwarzania tych atrybutów są, z powodów głównie historycznych, nieco nietrywialne i obejmują wiele aspektów HTML. Wymagania implementacyjne są zatem z konieczności rozproszone w całej specyfikacji. Poniższe algorytmy (w tej sekcji) opisują rdzeń tego przetwarzania, ale te algorytmy odnoszą się do nich i są do nich odwoływane reguły analizy dla znaczników początku i końca skryptu w HTML, w obcej treści oraz w XML, reguły dla document.write (), obsługa skryptów itp.

Jeśli element ma atrybut src, a element ma atrybut odroczenia, a element został oflagowany jako „wstawiony przez analizator składni”, a element nie ma atrybutu async:

Element należy dodać na końcu listy skryptów, które zostaną wykonane, gdy dokument zakończy parsowanie skojarzone z Dokumentem analizatora składni, który utworzył element.

Prawdziwa odpowiedź brzmi: ponieważ nie możesz ufać odroczeniu.

W koncepcji odroczenia i asynchronizacji różnią się w następujący sposób:

async pozwala na pobranie skryptu w tle bez blokowania. Następnie, w momencie zakończenia pobierania renderowanie jest blokowane i skrypt jest wykonywany. Renderowanie zostanie wznowione po wykonaniu skryptu.

odroczenie robi to samo, z wyjątkiem roszczeń gwarantujących, że skrypty będą wykonywane w kolejności, w jakiej zostały określone na stronie, i że zostaną wykonane po zakończeniu analizy dokumentu. Dlatego niektóre skrypty mogą zakończyć pobieranie, a następnie usiąść i czekać na skrypty, które zostały pobrane później, ale pojawiły się przed nimi.

Niestety, ze względu na to, co tak naprawdę jest standardową walką kotów, definicja odroczenia różni się w zależności od specyfikacji, a nawet w najnowszych specyfikacjach nie daje użytecznej gwarancji. Jak pokazują odpowiedzi tutaj i ten problem , przeglądarki implementują odraczanie w inny sposób:

• W niektórych sytuacjach niektóre przeglądarki mają błąd, który powoduje, że deferskrypty nie działają.
• Niektóre przeglądarki opóźniają DOMContentLoadedzdarzenie do momentu deferzaładowania skryptów, a niektóre nie.
• Niektóre przeglądarki stosują defersię do <script>elementów z wbudowanym kodem i bez srcatrybutu, a niektóre go ignorują.

Na szczęście specyfikacja przynajmniej określa, że ​​asynchronizacja zastępuje odroczenie. Możesz więc traktować wszystkie skrypty jako asynchroniczne i uzyskać szeroki wachlarz obsługi przeglądarki w następujący sposób:

<script defer async src="..."></script>

98% przeglądarek używanych na całym świecie i 99% w USA uniknie blokowania przy takim podejściu.

(Jeśli musisz poczekać, aż dokument się zakończy parsowanie, wysłuchaj zdarzenia DOMContentLoadedzdarzenia lub skorzystaj z przydatnej .ready()funkcji jQuery . Chciałbyś to zrobić i tak, aby deferw pełni zrezygnować z przeglądarki, która w ogóle się nie implementuje ).

defermoże być użyty tylko w <script>tagu do włączenia zewnętrznego skryptu . Dlatego zaleca się stosowanie w <script>tagach w sekcji <head>.

Jako atrybut odroczenia działa tylko ze znacznikiem scripts z src. Znaleziono sposób naśladowania odroczenia dla skryptów wbudowanych. Użyj zdarzenia DOMContentLoaded.

<script defer src="external-script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    // Your inline scripts which uses methods from external-scripts.
});
</script>

Jest tak, ponieważ zdarzenie DOMContentLoaded jest uruchamiane po całkowitym załadowaniu odroczonych skryptów przypisanych.

Atrybut odroczenia dotyczy tylko zewnętrznych skryptów (należy go używać tylko wtedy, gdy występuje atrybut src).

Należy również zauważyć, że mogą występować problemy w IE <= 9 podczas korzystania script deferw niektórych sytuacjach. Więcej na ten temat: https://github.com/h5bp/lazyweb-requests/issues/42

Zapoznaj się z tym doskonałym artykułem. Zanurz się w mętnych wodach ładowania skryptów przez programistę Google, Jake'a Archibalda z 2013 roku.

Cytując odpowiednią sekcję z tego artykułu:

Odraczać

<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>

Spec mówi : Pobierz razem, wykonaj w kolejności tuż przed DOMContentLoaded. Zignoruj ​​„odrocz” w skryptach bez „src”.

IE <10 mówi : Mogę wykonać 2.js w połowie wykonania 1.js. Czy to nie zabawne?

Przeglądarki w kolorze czerwonym mówią : nie mam pojęcia, co to za „odroczenie”, załaduję skrypty, jakby ich tam nie było.

Inne przeglądarki mówią : Ok, ale nie mogę ignorować „odroczenia” w skryptach bez „src”.

_{(Dodam, że wczesne wersje Firefox wyzwalają DOMContentLoaded, zanim deferskrypty zakończą działanie, zgodnie z tym komentarzem ).}

Wygląda na to, że współczesne przeglądarki działają asyncpoprawnie, ale musisz działać poprawnie, gdy skrypty działają nieprawidłowo i być może przed DOMContentLoaded.

Ten atrybut boolowski jest ustawiony tak, aby wskazywał przeglądarce, że skrypt ma zostać wykonany po przeanalizowaniu dokumentu. Ponieważ ta funkcja nie została jeszcze zaimplementowana we wszystkich innych głównych przeglądarkach, autorzy nie powinni zakładać, że wykonanie skryptu zostanie odroczone. Nigdy nie wywoływaj document.write () ze skryptu odroczonego (od Gecko 1.9.2 spowoduje to zniszczenie dokumentu). Atrybutu odroczenia nie należy używać w skryptach, które nie mają atrybutu src. Od wersji Gecko 1.9.2 atrybut odroczenia jest ignorowany w skryptach, które nie mają atrybutu src. Jednak w Gecko 1.9.1 nawet wbudowane skrypty są odraczane, jeśli ustawiony jest atrybut odroczenia.

defer działa z Chrome, Firefox, tj.> 7 i Safari

ref: https://developer.mozilla.org/en-US/docs/HTML/Element/script

Odroczony atrybut jest atrybutem boolowskim.

Gdy jest obecny, określa, że ​​skrypt jest wykonywany, gdy strona zakończy parsowanie.

Uwaga: Atrybut odroczenia dotyczy tylko skryptów zewnętrznych (należy go używać tylko wtedy, gdy występuje atrybut src).

Uwaga: Istnieje kilka sposobów wykonania zewnętrznego skryptu:

Jeśli async jest obecny: skrypt jest wykonywany asynchronicznie z resztą strony (skrypt zostanie wykonany, gdy strona będzie kontynuowała parsowanie) Jeśli asynchronia nie jest dostępna, a odroczenie jest obecne: skrypt jest wykonywany, gdy strona zakończy parsowanie Jeśli nie występuje ani asynchronizacja, ani odroczenie: skrypt jest pobierany i wykonywany natychmiast, zanim przeglądarka będzie dalej analizować stronę