Asynchroniczne ładowanie JavaScript. Jak przyspieszyć ładowanie strony HTML za pomocą JavaScript

Wraz ze wzrostem szybkości połączenia internetowego i wzrostem mocy nie tylko komputerów stacjonarnych, ale także urządzenia mobilne Strony internetowe stają się coraz cięższe. Rośnie liczba i rozmiar podłączonych plików: pliki JavaScript, pliki CSS, obrazy, widżety stron trzecich, elementy iframe. NA ten moment Specyfika działania przeglądarek polega na tym, że podczas ładowania pliku js renderowanie jest blokowane do czasu wykonania skryptu. Nowoczesne przeglądarki w tło przeanalizuje dokument i pobierze skrypty i style, ale renderowanie zostanie zablokowane. Porównanie parametry sieci Dla różne przeglądarki można obejrzeć na stronie Browsescope.org. Nie możemy całkowicie wyeliminować blokowania, ale możemy zoptymalizować część serwerową i kliencką aplikacji, tak aby blokowanie renderowania trwało jak najkrócej.

Rozwiązania po stronie serwera:
- Zmniejsz rozmiar przesyłanych plików
- Użyj CDN
- Umieść pliki statyczne osobna domena lub pod domeną, zwiększając w ten sposób liczbę jednoczesnych połączeń przeglądarki.
- Włącz kompresję przesyłanych plików (gzip)

Rozwiązania po stronie klienta:
- Zmniejsz liczbę żądań.
- Pliki pamięci podręcznej po stronie klienta przy użyciu nagłówków Expires i Etags.
- Korzystaj z publicznie dostępnych CDN (Google CDN, Yandex CDN). Istnieje więc możliwość, że plik z publicznego CDN będzie już zapisany w pamięci podręcznej przeglądarki.

Jednym ze sposobów optymalizacji szybkości ładowania witryny jest asynchroniczne ładowanie plików, które nie blokuje renderowania.

Skrypt asynchronicznego ładowania JavaScript:

(funkcja() ( var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "URL pliku"; document.getElementsByTagName("head") .appendChild(skrypt); ))();

Jeśli JavaScript musi zostać wykonany po załadowaniu całej strony, łącznie z treścią, obrazami, plikami stylów i skryptami zewnętrznymi, wówczas do modułu ładującego należy dodać zdarzenie onload.

If (window.addEventListener) ( window.addEventListener("load", async_load, false); ) else if (window.attachEvent) ( window.attachEvent("onload", async_load); )

Skrypt asynchronicznego ładowania JavaScript uwzględniający zdarzenie onload (function() ( funkcja async_load())( var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s .src = "URL pliku"; document.getElementsByTagName("head").appendChild(script); ) if (window.addEventListener) ( window.addEventListener("load", async_load, false); ) else if (window.attachEvent ) ( okno .attachEvent("onload", async_load); ) ))();

Jest to jednak odosobniony przypadek, gdy wymagane jest pobranie pojedynczego pliku. Często w praktyce łączy się ze sobą wiele plików.

Skrypt do asynchronicznego ładowania wielu konektorów Pliki JavaScript(funkcja() ( funkcja async_load())( [ "URL_1.js", "URL_2.js", "URL_3.js" ].forEach(funkcja(src) ( var s = document.createElement("skrypt"); s .type = "text/javascript"; s.async = true; s.src = src; document.getElementsByTagName("head").appendChild(script); )); ) if (window.addEventListener) ( window.addEventListener („load”, async_load, false); ) else if (window.attachEvent) ( window.attachEvent("onload", async_load); ) ))();

Ale w tej implementacji jest minus - skrypty zostaną załadowane w losowej kolejności i odpowiednio zostaną wykonane losowo w czasie. Ten asynchroniczny skrypt ładujący jest idealny, jeśli Wykonanie JavaScriptu pliki nie są od siebie zależne i nie zależą od modelu DOM. W przeciwnym wypadku jego użycie może skutkować błędami na stronie lub nieoczekiwanymi wynikami wykonania. W przypadku wykonywania sekwencyjnego, ale pobierania asynchronicznego, należy określić async=false, wtedy pliki zostaną pobrane w losowej kolejności, ale wykonane po kolei.

