Există o cale de ieșire: puneți liniile Java la sfârșitul documentului html (prin urmare, acestea vor fi încărcate după ce a fost desenată întreaga pagină) și numai după aceea conținutul blocurilor va fi afișat în locurile potrivite. Se numeste . Toate proiectele serioase de astăzi încearcă să treacă la noua tehnologie de încărcare cât mai repede posibil. În plus, este absolut ușor.
Există mai multe abordări. Voi începe în ordine.
script src = tip = "text / javascript">
Încărcare asincronă a scriptului HTML5
Standardul HTML5 acceptă capacitatea de a încărca scripturi asincron, ceea ce poate accelera semnificativ timpul general de recuperare a paginii. Doar adauga asincron sau amâna.
< script async src= „http://www.site.ru/script.js” tip = "text / javascript">
< script defer src= „http://www.site.ru/script.js” tip = "text / javascript">
Cum diferă atributele async și defer
În ambele cazuri, obținem încărcare asincronă a scripturilor. Singura diferență este momentul în care începe executarea scriptului. Script cu atribut asincron va fi executat cât mai curând posibil după ce este încărcat complet, dar înainte ca obiectul fereastră să fie încărcat. În cazul utilizării atributului amâna- scriptul nu va rupe ordinea execuției sale în raport cu alte scripturi și execuția lui va avea loc după ce pagina este complet încărcată și analizată, dar înainte de evenimentul DOMContentLoaded al obiectului document.
Din păcate, acest mecanism nu funcționează în prezent în toate browserele (în special IE). De asemenea, nu va funcționa dacă se află în fișier script.js sunt linii document.scrie.
Încărcare asincronă script javascript de la google
După cum știu toți artizanii, Google acordă o atenție deosebită vitezei de încărcare a site-urilor și le reduce pe cele lente în rezultatele căutării. Pentru a ajuta, Google a dezvoltat un script special cu care puteți face încărcare asincronă a javascriptului.
Pentru a utiliza, trebuie doar să înlocuiți
În cele mai vechi versiuni de IE (6 și mai jos), încărcarea asincronă nu funcționează, din păcate, dar practic nu există astfel de utilizatori. Toate celelalte browsere și servicii folosesc cu succes încărcarea accelerată modernă a paginilor web.
Scripturile sincrone sunt proaste, forțează browserul să blocheze construcția arborelui DOM: mai întâi trebuie să obțineți scriptul, să îl executați și abia apoi să continuați procesarea restului paginii. Acest lucru cu siguranță nu este o știre pentru tine și motivul pentru care noi, ca evangheliști, am promovat utilizarea scripturilor asincrone. Iată un exemplu simplu:
<script src =>scenariu> <scenariu> var script = document .createElement ("script"); script.src = „http://somehost.com/awesome-widget.js”; document .getElementsByTagName ("cap") .appendChild (script);scenariu>Care este diferența? În versiunea „rea”, blocăm construcția arborelui DOM, așteptăm până când scriptul este încărcat, executat și abia apoi continuăm să procesăm restul documentului. În al doilea exemplu, începem imediat să executăm un script care creează un element de script care indică o resursă externă, îl adăugăm la document și continuăm procesarea DOM. Distincția este subtilă, dar foarte importantă: scripturile generate dinamic nu blochează.
Deci, e grozav, nu? Scripturile generate dinamic sunt un lucru! Nu asa de repede.
JavaScript încorporat are o capcană mică, dar importantă (și adesea trecută cu vederea): CSSOM îl blochează înainte de a fi executat. De ce? Browserul nu știe ce anume intenționează să facă un astfel de script și, deoarece JavaScript poate manipula proprietățile CSS, blochează și așteaptă în timp ce CSS-ul este analizat și CSSOM-ul este construit. Mai bine să vezi o dată decât să auzi de o sută de ori, luăm în considerare următorul exemplu:
Stai puțin, ce se întâmplă? Ambele scripturi vor fi încărcate în avans și executate la ~ 2,7 secunde după încărcarea paginii. Rețineți că scripturile vor fi încă executate numai după ce CSS-ul este disponibil (~ 2,7 secunde), dar deoarece scripturile sunt deja încărcate când CSSOM-ul devine disponibil, le putem executa imediat, economisind peste o secundă de timp de procesare. Am făcut totul greșit?
Înainte de a răspunde la această întrebare, să ne uităm la un alt exemplu, de data aceasta cu atributul „async”:
<script src = „http://udacity-crp.herokuapp.com/time.js?rtt=1&a” asincron>scenariu> <script src = „http://udacity-crp.herokuapp.com/time.js?rtt=1&b” asincron>scenariu>
Cu atributul asincron prezent, scriptul va fi executat asincron de îndată ce este disponibil. Dacă atributul este absent, ... atunci scriptul este încărcat și executat imediat, înainte de a continua analiza ulterioară a documentului.
Atributul asincron de pe eticheta de script implementează două proprietăți importante: îi spune browserului să nu blocheze construcția DOM sau să blocheze execuția scriptului înainte de construirea CSSOM. Ca urmare, scripturile sunt executate imediat după încărcare (~ 1,6 secunde), fără a aștepta CSSOM. Lista scurtă de rezultate:
Deci, de ce am sugerat până acum să folosim un șablon care folosește scripturi generate dinamic?
Articol original: „Scripturi asincrone” injectate de script considerate dăunătoare Articol citit de: visitorFM, zenwalker, FMRobotThe HTML
Și următoarele exemple arată cum să puneți (un script în linie) în interiorul
Modul de rezervă
Browserele care acceptă valoarea modulului pentru atributul type ignoră orice script cu un atribut nomodule. Acest lucru vă permite să utilizați scripturi de module, oferind, de asemenea, scripturi de rezervă marcate cu nomodule pentru browsere care nu acceptă.
