\n\n \n \n \n \n\n \n \n\n\n
\n\n\n```\n\n## 7. Динамическое добавление hint через JavaScript\n\n```javascript\n// Добавить preload динамически\nconst addPreload = (href, as, type = null) => {\n const link = document.createElement('link');\n link.rel = 'preload';\n link.href = href;\n link.as = as;\n if (type) link.type = type;\n if (as === 'font') link.crossOrigin = 'anonymous';\n document.head.appendChild(link);\n};\n\n// Использование\naddPreload('/fonts/inter.woff2', 'font', 'font/woff2');\naddPreload('/js/heavy-library.js', 'script');\naddPreload('/img/large-image.jpg', 'image');\n\n// Добавить preconnect динамически\nconst addPreconnect = (href) => {\n const link = document.createElement('link');\n link.rel = 'preconnect';\n link.href = href;\n link.crossOrigin = 'anonymous';\n document.head.appendChild(link);\n};\n\naddPreconnect('https://api.example.com');\n```\n\n## 8. Оптимизация для различных типов ресурсов\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n## 9. Условное использование в зависимости от соединения\n\n```javascript\n// Используй preload/prefetch в зависимости от скорости соединения\nconst connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;\n\nif (connection) {\n if (connection.effectiveType === '4g') {\n // Загружаем больше ресурсов на быстром соединении\n addPreload('/img/high-resolution.jpg', 'image');\n } else if (connection.effectiveType === 'slow-2g') {\n // Загружаем меньше на медленном соединении\n console.log('Медленное соединение, пропускаем prefetch');\n }\n}\n```\n\n## 10. Инструменты для проверки\n\n```javascript\n// Проверить, какие ресурсы загружены через preload/prefetch\nconst getResourceTiming = () => {\n const resources = performance.getEntriesByType('resource');\n return resources.map(r => ({\n name: r.name,\n duration: r.duration,\n size: r.transferSize,\n }));\n};\n\nconsole.table(getResourceTiming());\n```\n\n## Краткая шпаргалка\n\n| Hint | Когда использовать | Приоритет |\n|------|-------------------|----------|\n| `preload` | Ресурсы текущей страницы | Высокий |\n| `prefetch` | Ресурсы будущих страниц | Низкий |\n| `preconnect` | Внешние API/CDN | Средний |\n| `dns-prefetch` | Просто DNS разрешение | Очень низкий |\n| `prerender` | Очень вероятная следующая страница | Высокий (опасно) |","dateCreated":"2026-04-03T17:53:19.006226","upvoteCount":0,"author":{"@type":"Person","name":"claude-haiku-4.5"}}}}
PrepBro
← Назад к вопросам

Как подсказать браузеру что в разметке будет какой-либо ресурс?

1.8 Middle🔥 131 комментариев
#Браузер и сетевые технологии

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Браузеру подсказывают о предстоящих ресурсах через специальные link теги в head: preload, prefetch, dns-prefetch, preconnect и prerender. Это оптимизирует загрузку и отображение страницы.

1. preload — загрузить ресурс, который понадобится скоро

<!-- Загружаем критические ресурсы (шрифты, скрипты, стили) -->
<!-- Используй preload для ресурсов, нужных в текущем документе -->

<!-- Загрузить шрифт -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

<!-- Загрузить скрипт высокого приоритета -->
<link rel="preload" href="/js/critical.js" as="script">

<!-- Загрузить изображение -->
<link rel="preload" href="/img/hero.jpg" as="image">

<!-- Загрузить стили -->
<link rel="preload" href="/css/styles.css" as="style">

<!-- Загрузить видео -->
<link rel="preload" href="/video/intro.mp4" as="video" type="video/mp4">

2. prefetch — загрузить ресурс для будущей страницы

<!-- Используй prefetch для ресурсов, которые понадобятся позже -->
<!-- Загружается только если браузер в режиме ожидания (низкий приоритет) -->

<!-- Предзагрузить для следующей страницы -->
<link rel="prefetch" href="/js/about.js">
<link rel="prefetch" href="/api/users/data.json">
<link rel="prefetch" href="/images/gallery.jpg">

<!-- Предзагрузить следующую страницу целиком -->
<link rel="prefetch" href="/about">

3. dns-prefetch — предрешить DNS заранее

<!-- Разрешить DNS для других доменов заранее -->
<!-- Это только DNS запрос, не загрузка ресурса -->

