Как сделать Prefetching

Question

Как сделать Prefetching

Тип вопроса: Архитектура Вероятность: 10% Категория: Frontend Разработчик

Ответ

Prefetching — это техника загрузки ресурсов заранее, чтобы ускорить их использование в будущем.

Основные способы:

Link Prefetching (HTML):

<link rel="prefetch" href="/next-page.html" as="document">
<link rel="prefetch" href="/assets/image.webp" as="image">

Подходит для загрузки страниц, изображений, скриптов.

DNS Prefetching (ускорение DNS-запросов):

<link rel="dns-prefetch" href="https://api.example.com">

Preload (приоритетная загрузка критичных ресурсов):

<link rel="preload" href="/main.js" as="script">

Программный Prefetching (например, через IntersectionObserver или React Suspense):

// Пример с IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      fetch('/api/data'); // Загружаем данные при появлении элемента в viewport
    }
  });
});
observer.observe(document.querySelector('.lazy-load'));

Когда использовать:

Для страниц, на которые пользователь может перейти (например, "Следующая статья").
Для lazy-loaded ресурсов (изображения, данные API).
Для критичных скриптов/стилей.

⚠️ Важно: Не злоупотреблять, чтобы не тратить трафик пользователя.

Ответ 18+ 🔞

Да ты посмотри, какая хитрая жопа эти ваши браузеры придумали! Prefetching, блядь. Это ж когда ты заранее начинаешь тащить в кэш всякую хуйню, которую пользователь ещё даже не просил, но вот-вот попросит. Чтоб потом, когда он таки дозреет, всё уже лежало под рукой и летало как охуенное. Вообще гениально, если не перестараться.

Смотри, как это на практике выглядит, ёпта:

1. Link Prefetching — классика для распиздяев Воткнул в <head> строчку, и браузер на заднем фоне потихоньку начинает качать. Например, следующую страницу или жирную картинку.

<link rel="prefetch" href="/next-page.html" as="document">
<link rel="prefetch" href="/assets/image.webp" as="image">

2. DNS Prefetching — чтоб не тупил с адресами Браузер иногда, сука, как мартышлюшка, тупит: чтобы подключиться к какому-нибудь api.example.com, ему сначала надо DNS-запрос сделать, а это время. А ты ему заранее подсказываешь:

<link rel="dns-prefetch" href="https://api.example.com">

Теперь он адрес уже знает, и когда понадобится — сразу врубается, без этих ебушкиных плясок с бубном.

3. Preload — для самого срочного А это когда ресурс критически важен для ТЕКУЩЕЙ страницы, но браузер сам до него додумается не скоро. Ты ему в уши орёшь: «Да загружай это немедленно, ёбаный в рот!»

<link rel="preload" href="/main.js" as="script">

4. Программный Prefetching — для умных Тут уже включаешь мозги. Например, следишь, когда пользователь доползёт до определённого места на странице, и тогда уже дёргаешь данные.

// Наблюдаем за элементом, как ястреб
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      fetch('/api/data'); // Бац! Данные полетели, хотя пользователь ещё только навёл курсор
    }
  });
});
observer.observe(document.querySelector('.lazy-load'));

А когда всю эту магию применять?

Если видишь, что юзер вот-вот нажмёт на кнопку «Далее» или «Читать ещё» — подгружай следующую страницу заранее, будь пророком, блядь.
Для лениво подгружаемых картинок или данных, которые появятся после скролла.
Для скриптов и стилей, без которых страница — просто пизда.

⚠️ Но предупреждаю, как старший: Не начинай префетчить всё подряд, а то пользователь с мобильным трафиком тебе такую дичь устроит, мало не покажется. Трафик — это святое, его надо уважать, а не разбрасывать как говно собачье. Чувствуй баланс, сука!