• Contează poziția
  • Async și Defer
  • Comparație de performanță
    • Nici defer sau async, în cap

      • Nici defer sau async, în corp

  • Cu async, în cap
  • Cu defer, in the head

Blocarea parsing-ului

  • Blocarea randării
  • domInteractive
  • Păstrarea lucrurilor în ordine
  • Să-mi spuneți care este cea mai bună cale

    • Când încărcați un script pe o pagină HTML, trebuie să aveți grijă să nu afectați performanța de încărcare a paginii.

    În mod tradițional, un script este inclus în pagină în acest mod:

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

    de fiecare dată când parserul HTML găsește această linie, se va face o cerere pentru a prelua scriptul, iar scriptul este executat.

    După ce acest proces este finalizat, parsarea poate fi reluată, iar restul HTML-ului poate fi analizat.

    După cum vă puteți imagina, această operațiune poate avea un impact uriaș asupra timpului de încărcare a paginii.

    Dacă scriptul durează puțin mai mult decât se așteaptă să se încarce, de exemplu dacă rețeaua este puțin cam lentă sau dacă sunteți pe un dispozitiv mobil și conexiunea este puțin neglijentă, vizitatorul va vedea probabil o pagină goală până când scriptul este încărcat și executat.

    Poziția contează

    Când învățați HTML pentru prima dată, vi se spune că tag-urile de script trăiesc în tag-ul <head>:

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

    Așa cum v-am spus mai devreme, când parserul găsește această linie, se duce să caute scriptul și îl execută. Apoi, după ce a terminat cu această sarcină, trece la analizarea corpului.

    Acest lucru este rău pentru că se introduce o mare întârziere. O soluție foarte comună la această problemă este să puneți tag-ul script în partea de jos a paginii, chiar înainte de tag-ul de închidere </body>.

    În acest fel, scriptul este încărcat și executat după ce toată pagina este deja analizată și încărcată, ceea ce reprezintă o îmbunătățire uriașă față de alternativa head.

    Acesta este cel mai bun lucru pe care îl puteți face dacă trebuie să suportați browsere mai vechi care nu suportă două caracteristici relativ recente ale HTML: async și defer.

    Async și Defer

    Atât async cât și defer sunt atribute booleene. Utilizarea lor este similară:

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

    dacă le specificați pe amândouă, async are prioritate pe browserele moderne, în timp ce browserele mai vechi care suportă defer dar nu async vor reveni la defer.

    Aceste atribute au sens doar atunci când se utilizează scriptul în porțiunea head a paginii și sunt inutile dacă puneți scriptul în subsolul body, așa cum am văzut mai sus.

    Comparația performanțelor

    Fără defer sau async, în head

    Iată cum o pagină încarcă un script fără defer sau async, pus în porțiunea head a paginii:

    Parsetarea este pusă în pauză până când scriptul este preluat și executat. Odată ce acest lucru este făcut, parsarea se reia.

    Fără defer sau async, în body

    Iată cum o pagină încarcă un script fără defer sau async, pus la sfârșitul tag-ului body, chiar înainte de a se închide:

    Parsetarea se face fără pauze, iar când se termină, scriptul este preluat și executat. Parsarea se face înainte ca scriptul să fie descărcat, astfel încât pagina apare pentru utilizator cu mult înainte de exemplul anterior.

    Cu async, în head

    Iată cum o pagină încarcă un script cu async, pus în tag-ul head:

    Scriptul este preluat în mod asincron, iar când este gata, parsarea HTML este întreruptă pentru a executa scriptul, apoi este reluată.

    Cu defer, în head

    Iată cum o pagină încarcă un script cu defer, pus în tag-ul head:

    Scriptul este preluat în mod asincron, și este executat numai după ce analiza HTML este gata.

    Pariția se termină la fel ca atunci când punem scriptul la sfârșitul tag-ului body, dar, în general, execuția scriptului se termină cu mult înainte, deoarece scriptul a fost descărcat în paralel cu parsarea HTML.

    Așa că aceasta este soluția câștigătoare din punct de vedere al vitezei 🏆

    Blocarea parsării

    async blochează parsarea paginii, în timp ce defer nu o face.

    Blocarea randării

    Nici async nici defer nu garantează nimic privind blocarea randării. Acest lucru depinde de dvs. și de scriptul dvs. (de exemplu, asigurându-vă că scripturile dvs. se execută după evenimentul onLoad).

    domInteractive

    Scriptele marcate cu defer sunt executate imediat după evenimentul domInteractive, care are loc după ce HTML este încărcat, analizat și DOM-ul este construit.

    CSS și imaginile în acest moment mai trebuie să fie analizate și încărcate.

    După ce acest lucru este realizat, browserul va emite evenimentul domComplete și apoi onLoad.

    domInteractive Este important deoarece sincronizarea sa este recunoscută ca o măsură a vitezei percepute de încărcare. Consultați MDN pentru mai multe informații.

    Menținerea lucrurilor în ordine

    Un alt caz pro defer: scripturile marcate async sunt executate în ordine ocazională, atunci când devin disponibile. Scripturile marcate defer sunt executate (după terminarea parsării) în ordinea în care sunt definite în markup.

    Să-mi spuneți care este cea mai bună metodă

    Cel mai bun lucru de făcut pentru a accelera încărcarea paginii atunci când folosiți scripturi este să le puneți în head, și să adăugați un atribut defer la tag-ul script:

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

    Acest scenariu este cel care declanșează evenimentul domInteractive mai rapid.

    Considerând avantajele lui defer, pare o alegere mai bună decât async într-o varietate de scenarii.

    Dacă nu vă convine să întârziați prima redare a paginii, asigurați-vă că atunci când pagina este analizată, JavaScript-ul pe care îl doriți este deja executat.

    Descărcați manualul meu gratuit JavaScript Beginner’s Handbook

    Mai multe tutoriale pentru browsere:

    • Câteva trucuri utile disponibile în HTML5
    • Cum am făcut un CMS…să funcționeze offline
    • Ghidul complet al aplicațiilor web progresive
    • Ghidul Fetch API
    • Ghidul Push API
    • Ghidul Channel Messaging API

      • Service Workers Tutorial

    • Ghidul API Cache
    • Ghidul API de notificare
    • Dive into IndexedDB
    • The Selectors API: querySelector și querySelectorAll

      • Încărcați eficient JavaScript cu defer și async

    • The Document Object Model (DOM)
    • The Web Storage API: stocarea locală și stocarea sesiunii

      • Învățați cum funcționează cookie-urile HTTP

    • Apif History
    • Formatul de imagine WebP
    • XMLHttpRequest (XHR)
    • Un tutorial SVG aprofundat
    • Ce sunt URL-urile de date
    • Hartă de parcurs pentru a învăța platforma Web
    • CORS, Cross-Origin Resource Sharing

      • Web Workers

    • Ghidul requestAnimationFrame()
    • Ce este Doctype
    • Ce este Doctype
    • Lucrul cu DevTools Console și cu Console API

      • Aplicația de sinteză a vorbirii

    • Cum să așteptați evenimentul DOM ready în JavaScript simplu
    • Cum să adăugați o clasă la un DOM element DOM

      • Cum se trece în buclă peste elementele DOM din querySelectorAll

    • Cum se elimină o clasă dintr-un element DOM
    • Cum se verifică dacă un element DOM are o clasă
    • Cum se modifică valoarea unui nod DOM
    • Cum se adaugă un eveniment click la o listă de elemente DOM returnate din querySelectorAll
    • WebRTC, API-ul Web în timp real

      • Cum să obțineți poziția de defilare a unui element în JavaScript

    • Cum să înlocuiți un element DOM
    • Cum să acceptați numai imagini într-un câmp de fișier de intrare
    • De ce să folosiți o versiune de previzualizare a unui browser?
    • The Blob Object
    • The File Object
    • The FileReader Object
    • The FileList Object
    • ArrayBuffer
    • ArrayBufferView
    • ArrayBufferView
    • The URL Object
    • Typed Array
    • The DataView Object
    • The BroadcastChannel API
    • The Streams API
    • The FormData Object
    • The Navigator Object
    • Cum se utilizează API-ul de geolocalizare
    • Cum se utilizează API-ul de geolocalizare

      • Cum se utilizează getUserMedia()

    • Cum se utilizează API Drag and Drop
    • Cum se lucrează cu defilarea în paginile web
    • Manipularea formularelor în JavaScript
    • Evenimentele tastaturii
    • Mouse evenimente

      • Evenimente de atingere

    • Cum să eliminați toți copiii dintr-un element DOM
    • Cum să creați un atribut HTML folosind vanilla Javascript
    • Cum să verificați dacă o casetă de verificare este bifată folosind JavaScript?
    • Cum să copiați în clipboard folosind JavaScript
    • Cum să dezactivați un buton folosind JavaScript
    • Cum să faceți o pagină editabilă în browser
    • Cum să faceți o pagină editabilă în browser
    • Cum să de a obține valorile șirurilor de interogare în JavaScript cu URLSearchParams

      • Cum să eliminați toate CSS-urile dintr-o pagină dintr-o dată

    • Cum să utilizați insertAdjacentHTML
    • Safari, avertizați înainte de a părăsi

      • Cum se adaugă o imagine în DOM folosind JavaScript Cum se resetează un formular

    • Cum se utilizează fonturile Google

    .

    By: adminPosted on

    Lasă un răspuns

    Adresa ta de email nu va fi publicată.