Követelmények: Weboldal kérésekor sok erőforrást kell betölteni, a hálózati kérések is befolyásolják a weboldal megjelenítésének sebességét, amikor a felhasználó rákattint a műveletre bizonyos erőforrások betöltéséhez, az befolyásolhatja a felhasználói élményt, mostantól az internet, sávszélesség és forgalom gyors fejlődése már nem olyan drága, hogyan lehet előre betölteni az erőforrásokat vagy előre kapcsolatot teremteni a célszerverrel?
Előcsatlakozás
Az elem tulajdonságaihoz tartozó előcsatlakozás kulcskulcs utal a böngésző számára, hogy a felhasználónak szüksége lehet a célforrásból származó erőforrásokra, hogy a böngésző használhatja azokatJavítsa a felhasználói élményt azzal, hogy előrelátóan kezdeményezi a kapcsolatot ehhez a forráshoz。
Az előcsatlakozás lehetővé teszi a böngésző számára, hogy számos műveletet hajtson végre, mielőtt egy HTTP kérést hivatalosan elküldenek a szervernek, beleértve a DNS felbontást, a TLS tárgyalást, a TCP kézfogást, ami kiküszöböli a vissza-vissza késleltetést és időt takarít meg a felhasználónak.
Az előcsatlakozás fontos optimalizálási eszköz, amely sok kérésnél csökkenti a vissza-vissza útvonalat – bizonyos esetekben több száz vagy ezer milliszekundumnyi késleltetéssel.
Íme egy példa a preconnect használatára Google Fonts-hoz, ahol ha egy előcsatlakozási promptot adnak fonts.gstatic.com-hez, a böngésző azonnal indít egy kérést, amelyet párhuzamosan hajtanak végre a CSS kéréssel. Ebben az esetben az előcsatlakozás három RTT-t (Round-Trip Time) távolít el a kritikus útvonalról, ésTöbb mint fél másodperccel csökkentett késleltetés。
A szintaxis a következő:
Dokumentáció:A hiperlink bejelentkezés látható.
DNS-prefetch DNS prefetch használ
Az elem attribútumának DNS-prefetch kulcsszava, hogy értesítse a böngészőt arról, hogy a felhasználónak szüksége lehet egy erőforrásra a célforrásból, így a böngésző javíthatja a felhasználói élményt azzal, hogy előremegő DNS-feloldást végez az adott forrásnál.
A DNS előlekérés lehetővé teszi, hogy a böngésző az oldalon legyen, miközben a felhasználó böngészFuttasd a DNS-felbontást a háttérben。 Így a DNS felbontása akkor fejeződik ki, amikor a felhasználó rákattint egy linkre, így a késleltetés csökkenthető. Egy adott URL DNS-előhívása úgy is megvalósítható, hogy rel="dns-prefetch" hozzáadásával adható a link címke tulajdonságaihoz; javasoljuk a Google betűtípusok, Google Analytics és CDN kezelését.
"A DNS-kéréseknek nagyon kevés sávszélességi forgalma van, de a késleltetés magas lehet, különösen mobil eszközökön. Az előhívással meghatározott DNS bizonyos esetekben jelentősen csökkentheti a késleltetést, például amikor a felhasználó rákattint egy linkre. Néha még egy másodperces késleltetés is csökkenthető – Mozilla Fejlesztői Hálózat"
A szintaxis a következő:
Dokumentáció:A hiperlink bejelentkezés látható.
Előbetöltés előre betöltött
Az elem tulajdonságának előbetöltési értéke lehetővé teszi, hogy HTML-ben betöltési kérést jelents meg, megadva az oldalnak hamarosan szükséges erőforrásokat, és az oldal életciklusának elején kell elkezdeni betölteni, mielőtt a böngésző fő renderelési mechanizmusa elindulna. Ez biztosítja, hogy korábban elérhetővé váljanak, és kevésbé akadályozzák az oldal megjelenítését, javítva a teljesítményt. Még ha a név tartalmazza is a terhelés kifejezést, nem tölti be és hajtja le a szkriptet, hanem csak ütemezi, hogy letöltse és gyorsítótározza magasabb prioritással.
A Preload egy új webes szabvány, amely szabályozza, hogyan töltenek be bizonyos erőforrásokat, egy frissítés az alresource prefetch-re, amelyet 2016 januárjában elavult lejárattak. Ez a parancs használható <link> , például <link rel="preload">. Általánosságban a legjobb, ha előretöltést használsz a legfontosabb erőforrások betöltésére, mint például képek, CSS, JavaScript és betűtípus fájlok. Ezt nem szabad összetéveszteni a böngésző előbetöltésével, amely csak HTML-ben bejelentett erőforrásokat tölt be. Az előzetes betöltési direktíva valójában leküzdi ezt a korlátot, lehetővé teszi az erőforrások CSS-ben és JavaScriptben történő előbetöltését, valamint lehetővé teszi az erőforrások alkalmazásának időpontját.
Az előtöltés abban különbözik az előtöltéstől, hogy a jelenlegi oldalra fókuszál, és magas prioritású erőforrásokat tölt be, míg a Prefetch arra az erőforrásra fókuszál, amelyet a következő oldal tölt be, és alacsony prioritású. Fontos megjegyezni, hogy az előbetöltés nem blokkolja az ablak betöltési eseményét.
Számos különböző tartalomtípus előre betölthető. A lehetséges értékek a következők:
audio: Egy hangfájl, amelyet általában <audio>a .
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
beágyazás: Az elembe beágyazandó erőforrás<embed>.
fetch: Egy erőforrás, amelyet fetch vagy XHR kéréssel lehet elérni, például ArrayBuffer vagy JSON fájl.
font: 字体文件。
kép: Képfájl.
objektum: Az elembe beágyazandó erőforrás<object>.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
worker: JavaScript webes munkatárs vagy megosztott munkatárs.
videó: egy videófájl, általában <video>a .
A szintaxis a következő:
Dokumentáció:A hiperlink bejelentkezés látható.
|
Közzétéve 2022. 09. 26. 21:45:08
|
|
|
|
Közzétéve 2022. 09. 28. 8:54:26
|
