W najstarszych wersjach IE (6 i niższych) ładowanie asynchroniczne niestety nie działa, ale praktycznie nie ma już takich użytkowników. Wszystkie inne przeglądarki i usługi z powodzeniem korzystają z nowoczesnych szybkie pobieranie strony internetowe.

Async i Defer — strategie ładowania JavaScript

JavaScript jest integralną częścią każdej nowoczesnej aplikacji internetowej, a strategie, które wybieramy do ładowania, mają bezpośredni wpływ na wydajność tej samej aplikacji. W tym artykule postaramy się zrozumieć ważne różnice między każdym podejściem, zalety i wady, a także wpływ na wydajność oraz sposób optymalizacji pod kątem interakcji ze stroną i czasu ładowania.

Aby to zademonstrować, stworzę stronę internetową składającą się z następujących zewnętrznych zależności. Zwróć szczególną uwagę na odpowiednie rozmiary plików, ponieważ czas pobierania plików jest do tego wprost proporcjonalny.

• HTML - strona ~ 1 MB. Zawiera rzeczywiste znaczniki/treść, aby pokazać niektóre dynamiczne dane wyjściowe z JavaScript.
• Obraz - obraz1.png ~ 5 Mb
• JavaScript - plik1.JS ~3MB jest rdzeniem (głównym plikiem) javascript i zależy od parsowania HTML. Jest to potrzebne do pokazania zawartości dynamicznej lub zamontowania na stronie komponentu reakcji/kątowej.
• JavaScript - file2.js ~460B - Mały, niezależny plik javascript, który współdziała z domem.
• JavaScript - plik3.js ~ 1,5 MB to dodatkowy plik js i zależy od pliku1.js w celu wykonania kodu o niższym priorytecie. Ten kod nie jest natychmiast wymagany do renderowania strony i interakcji użytkownika; pokazuje ikony portale społecznościowe, uwagi, pomoc online, uruchamianie niektórych zadań analitycznych itp.

Podejście-1 [skrypty w nagłówku]

W pierwszym przypadku wczytamy wszystkie tagi scripts do sekcji head naszego kodu HTML. Poniżej znajduje się zrzut ekranu analizy karty sieciowej chromowane strony, aby być gotowym na interakcję z użytkownikiem.

Plusy:

Kolejność wykonywania kodu różnych plików JS zostanie zachowana w kolejności, w jakiej pliki zostały zawarte w kodzie HTML. W obecnym przykładzie, nawet jeśli plik2 i plik3 zostałyby załadowane przed plikiem1, kolejność wykonania byłaby prawidłowa.

Minusy:

W tym scenariuszu analizowanie kodu HTML zostanie wstrzymane do momentu załadowania, przeanalizowania i wykonania wszystkich 3 skryptów w sekcji head. Pusty biały ekran zostanie wyświetlony użytkownikowi, nawet jeśli plik HTML został już załadowany [ale nie przetworzony]. To zdecydowanie nie jest dobre dla użyteczności.

Żaden z powyższych skryptów nie będzie w stanie uzyskać dostępu/manipulować stroną HTML, ponieważ DOM nie jest jeszcze gotowy. Jeden z możliwe rozwiązania Sposobem na rozwiązanie tego problemu jest nasłuchiwanie zdarzenia DOMContentLoaded, a następnie wykonanie kodu. Zdarzenie DOMContentLoaded jest wywoływane po całkowitym załadowaniu i przeanalizowaniu oryginalnego dokumentu HTML bez oczekiwania na zakończenie ładowania arkuszy stylów, obrazów lub obrazów.

Podejście-2 [skrypty na końcu]

Aby rozwiązać 2 problemy, z którymi borykamy się w pierwszym podejściu, załadujmy wszystkie 3 skrypty na dole tagu body.

Plusy: Kod HTML jest analizowany przed załadowaniem skryptów, dzięki czemu użytkownik będzie mógł od razu zobaczyć rzeczywistą zawartość zamiast czekać na skrypty.

Ponieważ wszystkie skrypty są wykonywane po przeanalizowaniu kodu HTML, wszystkie mogą uzyskać dostęp do DOM w celu dowolnej manipulacji. Zachowana jest kolejność wykonywania skryptu.

