Wymagania: Przy żądaniu strony internetowej trzeba załadować dużo zasobów, żądania sieciowe wpływają także na szybkość renderowania stron internetowych, kliknięcie na operację ładowania niektórych zasobów może wpłynąć na doświadczenie użytkownika, teraz szybki rozwój Internetu, przepustowość i ruch nie są już tak kosztowne, jak wcześniej załadować zasoby lub nawiązać wcześniej łącze z docelowym serwerem?
Preconnect
Preconnect słowa kluczowego dla właściwości elementów jest wskazówką dla przeglądarki, że użytkownik może potrzebować zasobów ze źródła docelowego, aby przeglądarka mogła z nich korzystaćPopraw doświadczenie użytkownika, prewencyjnie inicjując połączenia z tym źródłem。
Preconnect pozwala przeglądarce wykonać szereg czynności przed oficjalnym wysłaniem żądania HTTP do serwera, w tym rozwiązywanie DNS, negocjację TLS, handshake TCP, co eliminuje opóźnienia w obie strony i oszczędza czas użytkownika.
Preconnect jest ważnym sposobem optymalizacji, który zmniejsza ścieżkę w obie strony w wielu żądaniach – w niektórych przypadkach o setki lub tysiące milisekund opóźnienia.
Oto przykład użycia preconnect dla Google Fonts, gdzie dodając prompt preconnect do fonts.gstatic.com, przeglądarka natychmiast inicjuje żądanie, które będzie wykonywane równolegle z żądaniem CSS. W tym scenariuszu preconnect eliminuje trzy RTT (czas obie podróży) z krytycznej ścieżki orazZmniejszona latencja o ponad pół sekundy。
Składnia jest następująca:
Dokumentacja:Logowanie do linku jest widoczne.
DNS-prefetch wykorzystuje prefetch DNS
Słowo kluczowe DNS-prefetch atrybutu element ma na celu powiadomienie przeglądarki, że może potrzebować zasobu z docelowego źródła, aby przeglądarka mogła poprawić doświadczenie użytkownika, prewencyjnie wykonując rozwiązywanie DNS dla tego źródła.
Wstępne pobieranie DNS pozwala przeglądarce być na stronie, gdy użytkownik przeglądaUruchamianie rozwiązywania DNS w tle。 W ten sposób rozwiązywanie DNS jest realizowane po kliknięciu przez użytkownika w link, co pozwala zmniejszyć opóźnienia. Wstępne pobieranie DNS danego adresu URL można wykonać, dodając rel="dns-prefetch' do właściwości tagu linku; zalecamy obsługę czcionek Google, Google Analytics i CDN.
"Żądania DNS mają bardzo mały ruch przepustowy, ale opóźnienia mogą być wysokie, zwłaszcza na urządzeniach mobilnych. DNS określony przez wstępne pobieranie może znacząco zmniejszyć opóźnienia w niektórych sytuacjach, na przykład gdy użytkownik kliknie w link. Czasem nawet sekundowe opóźnienie można skrócić – Mozilla Developer Network"
Składnia jest następująca:
Dokumentacja:Logowanie do linku jest widoczne.
Wstępne podładowanie
Wartość wstępnego wprowadzenia właściwości element pozwala zadeklarować żądanie pobierania w HTML, określając zasoby, których strona wkrótce będzie potrzebować, i chcesz zacząć ładować się wcześnie w cyklu życia strony, zanim główny mechanizm renderowania przeglądarki się uruchomi. Dzięki temu są dostępne wcześniej i mniej prawdopodobne, że blokują renderowanie strony, poprawiając wydajność. Nawet jeśli nazwa zawiera termin ładowanie, nie ładuje i nie wykonuje skryptu, lecz po prostu planuje jego pobranie i buforowanie z wyższym priorytetem.
Preload to nowy standard webowy kontrolujący sposób ładowania konkretnych zasobów, będący ulepszeniem prefetchu podzasobów, który został wycofany w styczniu 2016 roku. To polecenie <link> można użyć w , np. <link rel="preload">. Ogólnie rzecz biorąc, najlepiej jest używać preloadu do ładowania najważniejszych zasobów, takich jak obrazy, CSS, JavaScript i pliki czcionek. Nie należy tego mylić z wstępnym ładowaniem przeglądarki, które pobiera jedynie zasoby zadeklarowane w HTML. Dyrektywa preload faktycznie przełamuje to ograniczenie i pozwala na wstępne ładowanie zasobów zdefiniowanych w CSS i JavaScript oraz decyduje, kiedy stosować każdy zasób.
Preload różni się od prefetch tym, że skupia się na bieżącej stronie i ładuje zasoby z wysokim priorytetem, podczas gdy Prefetch skupia się na zasobie, który załaduje następna strona, i ładuje się z niskim priorytetem. Warto też zauważyć, że wstępne ładowanie nie blokuje zdarzenia onload okna.
Można wstępnie załadować wiele różnych typów treści. Możliwe wartości nieruchomości to:
audio: Plik audio, zwykle używany dla <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
osadzenie: Zasób, który ma być osadzony <embed>w elemencie.
fetch: Zasób do uzyskania przez żądanie fetch lub XHR, taki jak plik ArrayBuffer lub JSON.
font: 字体文件。
obraz: plik obrazu.
obiekt: Zasób, który ma być osadzony <object>w elemencie.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
pracownik: Pracownik JavaScript webowy lub współdzielony.
wideo: plik wideo, zwykle używany dla <video>.
Składnia jest następująca:
Dokumentacja:Logowanie do linku jest widoczne.
|
Opublikowano 26.09.2022 21:45:08
|
|
|
|
Opublikowano 28.09.2022 08:54:26
|
