Požiadavky: Pri požiadavke na webovú stránku je potrebné načítať veľa zdrojov, sieťové požiadavky tiež ovplyvňujú rýchlosť vykresľovania webovej stránky, keď používateľ klikne na operáciu na načítanie, niektoré zdroje môžu ovplyvniť používateľský zážitok, teraz už rýchly rozvoj internetu, šírky pásma a prevádzky nie sú také drahé, ako vopred načítať zdroje alebo nadviazať spojenie s cieľovým serverom vopred?
Preconnect
Preconnect kľúčových slov pre vlastnosti prvkov je pre prehliadač nápovedou, že používateľ môže potrebovať zdroje z cieľového zdroja, aby ich prehliadač mohol využívaťZlepšite používateľský zážitok tým, že predbežne iniciujete spojenie s týmto zdrojom。
PreConnect umožňuje prehliadaču vykonať niekoľko akcií pred oficiálnym odoslaním HTTP požiadavky na server, vrátane DNS riešenia, TLS vyjednávania, TCP handshake, čo eliminuje latenciu pri spiatočnej ceste a šetrí čas používateľovi.
Preconnect je dôležitý spôsob optimalizácie na zníženie cesty tam a späť pri mnohých požiadavkách – v niektorých prípadoch o stovky alebo tisíce milisekúnd latencie.
Tu je príklad použitia preconnect pre Google Fonts, kde pridaním výzvy na preconnect do fonts.gstatic.com prehliadač okamžite spustí požiadavku, ktorá sa vykoná paralelne s CSS požiadavkou. V tomto scenári predpripojenie eliminuje tri RTT (čas okružnej cesty) z kritickej cesty aZnížená latencia o viac ako pol sekundy。
Syntax je nasledovná:
Dokumentácia:Prihlásenie na hypertextový odkaz je viditeľné.
DNS-prefetch používa DNS prefetch
Kľúčové slovo dns-prefetch atribútu element slúži na upozornenie prehliadača používateľovi, že používateľ môže potrebovať zdroj z cieľového zdroja, aby prehliadač mohol zlepšiť používateľský zážitok tým, že predbežne vykoná DNS riešenie tohto zdroja.
DNS prednačítanie umožňuje prehliadaču byť na stránke, zatiaľ čo používateľ prehliadaSpustenie DNS riešenia na pozadí。 Týmto spôsobom sa DNS vyriešenie dokončí, keď používateľ klikne na odkaz, čím sa môže znížiť latencia. DNS prednačítanie danej URL možno vykonať pridaním rel="dns-prefetch' k vlastnostiam link tagu, odporúčame spravovať Google fonty, Google Analytics a CDN.
"DNS požiadavky majú veľmi nízku šírku pásma, ale latencia môže byť vysoká, najmä na mobilných zariadeniach. DNS špecifikované prednačítaním môže výrazne znížiť latenciu v určitých situáciách, napríklad keď používateľ klikne na odkaz. Niekedy sa dá skrátiť aj oneskorenie jednej sekundy – Mozilla Developer Network"
Syntax je nasledovná:
Dokumentácia:Prihlásenie na hypertextový odkaz je viditeľné.
Prednastavené predpätie
Prednačítaná hodnota vlastnosti element vám umožňuje deklarovať fetch požiadavku v HTML, kde určia zdroje, ktoré stránka čoskoro bude potrebovať, a chcete začať načítavať už na začiatku životného cyklu stránky, ešte pred spustením hlavného renderovacieho mechanizmu prehliadača. To zabezpečuje, že sú dostupné skôr a menej pravdepodobne zablokujú vykresľovanie stránky, čím sa zlepšuje výkon. Aj keď názov obsahuje pojem load, skript sa nenačíta a nespúšťa, ale len ho naplánuje na stiahnutie a ukladanie do vyrovnávacej pamäte s vyššou prioritou.
Preload je nový webový štandard, ktorý riadi, ako sa načítavajú konkrétne zdroje, čo je vylepšenie prefetchovania podzdrojov, ktoré bolo ukončené v januári 2016. Tento príkaz možno <link> použiť v , napr. <link rel="preload">. Vo všeobecnosti je najlepšie použiť preload na načítanie najdôležitejších zdrojov, ako sú obrázky, CSS, JavaScript a fontové súbory. Toto by sa nemalo zamieňať s prednačítaním prehliadača, ktoré prednačítava iba zdroje deklarované v HTML. Smernica prednačítania toto obmedzenie v skutočnosti prekonáva a umožňuje prednačítanie zdrojov definovaných v CSS a JavaScripte a umožňuje rozhodovať o tom, kedy aplikovať každý zdroj.
Prednačítanie sa líši od prefetchu tým, že sa zameriava na aktuálnu stránku a načítava zdroje s vysokou prioritou, zatiaľ čo Prefetch sa zameriava na zdroj, ktorý načíta ďalšia stránka, a načítava s nízkou prioritou. Tiež si všimnite, že prednačítanie neblokuje udalosť načítania okna.
Je možné prednačítať mnoho rôznych typov obsahu. Možné hodnoty nehnuteľností sú:
audio: Zvukový súbor, zvyčajne používaný pre <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: Zdroj, ktorý má byť vložený <embed>do prvku.
fetch: Zdroj, ku ktorému sa pristupuje cez fetch alebo XHR požiadavku, napríklad súbor ArrayBuffer alebo JSON.
font: 字体文件。
obrázok: Obrazový súbor.
objekt: Zdroj, ktorý má byť vložený <object>do prvku.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
pracovník: JavaScriptový webový pracovník alebo zdieľaný pracovník.
video: video súbor, zvyčajne používaný pre <video>.
Syntax je nasledovná:
Dokumentácia:Prihlásenie na hypertextový odkaz je viditeľné.
|
Zverejnené 26. 9. 2022 21:45:08
|
|
|
|
Zverejnené 28. 9. 2022 8:54:26
|