HTML 5. Asynchroniczne ładowanie JavaScript

Standard HTML 5 obsługuje asynchroniczne ładowanie JavaScript. Można to zrobić dodając słowo kluczowe asynchronicznie lub odroczenie. Na przykład:

Skrypt powiązany z atrybutem odroczenia zostanie wykonany bez zakłócania kolejności wykonywania w stosunku do pozostałych skryptów, a jego wykonanie nastąpi po załadowany do pełna i analizowanie strony, ale przed wywołaniem DOMContentLoaded.

Skrypt, z którym jest powiązany atrybut asynchroniczny zostanie wykonany tak szybko, jak to możliwe po całkowitym załadowaniu, ale nie czeka na przeanalizowanie dokumentu przed załadowaniem obiektu okna. Przeglądarki nie gwarantują, że skrypty zostaną wykonane w tej samej kolejności, w jakiej są połączone.

Biblioteki do asynchronicznego ładowania JavaScript

RequireJS to moduł ładujący JavaScript. Zoptymalizowany dla przeglądarek, ale można go używać w innych środowiskach, takich jak Node, Rhino.

Require(["skrypt"], funkcja(skrypt) ( console.log("uruchom po załadowaniu skryptu.js"); ));

extsrc.js to biblioteka uruchamiająca skrypty, które mają zostać wykonane po załadowaniu strony i wyświetleniu jej użytkownikowi. Działa poprawnie z document.write.

yepnope.js - umożliwia asynchroniczne ładowanie plików JavaScript i CSS.

Tak([ "skrypt.js", "styl.css" ]);

Łatwy sposób pobrania Skrypty JavaScript

Okazuje się, że w praktyce osiągnięcie optymalnego ładowania między przeglądarkami skryptów JavaScript, które nie blokują wyświetlania, jest trudne, a czasem niemożliwe. Bardzo optymalny sposób jest dodawany na końcu dokumentu przed znacznikiem zamykającym treść. Ze względu na ograniczenia różne przeglądarki i samego HTML, taką opcję ładowania, która nie blokuje wyświetlania, można uznać za najprostszą.

Pozdrowienia, przyjaciele! Czy wiesz, że ładowanie JavaScriptu jest jednym z najczęściej wąskie gardła 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 znacznik skryptu, przestaje renderować stronę do czasu 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:

konfiguracje,
Szybkość połączenia internetowego,
rozmiar pliku i inne...

Z tego powodu analizator szybkości witryny Google PageSpeed Insights zaleca usunięcie z góry strony Kod JavaScript, blokując jego wyświetlanie. Dobrą praktyką jest umieszczanie skryptów na dole strony, np. przed tagiem zamykającym lub ustawianie ładowania asynchronicznego.

Jeśli kod skryptu wpływa na wyświetlanie górnej części witryny, nie umieszczaj go osobny plik i osadzaj bezpośrednio w formacie HTML.

JS może zmienić zawartość witryny, a nawet przekierować na inny adres URL. W takim przypadku podłączenie skryptu na końcu dokumentu spowoduje efekt „drgania” strony, wczytywania nowych lub zmiany istniejących elementów na górze.

Stosowanie atrybutów async i defer do znacznika skryptu

Zastanówmy się, czym są asynchroniczne i odroczone Działa JavaScript i jaka jest podstawowa różnica między atrybutami async i defer. Ale najpierw przyjrzyjmy się kolejności przetwarzania dokumentu ze zwykłym dołączeniem znacznika skryptu.

1	< src = "example.js" >

W jasny przykład Skorzystam z poniższych symbolika:

— przetwarzanie strony
— ładowanie skryptu
— wykonanie skryptu

Zatem sekwencja przetwarzania przebiega zgodnie z następującym schematem:

Analizowanie kodu HTML zostaje przerwane podczas ładowania i wykonywania skryptu, po czym jest kontynuowane. Występuje opóźnienie w wyświetlaniu strony internetowej.

