Vaatimukset: Kun pyydät verkkosivustoa, sinun täytyy ladata paljon resursseja, verkkopyynnöt vaikuttavat myös verkkosivujen renderöintinopeuteen, kun käyttäjä klikkaa toimintoa ladatakseen joitakin resursseja, se voi vaikuttaa käyttäjäkokemukseen, nyt Internetin nopea kehitys, kaistanleveys ja liikenne eivät enää ole niin kalliita, miten resurssit esiladataan etukäteen tai luoda yhteys kohdepalvelimeen etukäteen?
Esiliitäntä
Avainsana preconnect elementtiominaisuuksille on vihje selaimelle siitä, että käyttäjä saattaa tarvita resursseja kohdelähteestä, jotta selain voi käyttää niitäParanna käyttäjäkokemusta aloittamalla ennaltaehkäisevästi yhteydet tähän lähteeseen。
preconnect mahdollistaa selaimen suorittaa useita toimintoja ennen kuin HTTP-pyyntö lähetetään virallisesti palvelimelle, mukaan lukien DNS-ratkaisu, TLS-neuvottelu, TCP-kädenpuristus, mikä poistaa edestakaisen viiveen ja säästää käyttäjältä aikaa.
Esiliittäminen on tärkeä optimointikeino, joka lyhentää edestakaista reittiä monissa pyynnöissä – joissain tapauksissa satojen tai tuhansien millisekuntien viiveellä.
Tässä on esimerkki preconnectin käytöstä Google Fontsissa, jossa lisäämällä esiliittämiskehotteen fonts.gstatic.com:een selain käynnistää välittömästi pyynnön, joka suoritetaan rinnakkain CSS-pyynnön kanssa. Tässä tilanteessa esiliittäminen poistaa kolme RTT:tä (Round-trip Time) kriittiseltä polulta jaViiveen väheneminen yli puolella sekunnilla。
Syntaksi on seuraava:
Dokumentaatio:Hyperlinkin kirjautuminen on näkyvissä.
DNS-prefetch käyttää DNS-prefetchiä
Elementtiattribuutin avainsana dns-prefetch on tarkoitettu ilmoittamaan selaimelle käyttäjälle, että käyttäjä saattaa tarvita resurssia kohdelähteestä, jotta selain voi parantaa käyttäjäkokemusta suorittamalla DNS-ratkaisun etukäteen kyseiselle lähteelle.
DNS-esilataus mahdollistaa selaimen olevan sivulla käyttäjän selaamisen aikanaSuorita DNS-resoluutio taustalla。 Näin DNS-resoluutio valmistuu, kun käyttäjä klikkaa linkkiä, joten viive voidaan pienentää. DNS-esilataus tietylle URL-osoitteelle voidaan tehdä lisäämällä rel="dns-prefetch" linkkitunnisteen ominaisuuksiin; suosittelemme käsittelemään Google-fontteja, Google Analyticsia ja CDN:ää.
"DNS-pyynnöissä on hyvin vähän kaistanleveyttä, mutta viive voi olla korkea, erityisesti mobiililaitteilla. Esihakemalla määritetty DNS voi merkittävästi vähentää viivettä tietyissä tilanteissa, kuten silloin, kun käyttäjä klikkaa linkkiä. Joskus jopa yhden sekunnin viive voidaan lyhentää – Mozilla Developer Network"
Syntaksi on seuraava:
Dokumentaatio:Hyperlinkin kirjautuminen on näkyvissä.
Esilataus esiladattu
Elementtiominaisuuden esilatausarvo mahdollistaa hakupyynnön ilmoittamisen HTML:llä, määrittäen resurssit, joita sivu tarvitsee pian, ja haluat aloittaa lataamisen sivun elinkaaren alkuvaiheessa ennen selaimen pääasiallisen renderöintimekanismin käynnistymistä. Tämä varmistaa, että ne ovat saatavilla aikaisemmin eivätkä todennäköisesti estä sivun renderöintiä, mikä parantaa suorituskykyä. Vaikka nimessä olisi termi load, se ei lataa eikä suorita skriptiä, vaan aikatauluttaa sen lataamaan ja välimuistiin korkeammalla prioriteetilla.
Preload on uusi verkkostandardi, joka säätelee, miten tietyt resurssit ladataan, päivitys aliresurssien esilatausohjelmaan, joka poistettiin käytöstä tammikuussa 2016. Tätä komentoa voidaan <link> käyttää , esim. <link rel="preload">. Yleisesti ottaen on parasta käyttää esilatausta tärkeimpien resurssien, kuten kuvien, CSS:n, JavaScriptin ja fonttitiedostojen, lataamiseen. Tätä ei pidä sekoittaa selaimen esilataukseen, joka esilataa vain HTML-muotoisia resursseja. Preload-direktiivi itse asiassa voittaa tämän rajoituksen ja mahdollistaa resurssien esilatauksen CSS:ssä ja JavaScriptissä sekä antaa mahdollisuuden päättää, milloin kutakin resurssia kannattaa käyttää.
Preload eroaa esilatausohjelmasta siinä, että se keskittyy nykyiseen sivuun ja lataa korkean prioriteetin resursseja, kun taas Prefetch keskittyy seuraavan sivun lataamaan resurssiin ja latautuu matalalla prioriteetilla. Huomaa myös, että esilataus ei estä ikkunan lataustapahtumaa.
Monenlaisia sisältötyyppejä voidaan esiladata. Mahdolliset omaisuusarvot ovat:
audio: Äänitiedosto, jota yleensä käytetään <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: Resurssi, joka upotetaan <embed>elementtiin.
fetch: Resurssi, johon pääsee käsiksi nouto- tai XHR-pyynnön kautta, kuten ArrayBuffer- tai JSON-tiedosto.
font: 字体文件。
kuva: Kuvatiedosto.
objekti: Resurssi, joka upotetaan <object>elementtiin.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
työntekijä: JavaScript-verkkotyöntekijä tai jaettu työntekijä.
video: videotiedosto, jota yleensä käytetään <video>.
Syntaksi on seuraava:
Dokumentaatio:Hyperlinkin kirjautuminen on näkyvissä.
|
Julkaistu 26.9.2022 21.45.08
|
|
|
|
Julkaistu 28.9.2022 8.54.26
|
