Reikalavimai: Prašydami svetainės, turite įkelti daug išteklių, tinklo užklausos taip pat turi įtakos tinklalapio atvaizdavimo greičiui, kai vartotojas spustelėja operaciją, kad įkeltų kai kuriuos išteklius, gali turėti įtakos vartotojo patirčiai, dabar sparti interneto plėtra, pralaidumas ir srautas nebėra tokie brangūs, kaip iš anksto įkelti išteklius arba iš anksto užmegzti ryšį su tiksliniu serveriu?
Išankstinis prisijungimas
Raktinis žodis "preconnect" elemento ypatybėms yra užuomina naršyklei, kad vartotojui gali prireikti išteklių iš tikslinio šaltinio, kad naršyklė galėtų juos naudotiPagerinkite vartotojo patirtį prevenciškai inicijuodami ryšius su šiuo šaltiniu。
išankstinis prisijungimas leidžia naršyklei atlikti keletą veiksmų prieš oficialiai išsiunčiant HTTP užklausą į serverį, įskaitant DNS raišką, TLS derybas, TCP rankos paspaudimą, kuris pašalina delsą pirmyn ir atgal ir taupo vartotojo laiką.
Išankstinis prisijungimas yra svarbi optimizavimo priemonė, padedanti sumažinti daugelio užklausų kelią, kai kuriais atvejais šimtais ar tūkstančiais milisekundžių.
Štai "Google" šriftų išankstinio prisijungimo naudojimo pavyzdys, kai prie fonts.gstatic.com pridėjus išankstinio prisijungimo raginimą, naršyklė nedelsdama inicijuos užklausą, kuri bus vykdoma lygiagrečiai su CSS užklausa. Pagal šį scenarijų išankstinis prisijungimas pašalina tris RTT (pirmyn ir atgal laiką) iš kritinio kelio irSumažinta delsa daugiau nei puse sekundės。
Sintaksė yra tokia:
Dokumentacija:Hipersaito prisijungimas matomas.
DNS išankstinis paėmimas naudoja DNS išankstinį paėmimą
Elemento atributo raktinis žodis dns-prefetch yra įspėti naršyklę vartotojui, kad vartotojui gali prireikti išteklių iš tikslinio šaltinio, todėl naršyklė gali pagerinti vartotojo patirtį prevenciškai atlikdama to šaltinio DNS skiriamąją gebą.
DNS išankstinis gavimas leidžia naršyklei būti puslapyje, kol vartotojas naršoPaleiskite DNS skiriamąją gebą fone。 Tokiu būdu DNS skiriamoji geba baigiama, kai vartotojas spustelėja nuorodą, todėl delsa gali būti sumažinta. DNS išankstinį tam tikro URL gavimą galima atlikti pridedant rel="dns-prefetch" prie nuorodos žymos ypatybių, rekomenduojame tvarkyti "Google" šriftus, "Google Analytics" ir CDN.
"DNS užklausos turi labai mažą pralaidumo srautą, tačiau delsa gali būti didelė, ypač mobiliuosiuose įrenginiuose. Išankstinio gavimo metu nurodytas DNS gali žymiai sumažinti delsą tam tikrais atvejais, pvz., kai vartotojas spustelėja saitą. Kartais galima sumažinti net vienos sekundės delsą - "Mozilla Developer Network"
Sintaksė yra tokia:
Dokumentacija:Hipersaito prisijungimas matomas.
Iš anksto įkelta
Elemento ypatybės išankstinio įkėlimo reikšmė leidžia deklaruoti gavimo užklausą HTML formatu, nurodant išteklius, kurių netrukus prireiks puslapiui, ir norite pradėti įkelti puslapio gyvavimo ciklo pradžioje, prieš paleidžiant pagrindinį naršyklės atvaizdavimo mechanizmą. Tai užtikrina, kad jie bus pasiekiami anksčiau ir mažiau blokuos puslapio atvaizdavimą, pagerindami našumą. Net jei pavadinime yra terminas load, jis neįkelia ir nevykdo scenarijaus, o tik suplanuoja jį atsisiųsti ir talpykloje su didesniu prioritetu.
Išankstinis įkėlimas yra naujas žiniatinklio standartas, kontroliuojantis, kaip įkeliami konkretūs ištekliai, atnaujinimas į išankstinį išteklių paėmimą, kuris buvo nebenaudojamas 2016 m. sausio mėn. Ši komanda gali <link> būti naudojama , pvz., <link rel="preload">. Apskritai, norint įkelti svarbiausius išteklius, pvz., vaizdus, CSS, JavaScript ir šriftų failus, geriausia naudoti išankstinį įkėlimą. To nereikia painioti su išankstiniu naršyklės įkėlimu, kuris iš anksto įkelia tik HTML deklaruotus išteklius. Išankstinio įkėlimo direktyva iš tikrųjų įveikia šį apribojimą ir leidžia iš anksto įkelti išteklius, apibrėžtus CSS ir JavaScript, ir leidžia nuspręsti, kada taikyti kiekvieną išteklių.
Išankstinis įkėlimas skiriasi nuo išankstinio gavimo tuo, kad jis sutelkia dėmesį į dabartinį puslapį ir įkelia išteklius su dideliu prioritetu, o išankstinis paėmimas sutelkia dėmesį į išteklius, kuriuos įkels kitas puslapis, ir įkelia žemu prioritetu. Taip pat atkreipkite dėmesį, kad išankstinis įkėlimas neblokuoja lango įkėlimo įvykio.
Galima iš anksto įkelti daug skirtingų turinio tipų. Galimos ypatybės reikšmės:
audio: garso failas, paprastai naudojamas <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: išteklius, kuris turi būti įdėtas <embed>į elementą.
fetch: išteklius, pasiekiamas naudojant fetch arba XHR užklausą, pvz., ArrayBuffer arba JSON failą.
font: 字体文件。
vaizdas: Vaizdo failas.
objektas: išteklius, kuris turi būti įdėtas <object>į elementą.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
darbuotojas: "JavaScript" žiniatinklio darbuotojas arba bendrai naudojamas darbuotojas.
Vaizdo įrašas: vaizdo failas, paprastai naudojamas <video>.
Sintaksė yra tokia:
Dokumentacija:Hipersaito prisijungimas matomas.
|
Paskelbta 2022-09-26 21:45:08
|
|
|
|
Paskelbta 2022-09-28 08:54:26
|
