Atrybut JavaScript Defer

Jeśli kiedykolwiek szukałeś rozwoju internetowego lub projektowania stron internetowych, to prawdopodobnie słyszałeś o HTML. Cóż, HTML oznacza „Hipertekstowy język znaczników". HTML jest używany w połączeniu z CSS do opracowywania atrakcyjnych i responsywnych stron internetowych. JavaScript to język programowania, który umożliwia naszym stronom internetowym i aplikacjom internetowym myśleć i działać i uczynić nasze aplikacje internetowe interaktywne. Cały dokument HTML jest skanowany przez przeglądarkę najpierw dla CSS, JavaScript lub dowolnych innych odwołanych materiałów, takich jak obraz, a proces ten nazywa się Parsing HTML. Przeglądarka internetowa następnie żąda każdego pliku zasobów z serwera, jeśli zasoby zostaną znalezione w HTML. Gdy przeglądarka internetowa ma wszystkie niezbędne zasoby, zaczyna budować stronę.

Do JavaScript można odwoływać scenariusz Tag HTML i JavaScript nazywa się parser Blokowanie zasobu Ponieważ parsing HTML jest blokowany przez JavaScript. Aby rozwiązać ten problem scenariusz Tag of HTML oferuje nam async i odraczać Atrybuty umożliwiające nam większą kontrolę nad tym, jak i kiedy pliki zewnętrzne są pobierane i wykonywane. W tym poście zbadamy, czym jest atrybut JavaScript i jak możemy użyć atrybutu odroczenia.

Normalne wykonanie

Rzućmy okiem na wpływ tego, co dzieje się, gdy nie ma atrybutu odroczenia. Pliki JavaScript domyślnie zatrzymają parsowanie tekstu HTML, aby można je było pobrać (jeśli nie są one) i uruchomić.

Powiedzmy, że mamy znacznik skryptu gdzieś pośrodku strony HTML, a powyżej i poniżej kodu HTML scenariusz etykietka:

Parser HTML zeskanuje tę stronę, a kiedy dotrze do znacznika skryptu, zatrzyma parsowanie HTML i pobrać JavaScript kod.JS plik w znaczniku skryptu, a następnie wykonaj ten plik. Po zakończeniu wykonania i pobierania pliku JavaScript, tylko wtedy parsing HTML trwa ponownie. Ten proces opóźnia renderowanie HTML, a zatem spowalnia naszą stronę internetową, poświęcając trochę czasu na pełne załadowanie strony internetowej.

Jaki jest atrybut odroczenia?

Właściwość odroczenia może mieć tylko prawdziwą wartość lub fałszywą wartość, możemy stwierdzić, że jest to atrybut boolean. Jest to atrybut używany tylko do skryptów zewnętrznych. Jeśli ta właściwość jest używana, określa, że ​​przeglądarka nie powinna czekać na załadowanie skryptu. Oznacza to, że w niektórych przypadkach scenariusze zewnętrzne mogą zająć dużo czasu, ta właściwość po prostu mówi, aby załadować dokument przed załadowaniem skryptu. Krótko mówiąc, atrybut odroczenia nie czeka na scenariusz Tag i przetwarzanie HTML trwa, dzięki czemu nasza strona internetowa zwiększa wydajność ładowania. Składnia atrybutu odroczenia to:

Należy zauważyć że atrybut odroczenia można zastosować tylko do arkuszy zewnętrznych/skryptów src atrybut jest obecny w znaczniku skryptu. Należy również zauważyć, że atrybutu odroczenia nie można zastosować do kodu wbudowanego.

Atrybut odroczenia jest podobny do procesu asynchronicznego, czyli możesz przejść do innego zadania, nawet gdy pierwsze zadanie nie zostanie wykonane.

Przykład

Używamy zewnętrznego arkusza JavaScript o nazwie kod.JS:

Przed skryptem

Po skrypcie: Wykonanie natychmiast

Zainicjowaliśmy P tag, a następnie tag skryptu, który odwołuje się kod.JS plik, a potem ponownie P etykietka.

w kod.JS Plik, po prostu pocieszamy.dziennik Witaj świecie!:

konsola.Log („Witaj świat!");

Zobaczymy następujące dane wyjściowe:

Wsparcie w przeglądarce

Liczby podane w tabeli wskazują, która wersja przeglądarki była pierwszą, która całkowicie zaimplementowała atrybut.

Atrybut	Mozilla Firefox	Microsoft Edge	Google Chrome	Opera	Safari
odraczać	3.5	10.0	8.0	15.0	5.0

Wniosek

Normalne wykonywanie HTML jest blokowane, gdy istnieje znacznik skryptu. Tag skryptu pobiera zewnętrzny plik lub link, a następnie wykonuje go w ten sposób blokując normalne parsowanie HTML. Atrybut Defer jest rozwiązaniem, ponieważ atrybut Defer pomoże nam jak najszybciej pobrać nasze skrypty bez blokowania przeglądarki/html, ponieważ mówi przeglądarce, aby nie czekać na scenariusz etykietka. W tym poście omówiono atrybut Defer w JavaScript wraz z przykładem i zdolnością do obsługi przeglądarki.