• A pozíció számít
  • Async és defer
  • Teljesítmény összehasonlítás
    • Nem defer és nem async, a fejben
    • Nem defer vagy async, a testben
    • Async-vel, a fejben
    • Deferrel, in the head
  • Blocking parsing
  • Blocking rendering
  • domInteractive
  • Keeping things in order
  • Just tell me the best way

When loading a script on a HTML page, you need to be careful to ne károsítsa az oldal betöltési teljesítményét.

A szkriptet hagyományosan így illesztjük be az oldalba:

<script src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

ahányszor a HTML-elemző megtalálja ezt a sort, kérést küld a szkript lekérésére, és a szkript végrehajtásra kerül.

Mihelyt ez a folyamat befejeződött, a tagolás folytatódhat, és a HTML többi része elemezhető.

Amint elképzelhető, ez a művelet nagy hatással lehet az oldal betöltési idejére.

Ha a szkript betöltése kicsit tovább tart a vártnál, például ha a hálózat kicsit lassú, vagy ha mobileszközről van szó, és a kapcsolat kicsit hanyag, a látogató valószínűleg egy üres oldalt fog látni, amíg a szkript be nem töltődik és végre nem hajtódik.

A pozíció számít

Amikor először tanulod a HTML-t, azt mondják, hogy a script-tagek a <head> tagben laknak:

<html> <head> <title>Title</title> <script src="https://flaviocopes.com/javascript-async-defer/script.js"></script> </head> <body> ... </body></html>

Amint korábban már mondtam, amikor a parser megtalálja ezt a sort, elmegy a scriptért, és végrehajtja azt. Ezután, miután végzett ezzel a feladattal, továbbmegy a test elemzésére.

Ez azért rossz, mert sok késleltetést vezet be. Egy nagyon gyakori megoldás erre a problémára, ha a script taget az oldal aljára tesszük, közvetlenül a záró </body> tag előtt.

Így a szkript betöltődik és végrehajtódik, miután az egész oldal már elemezve és betöltődött, ami hatalmas előrelépés a head alternatívához képest.

Ez a legjobb, amit tehetünk, ha olyan régebbi böngészőket kell támogatnunk, amelyek nem támogatják a HTML két viszonylag új funkcióját: async és defer.

Async és Defer

Az async és a defer is boolean attribútum. Használatuk hasonló:

<script async src="https://flaviocopes.com/javascript-async-defer/script.js"></script>
<script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

Ha mindkettőt megadod, a async elsőbbséget élvez a modern böngészőkben, míg a régebbi böngészők, amelyek támogatják a defer-et, de a async-t nem, a defer-re esnek vissza.

Ezeknek az attribútumoknak csak akkor van értelme, ha a szkriptet az oldal head részében használjuk, és használhatatlanok, ha a szkriptet a body láblécbe helyezzük, ahogy fentebb láttuk.

Teljesítmény összehasonlítás

Nem defer vagy async, a fejben

Íme, hogyan tölt be egy oldal egy szkriptet defer vagy async nélkül, az oldal head részébe helyezve:

A parsing szünetel, amíg a szkript le nem hívódik, és végre nem hajtódik. Ha ez megtörtént, a tagolás folytatódik.

Nem defer vagy async, a bodyban

Íme, így tölt be egy oldal egy szkriptet defer vagy async nélkül, a body tag végére téve, közvetlenül a lezárás előtt:

A tagolás szünet nélkül történik, és amikor befejeződik, a szkript lekérésre kerül, és végrehajtásra kerül. A tagolás még a szkript letöltése előtt megtörténik, így az oldal jóval az előző példa előtt megjelenik a felhasználó számára.

Aszinkronnal, a fejben

Íme, így tölt be egy oldal egy async szkriptet a head tagbe helyezve:

A szkript aszinkron lekérése aszinkron történik, és amikor készen van, a HTML elemzése szünetel a szkript végrehajtásához, majd folytatódik.

Deferrel, a fejben

Íme, így tölt be egy oldal egy defer szkriptet a head tagbe helyezve:

A szkript aszinkron lehívása aszinkron történik, és csak a HTML-elemzés befejezése után hajtja végre.

A szkript elemzése ugyanúgy befejeződik, mintha a body tag végére tennénk a szkriptet, de összességében a szkript végrehajtása jóval korábban befejeződik, mert a szkript a HTML elemzéssel párhuzamosan került letöltésre.

A sebesség szempontjából tehát ez a nyerő megoldás 🏆

A parsing blokkolása

async blokkolja az oldal parsingját, míg a defer nem.

A renderelés blokkolása

Sem a async, sem a defer nem garantál semmit a renderelés blokkolásáról. Ez rajtad és a szkripteden múlik (például, hogy a szkriptjeid a onLoad) esemény után futnak-e.

domInteractive

A defer jelzésű szkriptek közvetlenül a domInteractive esemény után kerülnek végrehajtásra, ami a HTML betöltése, elemzése és a DOM felépítése után történik.

A CSS-t és a képeket ezen a ponton még elemezni és betölteni kell.

Amikor ez megtörtént, a böngésző kibocsátja a domComplete eseményt, majd onLoad.