odroczenie atrybutu

Atrybut defer pozwala przeglądarce rozpocząć równoległe pobieranie plików js bez zatrzymywania dalszego przetwarzania strony. Są one wykonywane po pełna analiza model obiektowy dokumentu (z angielskiego Document Object Model, w skrócie DOM), natomiast przeglądarka gwarantuje spójność na podstawie kolejności łączenia plików.

1	< defer src = "example.js" >

atrybut asynchroniczny

W HTML5 pojawiła się obsługa atrybutu async, który pozwala przeglądarce pobierać pliki js równolegle i uruchamiać je natychmiast po pobraniu, bez czekania na przetworzenie reszty strony.

1	< async src = "example.js" >

Schemat sekwencji przetwarzania:

To jest pobieranie asynchroniczne. Ten atrybut jest zalecany do stosowania w skryptach, które nie mają znaczącego wpływu na wyświetlanie dokumentu. Należą do nich liczniki gromadzenia statystyk ( Google Analytics, Yandex Metrica), kody sieci reklamowych ( Sieć reklamowa Yandex, Google AdSense), guziki portale społecznościowe i tak dalej.

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

Asynchroniczna łączność JavaScript skraca czas ładowania strony, eliminując opóźnienia. Oprócz tego polecam kompresowanie i łączenie plików js w jeden, na przykład przy użyciu rozszerzenia . Użytkownicy lubią szybkie strony 😎

Sposób na przyspieszenie ładowania stron internetowych poprzez optymalizację plików skryptów Java i Kod HTML strony.

JavaScript reprezentuje pewien problem dla nowoczesnych zasobów. Są po prostu nimi przeciążone, co prowadzi do powolnego ładowania, a co za tym idzie, złej jakości wyświetlania.

Jeśli Twoje połączenie sieciowe jest wolne, co jest typowe dla komunikacja mobilna I użytkownicy zdalni, wówczas ładowanie znacznie spowalnia, powodując uzasadnioną irytację.

Kiedy przeglądarka odczytuje kod HTML, wyświetla wynik sekwencyjnie. Te. każda linia następuje po sobie, ale w miejscu zainstalowania javascript następuje przystanek - ci, którzy używają tego języka do pisania zasobów, z pewnością spotkali się z tym problemem.

Rozwiązaniem problemu jest ładowanie asynchroniczne. Po prostu umieść JavaScript na końcu kodu HTML strony. Doprowadzi to do tego, że ładowanie „Java” będzie opóźnione w czasie, zapewniając prawidłowe wyświetlenie strony i szybki start użytkownikom zasobu. Większość poważnych zasobów przechodzi na ładowanie asynchroniczne, próbując utrzymać odbiorców i wprowadzając przydatne innowacje.

Przyjrzyjmy się kilku sposobom optymalizacji ładowania JavaScript.

Ten plik JavaScript jest ładowany w następujący sposób:

< script src= type= "text/javascript" >

HTML5 roztropnie zadbał o problem ładowania strony z „Java”. Posiada możliwość ustawienia asynchronicznego ładowania skryptu, co znacznie zwiększa szybkość wyświetlania zasobu. Aby to zrobić, dodaj parametry async lub defer do kodu HTML, jak wskazano poniżej:

< script async src= "//www.адрес_сайта/script.js" type= "text/javascript" >

< script defer src= "//www.адрес_сайта/script.js" type= "text/javascript" >

Jaka jest różnica między atrybutami asynchronicznymi i odroczonymi?

Obie opcje działają z asynchronicznym ładowaniem JavaScript. Różnica polega na czasie wyświetlania i rozpoczęciu wykonywania skryptu.

Atrybut async uruchomi skrypt natychmiast po jego pełnym załadowaniu, ale pominie okno ładowania.

Kiedy ustawisz atrybut defer w kodzie strony, javascript będzie umieszczany w kolejce pomiędzy innymi skryptami, nie zakłócając kolejności ich wykonywania. Zacznie działać dopiero po całkowitym załadowaniu strony, ale pominie zdarzenie DOMContentLoaded(obiekt dokumentu).

