JavaScript - Script Tag - Async & DEFER

Mens du tester en webside eller nettstedet, kan det være et krav for å observere den forløpte tiden i lastingsfunksjoner. For eksempel å legge til de ekstra funksjonalitetene til en viss grense. I slike tilfeller er skriptet tagger “async”Og“utsette”Attributter spiller en viktig rolle i å hjelpe utvikleren i stor grad.

Denne artikkelen vil beskrive forskjellen mellom asynk.

JavaScript - Script Tag - Async & DEFER

“async”Og“utsette”Er attributtene til“”Tag, og begge har forskjellige funksjonaliteter:

• “async”Attributt lar DOM hente og utføre skriptet mens du utfører HTML.
• “utsette”Attributt laster ned skriptfilen, venter på å fullføre DOM -utførelsen, og utfører deretter skriptfilen.

Eksempel
La oss gå gjennom følgende eksempel:

I kodelinjene ovenfor:

• Inkluderer "”Tagger som refererer til de separate eksterne filene”async.JS”Og“utsette.JS" innen "" stikkord.
• Etter det vil vi lage “463”Knapper ved å kode”knapp klikk*463”Og trykk deretter på fanen.

La oss diskutere “async”Attributts funksjonalitet:

La asyncValue = dokument.QuerySelectorAll ('Button');
konsoll.Logg ('Async Attribute Button Count: $ AsyncValue.lengde');

I async.JS -fil, bruk følgende trinn:

• Få tilgang til de opprettede knappene ved å bruke “QuerySelectorAll ()”Metode.
• Etter det, bruk "lengde”Eiendom i kombinasjon med“mal litteraler”For å vise tellingen på knappene slik at skriptet blir utført mens siden fortsetter analysen.

Nå, sjekk ut “utsette”Attributts funksjonalitet:

La utsettelse = dokument.QuerySelectorAll ('Button');
konsoll.Logg ('Utsatt attributtknapptelling: $ Defervalue.lengde');

I kodelinjene ovenfor, bør du vurdere de under-uttalte trinnene:

• På samme måte få tilgang til de opprettede knappene via “QuerySelectorAll ()”Metode.
• Tilsvarende, gjenta den diskuterte prosedyren for å returnere knappetallet via "lengde”Eiendom.
• I dette scenariet vil skriptfilen kjøres etter at DOM -parsingen er fullført.

Produksjon

Forskjellen mellom begge de uttalte attributtene kan analyseres ved hjelp av det genererte antallet.

Konklusjon

I “async”Attributt, skriptet utføres mens siden fremdeles analyserer, mens“utsette”Attributt venter til dokumentobjektsmodellen (DOM) er fullt utført. Denne oppskrivningen uttalte forskjellene mellom “async”Og“utsette”Attributter i JavaScript ved hjelp av eksempler.