Preîncărcarea (sau preîncărcarea) este noul standard. concepute pentru a îmbunătăți performanța și de a oferi dezvoltator un control mai precis asupra încărcării resurselor. Acesta oferă dezvoltatorilor posibilitatea de a crea o secvență de boot personalizat și logica evită problemele de performanță cauzate de downloader script.
Articole pe acest subiect în SmashingMagazine:
Preîncărcați ( ) Este o directivă de eșantionare declarativă.
Nu avem o astfel de oportunitate?
Ceva similar este. Ea a apărut pe web pentru o lungă perioadă de timp și este susținută de cele mai multe browsere. Cu ceva timp în urmă, Chrome a introdus și . Deci, ce este nou în preîncărcarea? Ceea ce îl face diferit de restul directivelor? Toate acestea spun browser-ul despre resursele de probă, nu-i așa?
Da, este, dar există diferențe semnificative între ele. Aceste diferențe doar necesită apariția unei noi directive, sarcini, back-rupere vechi.
prefetching ( ) Este o directivă care spune browser-ului pentru a prelua o resursă care va fi necesară în timpul tranziției la pagina următoare. Acest lucru înseamnă că resursa va fi incluși în eșantion cu o prioritate extrem de scăzută (pentru că browser-ul știe că resursele pentru pagina curentă este mai importantă decât resursele care vor fi necesare în următorii). Acest lucru înseamnă că utilizarea principală a acestui prefetchinga accelerare a încărca pagina următoare, nu cel curent.
Subresurs ( ) A fost planificat pentru a face față provocărilor paginii curente, dar cele mai multe dintre problemele pe care le este ineficient. Deoarece dezvoltatorul nu poate seta prioritatea de utilizare a resurselor, browser-ul (sau mai degrabă Chrome și browser bazat pe Chromium) le descarcă cu o prioritate destul de scăzută în majoritatea cazurilor, acest lucru înseamnă că cererea de resursa durează aproximativ aceeași cantitate de timp, fără subresursa.
Cum pot obține cea mai bună preincarcarea?
Preîncărcarea este proiectat pentru a lucra la pagina curentă, precum și subresurs, dar cu o diferență mică, dar importantă. Avem de pre-încărcare ca un atribut. care permite browser-ul pentru a face lucruri care sunt imposibile cu prefetchingom și subresursom:
- Browserul poate solicita dreptul de resurse o prioritate, în conformitate cu care acestea vor fi încărcate - nu vor exista resurse importante de întârziere sau de pompare greu secundară.
- Browserul poate asigura conformitatea cu directivele politicii de securitate de conținut de resurse și nu pentru a merge la serverul de încredere.
- Browserul poate trimite un antet Accept corespunzător pe baza tipului de resurse (de exemplu, imagine / WebP la probă de imagine).
- Browserul cunoaște tipul de resurse și, prin urmare, se poate stabili dacă acesta poate fi utilizat în cererile ulterioare aceleiași resurse.
Preîncărcarea este, de asemenea, caracterizat prin aceea că acesta are un eveniment onLoad funcțional (cel puțin în Chrome în acest caz, nu funcționează pentru celelalte două valori rel).
De asemenea, preîncarcă nu blochează evenimentul onload al ferestrei. Desigur, cu excepția cazurilor în care resursa preîncărcat cere unei alte resurse, evenimentul de blocare.
Combinația tuturor acestor caracteristici implementează o serie de oportunități anterior nu sunt disponibile pentru noi.
Să le ia în considerare separat.
Descărcați resurse „târzii-detectate“
Acum ai un mijloc de a spune browser-ului: „Hei, browser-ul dvs.! Aici este resursa care aveți nevoie pentru a fi sigur, așa că descărcați-l acum. "
În codul, această propoziție este după cum urmează:
Ca un atribut indică tipul de resursă descărcabil, poate avea următoarele valori:
Lista completă a valorilor este în caietul de sarcini.
Omitere ca valori de atribute sau atribuire incorectă este echivalentă XHR-cerere, în care browser-ul nu este conștient de faptul că el alege, prin care are loc eșantionarea cu prioritate scăzută.
fonturi incarcare timpurie
Una dintre cele mai populare soiuri de „detectate mai târziu resurse critice“ sunt fonturi web. Pe de o parte, în cele mai multe cazuri, acestea sunt critice pentru redare de text pe pagina (atâta timp cât nu avem proprietăți font-display vor fi puse în aplicare). Pe de altă parte, fonturile sunt situate adânc în măruntaiele CSS, chiar și în cazul în care browser-ul preîncărcare parse CSS, acesta nu poate fi sigur că acestea vor avea nevoie până când rezolve cauza lor de legare la selectorii specifice, nodurile DOM. Deși în browserele ar trebui să se ocupe de teorie cu ea, nici unul dintre ei nu face acest lucru, deoarece ar duce la descărcări false în cazurile în care declarația de stil trebuie rescrise în următoarele linii de CSS.
În general, este complicat.
Dar am putea ocoli această complexitate prin includerea unui font de directivă pretensionate că exact ceea ce ai nevoie. De exemplu:
Un punct ar trebui să fie clar: trebuie să adăugați un atribut crossorigin atunci când selectați fonturi, așa cum se face într-un mod anonim CORS. Da, chiar dacă fonturile sunt pe aceeași gazdă ca pagina. Din păcate.
Atributul tip oferă preîncarcă resursei numai în browsere care acceptă acest tip de font. În acest moment, preîncarcă este acceptată numai pe Chrome și suportă perfect WOFF2, dar în preîncărcarea viitor pot apărea în alte browsere, și nu putem garanta că acestea vor WOFF2 sprijin. Același lucru se aplică altor tipuri de resurse pe care le-ați pre-încărcate și că nu există nici un sprijin absolut în browser.
încărcare dinamică fără pornire
Următorul scenariu interesant care devine disponibilă, se descarcă resursa dorită pe care nu vor să înceapă imediat. De exemplu, dacă doriți să executați un script într-o anumită perioadă de existență a paginii, fără a avea un control asupra script-ul (care este, fără posibilitatea de a adăuga o funcție runNow ()).
Acum suntem foarte limitate în alegerea de moduri de a face acest lucru. Dacă introduceți doar script-ul în locul potrivit pentru a efectua, browser-ul va trebui să descărcați mai întâi script-ul pentru a rula, poate dura ceva timp. Ai putea descărca script-ul în avans, folosind XHR, dar browser-ul va refuza să facă acest lucru, pentru că resursa nu a fost descărcat de același tip, care încearcă să-l folosească.
Deci, ce se poate face?
Fără preîncărcare puțin. În unele cazuri, puteți efectua conținutul script folosind eval (). dar acest lucru nu este întotdeauna posibil și are efecte secundare. Dar, cu pre-încărcare este posibil!
Puteți porni de la începutul paginii este încărcată, până la punctul în cazul în care doriți să executați script-ul (dar odată ce sunteți sigur că acest cod nu va interfera cu încărcarea altor resurse, mai critice). Acum, când trebuie să-l rulați, trebuie doar să introduceți tag-ul script-ul, și asta e de ajuns.
încărcător de markup asincronă
Un alt hack rece este de a utiliza handler onLoad pentru a crea o aparență de încărcător asincron direct în marcaj. Scott Jel primul experimentat cu ea ca o parte din biblioteca lor loadCSS. Putem folosi următorul cod scurt:
Și acest lucru este suficient pentru a obține încărcarea asincronă de stiluri. Scott a făcut, de asemenea, o pagină care demonstrează această capacitate.
De asemenea, funcționează cu script-uri asincrone.
Dar tu spui că avem deja