domInteractive azért fontos, mert az időzítését az érzékelt betöltési sebesség mértékeként ismerik fel. Bővebben lásd az MDN-ben.

A dolgok sorrendben tartása

Egy másik eset pro defer: a async jelű szkriptek alkalmi sorrendben kerülnek végrehajtásra, amikor elérhetővé válnak. A defer jelölésű szkriptek (a tagolás befejezése után) abban a sorrendben kerülnek végrehajtásra, ahogyan azok a jelölésben definiálva vannak.

Mondd meg a legjobb módszert

A legjobb, amit tehetsz az oldal betöltésének felgyorsítása érdekében a szkriptek használata esetén, ha a head-be helyezed őket, és a script taghez defer attribútumot adsz:

<script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

Ez a forgatókönyv váltja ki a gyorsabb domInteractive eseményt.

Az defer előnyeit figyelembe véve számos forgatókönyvben jobb választásnak tűnik a async-nál.

Hacsak nem bánod, hogy késik az oldal első renderelése, győződj meg róla, hogy az oldal elemzésekor a kívánt JavaScript már végrehajtásra kerül.

Töltse le az ingyenes JavaScript kezdők kézikönyvét

Még több böngésző oktatóanyag:

  • Néhány hasznos trükk, ami elérhető a HTML5-ben
  • Hogyan készítettem egy CMS-nek-Based website work offline
  • The Complete Guide to Progressive Web Apps
  • The Fetch API
  • The Push API Guide
  • The Channel Messaging API
  • Service Workers Tutorial
  • The Cache API Guide
  • The Notification API Guide
  • Dive into IndexedDB
  • The Selectors API:
  • A JavaScript hatékony betöltése a defer és az async segítségével
  • A dokumentumobjektum-modell (DOM)
  • A webes tárolási API: A helyi tárolás és a munkamenet-tárolás
  • Megtanulja, hogyan működnek a HTTP-sütik
  • A History API
  • A WebP képformátum
  • XMLHttpRequest (XHR)
  • Egy mélyreható SVG bemutató
  • Mi az adat URL
  • Útiterv a Web Platform megismeréséhez
  • CORS, Cross-Origin Resource Sharing
  • Web Workers
  • A requestAnimationFrame() útmutató
  • Mi az a Doctype
  • Munka a DevTools-zal Konzol és a Konzol API
  • A beszédszintetizáló API
  • Hogyan várjuk meg a DOM ready eseményt egyszerű JavaScriptben
  • Hogyan adjunk hozzá egy osztályt a DOM-hoz elemhez
  • Hogyan lehet a querySelectorAll lekérdezésből származó DOM-elemeken végighaladni
  • Hogyan lehet egy osztályt eltávolítani egy DOM-elemről
  • Hogyan lehet ellenőrizni, hogy egy DOM-elemnek van-e osztálya
  • Hogyan lehet megváltoztatni egy DOM-csomópont értékét
  • Hogyan lehet a querySelectorAll lekérdezésből visszaadott DOM-elemek listájához kattintási eseményt hozzáadni
  • WebRTC, a valós idejű webes API
  • Hogyan kapjuk meg egy elem görgetési pozícióját JavaScriptben
  • Hogyan cseréljünk ki egy DOM-elemet
  • Hogyan fogadjunk el csak képeket egy beviteli fájlmezőben
  • Miért használjuk a böngésző előnézeti változatát?
  • A Blob objektum
  • A File objektum
  • A FileReader objektum
  • A FileList objektum
  • ArrayBuffer
  • ArrayBufferView
  • Az URL objektum
  • Tiped. Arrays
  • A DataView objektum
  • A BroadcastChannel API
  • A Streams API
  • A FormData objektum
  • A Navigator objektum
  • Hogyan használjuk a Geolocation API-t

    • .

  • Hogyan használjuk a getUserMedia()
  • Hogyan használjuk a Drag and Drop API-t
  • Hogyan dolgozunk a görgetéssel a weboldalakon
  • Űrlapok kezelése JavaScriptben
  • Billentyűzetes események
  • Egeres események
  • Mouse események
  • érintéses események
  • Hogyan távolítsuk el az összes gyermeket egy DOM-elemről
  • Hogyan hozzunk létre HTML-attribútumot vanilla Javascript segítségével
  • Hogyan ellenőrizzük, hogy egy jelölőnégyzet be van-e jelölve JavaScript segítségével?
  • Hogyan másoljunk a vágólapra JavaScript segítségével
  • Hogyan tiltsunk le egy gombot JavaScript segítségével
  • Hogyan tegyünk egy oldalt szerkeszthetővé a böngészőben
  • Hogyan lekérdezési karakterlánc értékek lekérdezése JavaScriptben az URLSearchParams segítségével
  • Hogyan lehet egyszerre eltávolítani az összes CSS-t egy oldalról
  • Hogyan lehet használni az insertAdjacentHTML
  • Safari, figyelmeztetés kilépés előtt
  • Hogyan adjunk hozzá egy képet a DOM-hoz JavaScript segítségével
  • Hogyan állítsunk vissza egy űrlapot
  • Hogyan használjuk a Google betűtípusokat

By: adminPosted on

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.