Jednak w niektórych przypadkach te atrybuty nie działają nowoczesne przeglądarki. Na przykład program Internet Explorer nie obsługuje atrybutów async i defer. A linie document.write w niczym nie pomogą w plikach script.js

Specjalny skrypt od Google do asynchronicznego ładowania JavaScript

Google stał się liderem w rozwoju technologii, które pozwalają na ładowanie stron internetowych w rekordowym czasie. Poza tym ocena wyszukiwarka Google degraduje witryny o słabej wydajności, dlatego zwróć uwagę na specjalne skrzypienie webmasterów Google, zaprojektowane do asynchronicznego ładowania JavaScript.

Aplikować ten skrypt, po prostu wymień

NA

Następnie dołączamy plik skryptu extsrc.js

Otrzymujemy następujący kod:

< script src= "//extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

Niestety ta metoda nie działa również w przypadku plików z document.write

Ta metoda jest odpowiednia dla wszystkich przeglądarek bez wyjątku i działa nawet z document.write

W kodzie HTML strony tworzymy pusty blok div:

A na końcu kodu HTML, przed, wstawiamy skrypt do asynchronicznego ładowania:

Oto dowolny plik lub skrypt, który należy załadować. //przenieś to do prawdziwe stanowisko wyświetl dokument.getElementById("script_block").appendChild(document.getElementById("script_ad")); // show document.getElementById("script_ad").style.display = "block";

Należy pamiętać, że w wersjach IE niższych niż 6 włącznie, to pobieranie nie działa. Ale nie jestem pewien, czy tacy użytkownicy pozostaną - są mniejszością. Używane są inne przeglądarki i usługi tę optymalizację dla javascript, co jest odzwierciedlone w najlepszy możliwy sposób na szybkość ładowania zasobów.

Jest rozwiązanie: umieść ciągi Java na końcu dokument HTML(dlatego będą ładowane po narysowaniu całej strony) i dopiero wtedy wyświetli się zawartość bloków we właściwych miejscach. Nazywa się to . Wszystkie poważne projekty dzisiaj próbują się przełączyć Nowa technologia pliki do pobrania. Co więcej, jest to absolutnie łatwe.

Istnieje kilka podejść. Zacznę po kolei.

skrypt src= type= "text/javascript" >

Asynchroniczne ładowanie skryptu HTML5

Standard HTML5 obsługuje możliwość asynchronicznego ładowania skryptów, co może znacznie przyspieszyć czas całkowity strona odbiorcza. Po prostu dodaj async lub defer .

< script async src= "http://www.site.ru/script.js" type= "text/javascript" >

< script defer src= "http://www.site.ru/script.js" type= "text/javascript" >

Jaka jest różnica między atrybutami asynchronicznym i odroczonym?

W obu przypadkach otrzymujemy asynchroniczne ładowanie skryptów. Jedyną różnicą jest moment rozpoczęcia wykonywania skryptu. Skrypt z atrybutem async zostanie wykonany możliwie najszybciej po całkowitym załadowaniu, ale przed załadowaniem obiektu okna. W przypadku użycia atrybutu defer skrypt nie naruszy kolejności jego wykonywania w stosunku do innych skryptów i jego wykonanie nastąpi po całkowitym załadowaniu i przeanalizowaniu strony, ale przed zdarzeniem DOMContentLoaded obiektu dokumentu.

Niestety, mechanizm ten nie działa obecnie we wszystkich przeglądarkach (zwłaszcza IE). Nie zadziała również, jeśli w pliku script.js znajdują się linie document.write.

Asynchroniczny ładowanie JavaScriptu skrypt od Google

Jak wiedzą wszyscy eksperci, Google przywiązuje szczególną wagę do szybkości ładowania stron i ogranicza powolne. wyniki wyszukiwania. Aby pomóc, Google opracowało specjalny skrypt, za pomocą którego można wykonać asynchroniczne ładowanie JavaScript.

Aby użyć, po prostu wymień

NA