<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="dns-prefetch" href="//api.example.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">

4. preconnect — открыть соединение заранее

<!-- Более агрессивный, чем dns-prefetch -->
<!-- Выполняет DNS, TCP handshake и TLS negotiation -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

<!-- Резервное DNS для старых браузеров -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">

5. prerender — загрузить и отрендерить страницу целиком

<!-- Осторожно! Загружает и парсит всю страницу -->
<!-- Используй только для очень вероятного перехода -->

<link rel="prerender" href="/next-page">

6. Полный пример оптимизации head

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PrepBro</title>

  <!-- 1. Критические ресурсы — preload -->
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/css/critical.css" as="style">
  <link rel="preload" href="/js/main.js" as="script">

  <!-- 2. Внешние API — preconnect -->
  <link rel="preconnect" href="https://api.prepbro.ru">
  <link rel="preconnect" href="https://cdn.example.com" crossorigin>
  <link rel="dns-prefetch" href="//fonts.googleapis.com">

  <!-- 3. Стили и скрипты -->
  <link rel="stylesheet" href="/css/styles.css">
  <script src="/js/main.js" defer></script>

  <!-- 4. Ресурсы будущих страниц — prefetch -->
  <link rel="prefetch" href="/js/about.js">
  <link rel="prefetch" href="/css/about.css">
  <link rel="prefetch" href="/api/about-data.json">

  <!-- 5. Вероятная следующая страница — prerender (осторожно!) -->
  <!-- <link rel="prerender" href="/products"> -->
</head>
<body>
  <div id="root"></div>
</body>
</html>

7. Динамическое добавление hint через JavaScript

// Добавить preload динамически
const addPreload = (href, as, type = null) => {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.href = href;
  link.as = as;
  if (type) link.type = type;
  if (as === 'font') link.crossOrigin = 'anonymous';
  document.head.appendChild(link);
};

// Использование
addPreload('/fonts/inter.woff2', 'font', 'font/woff2');
addPreload('/js/heavy-library.js', 'script');
addPreload('/img/large-image.jpg', 'image');

// Добавить preconnect динамически
const addPreconnect = (href) => {
  const link = document.createElement('link');
  link.rel = 'preconnect';
  link.href = href;
  link.crossOrigin = 'anonymous';
  document.head.appendChild(link);
};

addPreconnect('https://api.example.com');

8. Оптимизация для различных типов ресурсов

<!-- Шрифты (важно: всегда с crossorigin) -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/font-italic.woff2" as="font" type="font/woff2" crossorigin>

<!-- Изображения критических путей -->
<link rel="preload" href="/img/hero.webp" as="image" type="image/webp">
<link rel="preload" href="/img/hero.jpg" as="image" type="image/jpeg">

<!-- CSS для выше viewport -->
<link rel="preload" href="/css/above-fold.css" as="style">

<!-- Критические JS -->
<link rel="preload" href="/js/polyfills.js" as="script">
<link rel="preload" href="/js/app.js" as="script">

<!-- API endpoint для быстрой загрузки данных -->
<link rel="preconnect" href="https://api.example.com" crossorigin>

9. Условное использование в зависимости от соединения

// Используй preload/prefetch в зависимости от скорости соединения
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

if (connection) {
  if (connection.effectiveType === '4g') {
    // Загружаем больше ресурсов на быстром соединении
    addPreload('/img/high-resolution.jpg', 'image');
  } else if (connection.effectiveType === 'slow-2g') {
    // Загружаем меньше на медленном соединении
    console.log('Медленное соединение, пропускаем prefetch');
  }
}

10. Инструменты для проверки

// Проверить, какие ресурсы загружены через preload/prefetch
const getResourceTiming = () => {
  const resources = performance.getEntriesByType('resource');
  return resources.map(r => ({
    name: r.name,
    duration: r.duration,
    size: r.transferSize,
  }));
};

console.table(getResourceTiming());

Краткая шпаргалка

HintКогда использоватьПриоритет
preloadРесурсы текущей страницыВысокий
prefetchРесурсы будущих страницНизкий
preconnectВнешние API/CDNСредний
dns-prefetchПросто DNS разрешениеОчень низкий
prerenderОчень вероятная следующая страницаВысокий (опасно)
Как подсказать браузеру что в разметке будет какой-либо ресурс? | PrepBro