HTMLLinkElement: свойство fetchPriority

Свойство fetchPriority интерфейса HTMLLinkElement представляет собой подсказку для браузера, указывающую, как он должен приоритизировать загрузку определённого ресурса по отношению к другим ресурсам того же типа. Оно отражает атрибут fetchpriority соответствующего элемента <link>.

Это свойство позволяет разработчику указать, что загрузка конкретного ресурса на ранних этапах загрузки оказывает больше или меньше влияния на пользовательский опыт, чем браузер может разумно предположить при назначении внутренней приоритетности, особенно при предварительной загрузке ресурсов. Это, в свою очередь, позволяет браузеру увеличить или уменьшить приоритет и, возможно, загрузить ресурс раньше или позже, чем это было бы иначе. Свойство следует использовать с осторожностью, так как чрезмерное или неправильное установление приоритета может ухудшить производительность.

Приоритет загрузки можно использовать для дополнения предварительной загрузки, позволяя разработчику повысить приоритет ресурса по сравнению с менее важными ресурсами, которые по умолчанию загружаются с более высоким приоритетом. Например, если определённое изображение существенно влияет на Largest Contentful Paint (LCP) сайта, его можно настроить на предварительную загрузку с высоким приоритетом загрузки.

Обратите внимание, что внутренний приоритет любой операции загрузки и влияние fetchPriority на приоритет полностью зависят от браузера.

Значение

Строка, представляющая подсказку приоритета. Возможные значения:

high: Загрузить ресурс с высоким приоритетом по отношению к другим ресурсам того же типа и внутренней приоритезации.
low: Загрузить ресурс с низким приоритетом по отношению к другим ресурсам того же типа и внутренней приоритезации.
auto: Не устанавливать предпочтений для приоритета загрузки. Это значение по умолчанию. Оно используется, если значение не задано или если задано недопустимое значение.

Примеры

const preloadLink = document.createElement("link");
preloadLink.href = "my-image.jpg";
preloadLink.rel = "preload";
preloadLink.as = "image";
preloadLink.fetchPriority = "high";
document.head.appendChild(preloadLink);

Спецификации

Спецификация
HTML # dom-link-fetchpriority

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`fetchPriority`	102101–102	102101–102	132	8887–88	17.2	102101–102	132	70	17.2	19.0	102101–102

См. также

HTMLImageElement.fetchPriority
HTMLScriptElement.fetchPriority
Заголовок HTTP Link
Оптимизация загрузки ресурсов с помощью API Fetch Priority для получения информации о том, как этот API влияет на приоритеты в Chrome.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/fetchPriority