Nõuded: veebilehe taotlemisel tuleb laadida palju ressursse, võrgupäringud mõjutavad samuti veebilehe renderdamise kiirust, kui kasutaja klõpsab operatsioonil, et laadida mõningaid ressursse, võib see mõjutada kasutajakogemust, nüüd on interneti, ribalaiuse ja liikluse kiire areng enam nii kallis, kuidas ressursse eelnevalt laadida või luua link sihtserveriga ette?
Eelühendus
Elementide omaduste märksõna eelühendus annab brauserile vihje, et kasutajal võib olla vaja ressursse sihtallikast, et brauser saaks neid kasutadaParandage kasutajakogemust, alustades ennetavalt ühenduse selle allikaga。
eelühendus võimaldab brauseril teha mitmeid toiminguid enne, kui HTTP päring ametlikult serverisse saadetakse, sealhulgas DNS-lahendus, TLS-i läbirääkimised, TCP käepigistus, mis kõrvaldab edasi-tagasi latentsuse ja säästab kasutaja aega.
Eelühendus on oluline optimeerimisviis, et vähendada paljude päringute edasi-tagasi liikumist – mõnel juhul sadade või tuhandete millisekundite latentsuse võrra.
Siin on näide eelühenduse kasutamisest Google Fontsi jaoks, kus lisades fonts.gstatic.com-le eelühenduse prompti, käivitab brauser kohe päringu, mis täidetakse paralleelselt CSS-päringuga. Selles stsenaariumis elimineerib eelühendus kriitilisest rajast kolm RTT-d (ringreisi aeg) jaLatentsuse vähendamine enam kui poole sekundi võrra。
Süntaks on järgmine:
Dokumentatsioon:Hüperlingi sisselogimine on nähtav.
DNS-prefetch kasutab DNS prefetchi
Elemendi atribuudi märksõna dns-prefetch on selleks, et teavitada brauserit kasutajale, et kasutaja võib vajada sihtallikast pärit ressurssi, et brauser saaks kasutajakogemust parandada, tehes ennetavalt DNS-lahenduse selle allika jaoks.
DNS-i eellaadimine võimaldab brauseril olla lehel, kui kasutaja sirvibKäivita DNS-i resolutsioon taustal。 Nii viiakse DNS-i lahendus lõpule, kui kasutaja klõpsab lingil, nii et latentsust saab vähendada. DNS-i eellaadimine antud URL-ile saab toimuda, lisades lingilildi omadustele rel="dns-prefetch"; soovitame käsitleda Google fonte, Google Analyticsi ja CDN-i.
"DNS-päringutel on väga vähe ribalaiust, kuid latentsus võib olla suur, eriti mobiilseadmetes. Eeltoomisega määratud DNS võib teatud olukordades, näiteks kui kasutaja klõpsab lingil, oluliselt vähendada latentsust. Mõnikord saab isegi ühe sekundi viivitust vähendada – Mozilla Developer Network"
Süntaks on järgmine:
Dokumentatsioon:Hüperlingi sisselogimine on nähtav.
Eellaaditud
Elemendi omaduse eellaadimisväärtus võimaldab sul deklareerida HTML-is toomispäringu, määrates ressursid, mida leht peagi vajab, ning alustada laadimist lehe elutsükli alguses, enne kui brauseri peamine renderdamismehhanism käivitub. See tagab, et need on varem kättesaadavad ja vähem tõenäoliselt blokeerivad lehe renderdamist, parandades jõudlust. Isegi kui nimi sisaldab terminit load, ei laadi ega käivita see skripti, vaid lihtsalt ajastab selle allalaadimiseks ja vahemällu salvestamiseks kõrgema prioriteediga.
Preload on uus veebistandard, mis kontrollib, kuidas konkreetseid ressursse laaditakse, uuendus alamressursi eellaadimisele, mis aegus 2016. aasta jaanuaris. Seda käsku saab kasutada <link> , nt <link rel="eelload">. Üldiselt on kõige parem kasutada eellaadimist, et laadida oma kõige olulisemad ressursid, nagu pildid, CSS, JavaScript ja fondifailid. Seda ei tohi segi ajada brauseri eellaadimisega, mis laadib ainult HTML-is deklareeritud ressursse. Eellaadimisdirektiiv ületab selle piirangu, võimaldab ressursse CSS-is ja JavaScriptis defineeritud eellaadida ning otsustada, millal iga ressurssi rakendada.
Eellaadimine erineb eellaadimisest selle poolest, et keskendub praegusele lehele ja laadib kõrge prioriteediga ressursse, samas kui eellaadimine keskendub ressursile, mida järgmine leht laadib, ja madala prioriteediga. Pane tähele, et eellaadimine ei blokeeri akna laadimise sündmust.
Eellaadida saab palju erinevaid sisutüüpe. Võimalikud kinnisvaraväärtused on:
audio: helifail, mida tavaliselt kasutatakse <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: Elementi manustatav <embed>ressurss.
fetch: Ressurss, millele pääseb ligi fetch või XHR päringu kaudu, näiteks ArrayBuffer või JSON fail.
font: 字体文件。
pilt: Pildifail.
objekt: Elementi sisse manustatud <object>ressurss.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
töötaja: JavaScripti veebitöötaja või jagatud töötaja.
video: videofail, mida tavaliselt kasutatakse <video>.
Süntaks on järgmine:
Dokumentatsioon:Hüperlingi sisselogimine on nähtav.
|
Postitatud 26.09.2022 21:45:08
|
|
|
|
Postitatud 28.09.2022 08:54:26
|