I podłącz plik skryptu extsrc.js

To się okaże tak:

< script src= "http://extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

Niestety ta metoda nie działa również w przypadku plików z document.write

Najlepiej działające asynchroniczne ładowanie JavaScript

Uniwersalna metoda dla wszystkich przeglądarek. Działa nawet z document.write

W miejscu strony, w którym faktycznie mamy wyświetlić nasz element, utwórz pusty blok div:

< div id= "script_block" class = "script_block" >

Na samym końcu strony, zanim wstawimy skrypt służący do asynchronicznego ładowania plików:

< div id= "script_ad" class = "script_ad" style= "display:none;" >Oto dowolny plik lub skrypt, który należy załadować.< script type= "text/javascript" >// przenieś go do dokumentu z aktualnie wyświetlaną pozycją. getElementById("blok_skryptu") . appendChild(document.getElementById("script_ad" ) ) ; // pokaż dokument. getElementById("reklama_skryptu") . styl. wyświetlacz = "blok";

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

Asynchronia w javascript to reguła, według której bloki kodu JS są przetwarzane przez przeglądarkę równolegle z ładowaniem DOM-u - tj. strukturę strony internetowej lub po załadowaniu DOM.

Jak wiadomo, kod JS jest umieszczony pomiędzy . W takim przypadku kod może znajdować się zarówno w HEAD dokumentu, jak i w BODY - w dowolnej części dokumentu. JavaScript można także załadować z innych domen.

Zwykle JS jest umieszczany na końcu strony właśnie z tego powodu określony czas- ładowanie strony zostało zawieszone - DOM nie może się załadować, ponieważ oczekuje na zakończenie wykonywania skryptu javascript.

Jeśli skrypt zostanie napisany z błędami lub zostanie załadowany z zewnętrznego serwera, który okaże się niedostępny, strona nigdy się nie załaduje. Jeśli kod JS jest po prostu źle zoptymalizowany i jego wykonanie zajmuje dużo czasu, strona załaduje się do momentu podłączenia skryptu - wówczas ładowanie zostanie zatrzymane do czasu zakończenia działania skryptu. Osoba odwiedzająca witrynę może to zauważyć, szczególnie jeśli korzysta z wolnego łącza internetowego.

Najczęściej osoba odwiedzająca witrynę, której strona przestała się ładować w połowie, opuści witrynę, nie czekając na zakończenie działania skryptu. Opóźnienia są zatem wysoce niepożądane.

Aby naprawić tę sytuację, dostępna jest opcja asynchroniczna, która umożliwia asynchroniczne ładowanie JS. Struktura dokumentu podczas korzystania z dokumentu i wszystkich elementów strony nie będzie czekać na zakończenie wykonywania skryptu.

Skrypt zostanie zainicjowany, strona będzie się ładować nawet jeśli skrypt nie zakończył swojej pracy. Niektóre funkcje strony mogą nie działać poprawnie (jeśli występują błędy w JavaScript), ale ogólnie strona ładuje się i osoba odwiedzająca witrynę może z nią pracować.

Warto zauważyć, że niektóre wersje nie obsługują asynchronizacji Internet Explorera, ale ponieważ używa go bardzo mała liczba użytkowników, zwykle warto to zignorować i użyć asynchronii w JavaScript.

Alternatywą dla asynchronizacji może być odroczenie. W przypadku użycia tego atrybutu skrypt zostanie wykonany dopiero po załadowaniu modelu DOM. Dyrektywa jest obsługiwana przez wszystkie przeglądarki, jej osobliwością jest to, że przetwarza skrypty JS w kolejności, w jakiej są połączone.

Może to być zarówno plus, jak i minus. Jeśli kolejność wykonywania skryptów jest ważna, najlepszym rozwiązaniem jest odroczenie.asynchronizację można wymusić: script.async=false;

Minusem jest to, że jeśli jeden skrypt łączy się z zasób zewnętrzny, który nie jest dostępny - inne skrypty nie będą przetwarzane. Będą na to czekać, niezależnie od tego, jak ważne jest to ogólnie.