Minusy:

Nie ma wzrostu wydajności per se.

Podejście-3 [przy użyciu atrybutu Async]

HTML5 wprowadził atrybut skryptu asynchronicznego, który pomaga w równoległym ładowaniu odpowiednich plików skryptów w innym wątku bez wpływu na parsowanie HTML.

Jednak odpowiedni skrypt zostanie przeanalizowany i wykonany zaraz po zakończeniu ładowania, niezależnie od tego, czy parsowanie HTML zostało zakończone, i będzie miał odniesienie do elementu DOM aż do tego konkretnego momentu.

Tutaj wyraźnie widać, że plik 2.js został załadowany wcześniej plik HTML. Jednak w czasie, gdy przeglądarka pobierała plik2, nie wstrzymywała parsowania HTML iz tego powodu do czasu jej wykonania miała odniesienie do symbolu zastępczego html do wstrzykiwania dynamicznej zawartości.

Plusy: Ponieważ skrypty są ładowane w innym wątku, parsowanie HTML nie zostanie wstrzymane, a użytkownik będzie mógł zobaczyć rzeczywistą zawartość zamiast białego pustego ekranu. Główny przyrost wydajności, tj. czas DOMContentLoaded, skrócił się z 47,68 s do zaledwie 21,12 s, co oznacza wzrost o ~55%.

Minusy:

Sekwencja wykonania JS nie jest zachowywana. Jest wykonywany w odpowiedniej kolejności ładowania, a nie w sekwencji skryptów zawartej w kodzie HTML. Obsługa przeglądarek — nieobsługiwane w starszych przeglądarkach internetowych, tj. IE 9 i niższych.

Co się stanie, jeśli plik JS zostanie załadowany przed udostępnieniem elementu DOM? Zostanie zgłoszony błąd.

Uwaga: umieszczanie skryptów z atrybutem async na dole sekcji ciała byłoby bezużyteczne i równoważne z podejściem-2.

Podejście-4 [przy użyciu atrybutu Defer]

Atrybut defer spowoduje, że skrypt zostanie wykonany dopiero po zakończeniu parsowania HTML. Na każdy ważny punkt Należy wziąć pod uwagę, że Chrome nie obsługuje jeszcze odroczenia i nie ma wpływu na czas trwania DOMContentLoaded. Jednak wykonuje skrypty na końcu parsowania HTML.

Plusy:

Sekwencja importu skryptu zostaje zachowana. Tak więc plik3.js jest wykonywany dopiero po zakończeniu pobierania i wykonaniu pliku1, nawet jeśli plik3 został załadowany wcześniej.

Obsługa przeglądarki - ma najlepsze wsparcie przeglądarki w porównaniu do atrybutu async, czyli częściowo obsługiwanego w IE v6-9

Skrypty mogą uzyskać dostęp do DOM, ponieważ jest on wykonywany dopiero po przeanalizowaniu pełnego kodu HTML.

Minusy:

Początkowo myślałem, że opóźnienie będzie najlepszy wybór niż asynchroniczny, ale później odkryto, że Chrome jeszcze go nie obsługuje [wersja 71.0.3578.98] i nie ma wpływu na czas trwania DOMContentLoaded.

Działa jednak zgodnie z oczekiwaniami w Firefoksie ze znaczną poprawą wydajności.

wnioski

Zaleca się umieszczenie tagów skryptu w sekcji head z atrybutem async dla bibliotek stron trzecich, które zależą od Google Analytics, Google reCAPTCHA lub cokolwiek innego, co nie wymaga dostępu DOM, ponieważ odpowiednie skrypty są ładowane równolegle, ale wykonywane natychmiast.

Użyj defer dla wszystkich innych skryptów ładowanych w sekcji head, ponieważ będą one również ładowane równolegle, ale zostaną wykonane dopiero po zakończeniu parsowania HTML i gotowości DOM do dostępu/manipulacji.

Możesz również użyć kombinacji odbiornika DOMContentLoaded wewnątrz skryptów asynchronicznych, aby później wykonać funkcje. Prosimy o pozostawienie swoich opinii i ustaleń w komentarzach, a chętnie je z Państwem omówię.

