Изисквания: При заявка за уеб сайт трябва да заредите много ресурси, мрежовите заявки също влияят на скоростта на рендериране на уеб страницата; когато потребителят кликне върху операцията за зареждане на някои ресурси, това може да повлияе на потребителското изживяване, сега бързото развитие на интернет, пропускателната способност и трафикът вече не са толкова скъпи, как да се предварително заредят ресурсите или да се установи връзка с целевия сървър предварително?
Предварително свързване
Ключовата дума preconnect за свойствата на елемента е подсказка към браузъра, че потребителят може да се нуждае от ресурси от целевия източник, за да може браузърът да ги използваПодобряване на потребителското изживяване чрез предварително иницииране на връзки към този източник。
предварителното свързване позволява на браузъра да извърши редица действия преди официално изпращане на HTTP заявка към сървъра, включително DNS разрешаване, TLS преговори, TCP ръкостискане, което елиминира двупосочното закъснение и спестява време на потребителя.
Preconnect е важен метод за оптимизация за намаляване на пътя на двупосочното пътуване при много заявки – в някои случаи с латентност от стотици или хиляди милисекунди.
Ето пример за използване на предварително свързване за Google Fonts, където чрез добавяне на предварително свързване към fonts.gstatic.com, браузърът незабавно инициира заявка, която се изпълнява паралелно с CSS заявката. В този сценарий предварителното свързване елиминира три RTT (време за връщане на пътуване) от критичния път иНамалена латентност с повече от половин секунда。
Синтаксисът е следният:
Документация:Входът към хиперлинк е видим.
DNS-prefetch използва DNS prefetch
Ключовата дума dns-prefetch на атрибута елемент е да предупреди браузъра потребителя, че потребителят може да се нуждае от ресурс от целевия източник, така че браузърът да подобри потребителското изживяване чрез предварително извършване на DNS резолюция за този източник.
DNS prefetching позволява на браузъра да бъде на страницата, докато потребителят сърфираСтартирай DNS резолюция във фонов режим。 По този начин DNS резолюцията се завършва, когато потребителят кликне върху линк, така че латентността може да се намали. DNS prefetching на даден URL адрес може да се направи чрез добавяне на rel="dns-prefetch" към свойствата на линк таг, препоръчваме да се обработват Google шрифтове, Google Analytics и CDN.
"DNS заявките имат много малък трафик с пропускателна лента, но латентността може да бъде висока, особено на мобилни устройства. DNS, определен чрез предварително извличане, може значително да намали латентността в определени ситуации, например когато потребител кликне върху линк. Понякога дори едносекундно забавяне може да бъде намалено - Mozilla Developer Network"
Синтаксисът е следният:
Документация:Входът към хиперлинк е видим.
Предварително натоварване
Стойността за предварително зареждане на свойството element ви позволява да обявите заявка за fetch в HTML, като посочвате ресурсите, от които страницата ще има нужда скоро, и искате да започнете зареждането рано в жизнения цикъл на страницата, преди да започне основният механизъм за рендериране на браузъра. Това гарантира, че те са достъпни по-рано и по-малко вероятно да блокират рендерирането на страницата, подобрявайки производителността. Дори ако името съдържа термина load, скрипта не се зарежда и изпълнява, а просто го планира да изтегля и кешира с по-висок приоритет.
Preload е нов уеб стандарт, който контролира как се зареждат конкретни ресурси, ъпгрейд на subresource prefetch, който беше прекратен през януари 2016 г. Тази команда може <link> да се използва например в , напр. <link rel="preload">. Обикновено е най-добре да използвате предварително зареждане, за да заредите най-важните си ресурси, като изображения, CSS, JavaScript и файлове с шрифтове. Това не бива да се бърка с предварителното зареждане на браузъра, което зарежда само ресурси, декларирани в HTML. Директивата за предварително зареждане всъщност преодолява това ограничение и позволява предварително зареждане на ресурси, дефинирани в CSS и JavaScript, и дава решения кога да се приложи всеки ресурс.
Preload се различава от prefetch по това, че се фокусира върху текущата страница и зарежда ресурси с висок приоритет, докато Prefetch се фокусира върху ресурса, който следващата страница ще зареди, и се зарежда с нисък приоритет. Също така имайте предвид, че предварителното зареждане не блокира събитието за зареждане в прозореца.
Могат да се предварително инсталират различни типове съдържание. Възможните стойности на свойствата са:
аудио: Аудио файл, обикновено използван за <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: Ресурсът, който да бъде вграден <embed>в елемента.
fetch: Ресурс, достъпен чрез fetch или XHR заявка, като ArrayBuffer или JSON файл.
font: 字体文件。
изображение: Файл с изображение.
обект: Ресурсът, който трябва да бъде вграден <object>в елемента.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
worker: JavaScript уеб работник или споделен работник.
Видео: Видео файл, обикновено използван за <video>.
Синтаксисът е следният:
Документация:Входът към хиперлинк е видим.
|
Публикувано в 26.09.2022 г. 21:45:08 ч.
|
|
|
|
Публикувано в 28.09.2022 г. 8:54:26 ч.
|
