Cerințe: Când soliciti un site web, trebuie să încarci multe resurse, cererile de rețea afectează și viteza de redare a paginii web, când utilizatorul dă click pe operațiunea pentru a încărca unele resurse poate afecta experiența utilizatorului, acum dezvoltarea rapidă a Internetului, lățimea de bandă și traficul nu mai sunt atât de scumpe, cum să preîncarci resursele în avans sau să stabilești o legătură cu serverul țintă dinainte?
Preconectare
Preconectarea cuvintelor cheie pentru proprietățile elementelor este un indiciu pentru browser că utilizatorul poate avea nevoie de resurse de la sursa țintă pentru ca browserul să le poată folosiÎmbunătățiți experiența utilizatorului prin inițierea preventivă a conexiunilor către această sursă。
preconnect permite browserului să efectueze o serie de acțiuni înainte ca o cerere HTTP să fie trimisă oficial către server, inclusiv rezoluția DNS, negocierea TLS, strângerea de mână TCP, care elimină latența dus-întors și economisește timp utilizatorului.
Preconectarea este un mijloc important de optimizare pentru a reduce traseul dus-întors în multe cereri – în unele cazuri cu sute sau mii de milisecunde de latență.
Iată un exemplu de utilizare a preconnect pentru Google Fonts, unde, adăugând un prompt preconnect la fonts.gstatic.com, browserul inițiază imediat o cerere care va fi executată în paralel cu cererea CSS. În acest scenariu, preconectarea elimină trei RTT-uri (timp de dus-întors) din calea critică șiLatență redusă cu mai mult de jumătate de secundă。
Sintaxa este următoarea:
Documentație:Autentificarea cu hyperlink este vizibilă.
DNS-prefetch folosește DNS prefetch
Prefetch-ul cuvântului cheie dns al atributului element este pentru a alerta browserul către utilizator că acesta ar putea avea nevoie de o resursă de la sursa țintă, astfel încât browserul să poată îmbunătăți experiența utilizatorului efectuând preventiv rezoluția DNS pentru acea sursă.
Prelectura DNS permite browserului să fie pe pagină în timp ce utilizatorul navigheazăRulează rezoluția DNS în fundal。 Astfel, rezoluția DNS se finalizează atunci când utilizatorul dă click pe un link, astfel încât latența poate fi redusă. Prepreluarea DNS a unui anumit URL se poate face prin adăugarea rel="dns-prefetch' la proprietățile unui tag link, recomandăm gestionarea fonturilor Google, Google Analytics și CDN.
"Cererile DNS au foarte puțin trafic de lățime de bandă, dar latența poate fi ridicată, mai ales pe dispozitivele mobile. DNS-ul specificat prin prepreluare poate reduce semnificativ latența în anumite situații, cum ar fi atunci când un utilizator dă click pe un link. Uneori, chiar și o întârziere de o secundă poate fi redusă - Mozilla Developer Network"
Sintaxa este următoarea:
Documentație:Autentificarea cu hyperlink este vizibilă.
Preîncărcare preîncărcată
Valoarea de preîncărcare a proprietății element îți permite să declari o cerere fetch în HTML, specificând resursele de care pagina va avea nevoie în curând, și vrei să începi încărcarea devreme în ciclul de viață al paginii, înainte ca mecanismul principal de randare al browserului să înceapă. Acest lucru asigură că acestea sunt disponibile mai devreme și mai puțin probabil să blocheze randarea paginii, îmbunătățind performanța. Chiar dacă numele conține termenul load, nu se încarcă și nu execută scriptul, ci doar îl programează pentru descărcare și cache cu o prioritate mai mare.
Preload-ul este un nou standard web care controlează modul în care sunt încărcate anumite resurse, o actualizare la prefetch-ul sub-resurselor, care a fost deprevăzut în ianuarie 2016. Această comandă poate <link> fi folosită în , de exemplu <link rel="preload">. În general, cel mai bine este să folosești preload pentru a încărca cele mai importante resurse, cum ar fi imagini, CSS, JavaScript și fișiere de font. Acest lucru nu trebuie confundat cu preîncărcarea browserului, care preîncarcă doar resursele declarate în HTML. Directiva de preîncărcare depășește de fapt această limitare și permite preîncărcarea resurselor definite în CSS și JavaScript, precum și permite decizii privind momentul în care să aplici fiecare resursă.
Preîncărcarea diferă de prefetch prin faptul că se concentrează pe pagina curentă și încarcă resursele cu prioritate mare, în timp ce Prefetch se concentrează pe resursa pe care pagina următoare o va încărca și se încarcă cu prioritate scăzută. De asemenea, reține că preîncărcarea nu blochează evenimentul de încărcare al ferestrei.
Multe tipuri diferite de conținut pot fi preîncărcate. Valorile posibile ale proprietăților sunt:
audio: Un fișier audio, folosit de obicei pentru <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
Încorporare: Resursa care urmează să fie <embed>încorporată în element.
fetch: O resursă accesibilă prin fetch sau cerere XHR, cum ar fi un fișier ArrayBuffer sau JSON.
font: 字体文件。
imagine: Fișier imagine.
obiect: Resursa care urmează să fie <object>încorporată în element.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
lucrător: Un lucrător web JavaScript sau lucrător partajat.
Video: un fișier video, folosit de obicei pentru <video>.
Sintaxa este următoarea:
Documentație:Autentificarea cu hyperlink este vizibilă.
|
Postat pe 26.09.2022 21:45:08
|
|
|
|
Postat pe 28.09.2022 08:54:26
|
