Как работает предварительная загрузка стилей через rel=preload в современных браузерах?

rel=”preload” позволяет браузеру как можно скорее загрузить и кэшировать ресурс (например, скрипт или таблицу стилей). habr.com Это полезно, когда ресурс понадобится через несколько секунд после загрузки страницы, и нужно ускорить процесс. habr.com

Процесс работы: браузер ничего не делает с ресурсом после загрузки. habr.com Скрипты не выполняются, таблицы стилей не применяются. habr.com Ресурс просто кэшируется и немедленно предоставляется по запросу. habr.com

Некоторые особенности работы:

• Обязательное указание атрибута as. maximusmedia.pro Без него preload не будет работать корректно, а ресурс может быть загружен повторно. maximusmedia.pro
• Указание crossorigin для шрифтов и сторонних ресурсов. maximusmedia.pro Если ресурс загружается с внешнего домена, нужно указать crossorigin, иначе он может не использоваться после загрузки. maximusmedia.pro
• Работа только на первой загрузке страницы. maximusmedia.pro Preload активен при первой загрузке, но не влияет на кэшированные ресурсы или переходы по ссылкам. maximusmedia.pro

rel=”preload” поддерживается во всех современных браузерах. web.dev