Autorem tego materiału jest ja - Jurij Pakholkov. Świadczę usługi w zakresie pisania programów w języku Java, C++, C# (a także ich konsultingu) oraz tworzenia stron internetowych. Pracuję z witrynami na CMS OpenCart, WordPress, ModX oraz własnymi tekstami. Dodatkowo pracuję bezpośrednio z JavaScript, PHP, CSS, HTML - czyli mogę sfinalizować Twoją stronę lub pomóc w programowaniu stron internetowych.

Cześć przyjaciele! Czy wiesz, że ładowanie JavaScript jest jednym z największych wąskich gardeł w wydajności witryny? Dziś moim głównym zadaniem jest wyjaśnienie czym jest skrypt i jak wpływa na szybkość i wydajność strony.

Przeglądarka, która ładuje tag skryptu, zatrzymuje renderowanie strony do momentu załadowania i wykonania skryptu. Strona jest zablokowana, a przeglądarka przez kilka sekund nie reaguje na działania użytkownika. Czas opóźnienia zależy od kilku czynników:

• konfiguracja ,
• szybkość połączenia internetowego,
• rozmiar pliku i więcej...

Z tego powodu analizator szybkości witryny Google PageSpeed ​​Insights zaleca usunięcie blokującego kodu JavaScript z górnej części strony. Dobrą praktyką jest umieszczanie skryptów na dole strony, na przykład przed tagiem zamykającym lub skonfigurowanie ładowania asynchronicznego.

Jeśli kod skryptu wpływa na wyświetlanie górnej części witryny, nie wyjmuj go do osobnego pliku, ale umieść go bezpośrednio w HTML.

JS może zmieniać zawartość witryny, a nawet przekierowywać na inny adres URL. W takim przypadku umieszczenie skryptu na końcu dokumentu spowoduje „drganie” strony poprzez wczytanie nowych lub zmianę istniejących elementów na górze.

Stosowanie atrybutów async i defer do tagu skryptu

Rozumiem, co jest asynchroniczne i odroczone Praca w JavaScript i jaka jest podstawowa różnica między atrybutami asynchronicznymi i odroczonymi. Ale najpierw rozważ kolejność przetwarzania dokumentów, kiedy normalne połączenie tag skryptu.

W dobry przykład użyję następujących konwencje:

- przetwarzanie stron
- ładowanie skryptu
- wykonanie skryptu

Tak więc sekwencja przetwarzania jest następująca:

Parsowanie kodu HTML jest przerywane podczas ładowania i wykonywania skryptu, po czym jest kontynuowane. Wystąpiło opóźnienie w wyświetlaniu strony internetowej.

odroczyć atrybut

Atrybut defer umożliwia przeglądarce rozpoczęcie równoległego ładowania plików js bez zatrzymywania dalszego przetwarzania strony. Ich wykonanie następuje po całkowitym przeanalizowaniu model obiektowy document (od angielskiego Document Object Model, w skrócie DOM), natomiast przeglądarka gwarantuje spójność na podstawie kolejności łączenia plików.

atrybut asynchroniczny

Obsługa atrybutu async została wprowadzona w HTML5, pozwala przeglądarce na równoległe ładowanie plików js i wykonywanie natychmiast po załadowaniu, bez czekania na przetworzenie reszty strony.

Schemat sekwencji przetwarzania:

To jest pobieranie asynchroniczne. Atrybut zalecany dla skryptów, które nie wpływają znacząco na wyświetlanie dokumentu. Należą do nich liczniki zbierania statystyk (Google Analytics, Yandex Metrica), kody sieci reklamowych (Yandex Advertising Network, Google AdSense), przyciski mediów społecznościowych i tak dalej.

Szybkość ładowania strony internetowej jest jednym z czynników rankingowych w Google.

Asynchroniczne połączenie JavaScript skraca czas ładowania strony, eliminując opóźnienia. Wraz z tym polecam kompresować i scalać pliki js w jeden, na przykład za pomocą . Użytkownicy lubią szybkie strony internetowe 😎

Skrypty wtykowe (JavaScript) blokują ładowanie kodu HTML. Gdy przeglądarka (parser) dotrze do tagu