Zahteve: Ko zahtevate spletno stran, morate naložiti veliko virov, omrežne zahteve vplivajo tudi na hitrost upodabljanja spletne strani, ko uporabnik klikne na operacijo za nalaganje nekaterih virov, lahko to vpliva na uporabniško izkušnjo, zdaj pa hiter razvoj interneta, pasovna širina in promet niso več tako dragi, kako vnaprej naložiti vire ali vzpostaviti povezavo s ciljnim strežnikom?
Predpovezava
Predpovezava ključnih besed za lastnosti elementov je namig brskalniku, da uporabnik morda potrebuje vire iz ciljnega vira, da jih brskalnik lahko uporabljaIzboljšajte uporabniško izkušnjo z vnaprejšnjim vzpostavitvijo povezav s tem virom。
Preconnect omogoča brskalniku, da izvede več dejanj, preden je HTTP zahtevek uradno poslan strežniku, vključno z DNS reševanjem, TLS pogajanji, TCP roko, kar odpravlja zakasnitev v obe smeri in prihrani čas uporabniku.
Predpovezava je pomemben način optimizacije za zmanjšanje povratne poti pri številnih zahtevkih – v nekaterih primerih za stotine ali tisoče milisekund zakasnitve.
Tukaj je primer uporabe preconnect za Google Fonts, kjer brskalnik z dodajanjem poziva za preconnect fonts.gstatic.com takoj sproži zahtevo, ki se izvede vzporedno s CSS zahtevo. V tem primeru predpovezava odstrani tri RTT-je (čas povratne povezave) s kritične poti inZmanjšana zakasnitev za več kot pol sekunde。
Sintaksa je naslednja:
Dokumentacija:Prijava do hiperpovezave je vidna.
DNS-prefetch uporablja DNS prefetch
Ključna beseda dns-prefetch atributa element je namenjena obveščanju brskalnika uporabniku, da uporabnik morda potrebuje vir iz ciljnega vira, da lahko brskalnik izboljša uporabniško izkušnjo z vnaprejšnjim izvajanjem DNS reševanja tega vira.
DNS predhodno pridobivanje omogoča, da je brskalnik na strani, medtem ko uporabnik brska po straniZaženi DNS ločljivost v ozadju。 Na ta način se DNS rešitev zaključi, ko uporabnik klikne na povezavo, kar lahko zmanjša zakasnitev. DNS predhodno pridobivanje določenega URL-ja lahko izvedete z dodajanjem rel="dns-prefetch' lastnostim oznake povezave, priporočamo uporabo Google pisav, Google Analytics in CDN.
"DNS zahteve imajo zelo malo pasovnega prometa, vendar je zakasnitev lahko visoka, še posebej na mobilnih napravah. DNS, določen s predhodnim pridobivanjem, lahko bistveno zmanjša zakasnitev v določenih primerih, na primer ko uporabnik klikne na povezavo. Včasih je mogoče zmanjšati celo enosekundno zamudo – Mozilla Developer Network"
Sintaksa je naslednja:
Dokumentacija:Prijava do hiperpovezave je vidna.
Prednaložitev
Prednalagalna vrednost lastnosti element vam omogoča, da v HTML razglasite zahtevo za privaljanje, pri čemer določite vire, ki jih bo stran kmalu potrebovala, in želite začeti nalagati zgodaj v življenjskem ciklu strani, preden se začne glavni mehanizem upodabljanja brskalnika. To zagotavlja, da so na voljo prej in manj verjetno blokirajo upodabljanje strani, kar izboljša zmogljivost. Tudi če ime vsebuje izraz load, se skripta ne naloži in ne zažene, ampak jo le načrtuje za prenos in predpomnjenje z višjo prioriteto.
Preload je nov spletni standard, ki nadzoruje, kako se nalagajo določeni viri, nadgradnja prednalaganja podvirov, ki je bil ukinjen januarja 2016. Ta ukaz je mogoče <link> uporabiti v , npr. <link rel="preload">. Na splošno je najbolje uporabiti prednaložitev za nalaganje najpomembnejših virov, kot so slike, CSS, JavaScript in datoteke s pisavami. To ne gre zamenjevati s predhodnim nalaganjem brskalnika, ki prednaloži le vire, deklarirane v HTML. Direktiva za prednalaganje dejansko premaga to omejitev in omogoča prednalaganje virov, definiranih v CSS in JavaScriptu, ter odločanje o tem, kdaj uporabiti vsak vir.
Prednalaganje se razlikuje od prednalaganja po tem, da se osredotoča na trenutno stran in nalaga vire z visoko prioriteto, medtem ko se Prednalaganje osredotoča na vir, ki ga bo naložila naslednja stran, in nalaga z nizko prioriteto. Prav tako upoštevajte, da prednalaganje ne blokira dogodka nalaganja okna.
Mogoče je vnaprej naložiti veliko različnih vrst vsebin. Možne vrednosti lastnosti so:
avdio: zvočna datoteka, običajno uporabljena za <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
vgradnja: Vir, ki je vgrajen <embed>v element.
fetch: Vir, do katerega je treba dostopati preko fetch ali XHR zahteve, kot je datoteka ArrayBuffer ali JSON.
font: 字体文件。
slika: Slikovna datoteka.
objekt: Vir, ki ga je treba vgraditi <object>v element.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
delavec: JavaScript spletni delavec ali delni delavec.
video: video datoteka, običajno uporabljena za <video>.
Sintaksa je naslednja:
Dokumentacija:Prijava do hiperpovezave je vidna.
|
Objavljeno na 26. 09. 2022 21:45:08
|
|
|
|
Objavljeno na 28. 09. 2022 08:54:26
|
