В чем разница между preload и prefetch

«В чем разница между preload и prefetch» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

preload и prefetch — это атрибуты для оптимизации загрузки ресурсов, но они служат разным целям:

  • preload — указывает браузеру немедленно загрузить критически важный ресурс (например, шрифты, скрипты, стили) с высоким приоритетом. Используется для ресурсов, которые понадобятся на текущей странице.
    <link rel="preload" href="critical.js" as="script">
  • prefetch — загружает ресурс с низким приоритетом в фоне, предполагая, что он понадобится на следующей странице (например, для навигации).
    <link rel="prefetch" href="next-page-data.json" as="fetch">

Ключевые отличия:

  • preload — для текущей страницы, prefetch — для будущей.
  • preload имеет высокий приоритет, prefetch — низкий.
  • preload обязателен для корректной работы страницы, prefetch — опционален.