\n \n \n

This content may not render immediately

\n\n\n```\n\nПроцесс:\n1. Браузер парсит HTML до `\n\n\n \n

Header

\n

Content

\n \n\n```\n\n**Характеристики async:**\n- Загружается параллельно парсингу\n- Выполняется как только готов (может прервать парсинг)\n- Порядок выполнения НЕ гарантирован\n- Хорош для независимых скриптов (аналитика, рекламные сети)\n\n```html\n\n\n\n\n```\n\n### Атрибут `defer`\n\n**`defer`** загружает скрипт в фоне и выполняет ПОСЛЕ парсинга:\n\n```html\n\n \n \n \n\n\n \n

Header

\n

Content

\n \n\n```\n\n**Характеристики defer:**\n- Загружается параллельно парсингу\n- Выполняется после парсинга HTML\n- Порядок ГАРАНТИРОВАН\n- Лучший выбор для основных скриптов приложения\n\n### Сравнение\n\n```\n | Загрузка | Выполнение | Порядок\n--------------------|----------|-----------|----------\nОбычный \n \n \n \n\n\n```\n\n### Next.js / React подход\n\nВ Next.js используется оптимизация через `\n ```\n\n3. **Нарисованные изображения** — не блокируют, но замедляют\n\n### Лучшие практики для оптимизации\n\n1. **Используйте `defer` для основных скриптов**\n ```html\n \n ```\n\n2. **Используйте `async` для независимых скриптов**\n ```html\n \n ```\n\n3. **Минимизируйте скрипты в ``**\n ```html\n \n \n \n \n \n \n \n \n \n \n \n ```\n\n4. **Code splitting** — разделите большой скрипт на части\n ```javascript\n // Динамический импорт\n const module = await import('./heavy-module.js');\n ```\n\n5. **Ленивая загрузка** — загружайте скрипты когда они нужны\n\n### Метрики производительности\n\n- **FCP** (First Contentful Paint) — зависит от CSS и DOM\n- **LCP** (Largest Contentful Paint) — зависит от скриптов\n- **CLS** (Cumulative Layout Shift) — зависит от скриптов\n- **TTI** (Time to Interactive) — зависит от скриптов\n\n**Итог:** скрипты могут блокировать рендеринг, но `defer` и `async` позволяют контролировать это поведение. Для лучшей производительности используйте `defer` для основных скриптов и `async` для независимых.","dateCreated":"2026-04-02T21:50:41.530114","upvoteCount":0,"author":{"@type":"Person","name":"claude-haiku-4.5"}}}}
← Назад к вопросам

Блокирует ли рендеринг страницы подключение скриптов?

1.0 Junior🔥 181 комментариев
#Браузер и сетевые технологии#Оптимизация и производительность

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

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

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

Блокирует ли рендеринг страницы подключение скриптов

Да, скрипты блокируют рендеринг страницы — это один из главных факторов производительности. Поведение зависит от того, как и где подключен скрипт.

Стандартное поведение: Скрипты блокируют парсинг

Когда браузер встречает <script> тег:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Header</h1>
  
  <!-- Парсинг HTML ОСТАНАВЛИВАЕТСЯ здесь -->
  <script src="app.js"></script>
  <!-- Браузер ждёт загрузки и выполнения скрипта -->
  
  <p>This content may not render immediately</p>
</body>
</html>

Процесс:

  1. Браузер парсит HTML до <script>
  2. Парсинг останавливается
  3. Скрипт загружается
  4. Скрипт выполняется
  5. Парсинг продолжается
  6. Рендеринг может произойти после завершения

Атрибут async

async загружает скрипт в фоне, БЕЗ блокировки парсинга:

<head>
  <!-- Загружается параллельно с парсингом -->
  <script async src="analytics.js"></script>
</head>
<body>
  <!-- Парсинг продолжается -->
  <h1>Header</h1>
  <p>Content</p>
  <!-- Когда analytics.js загрузится, он выполнится (может прервать парсинг) -->
</body>

Характеристики async:

  • Загружается параллельно парсингу
  • Выполняется как только готов (может прервать парсинг)
  • Порядок выполнения НЕ гарантирован
  • Хорош для независимых скриптов (аналитика, рекламные сети)
<!-- Порядок НЕ гарантирован! -->
<script async src="script1.js"></script>
<script async src="script2.js"></script>
<!-- script2 может выполниться РАНЬШЕ script1 -->

Атрибут defer

defer загружает скрипт в фоне и выполняет ПОСЛЕ парсинга:

<head>
  <!-- Загружается параллельно парсингу -->
  <script defer src="main.js"></script>
  <script defer src="utils.js"></script>
</head>
<body>
  <!-- Парсинг НИКОГДА не прерывается -->
  <h1>Header</h1>
  <p>Content</p>
  <!-- После парсинга выполнятся main.js, потом utils.js (в порядке) -->
</body>

Характеристики defer:

  • Загружается параллельно парсингу
  • Выполняется после парсинга HTML
  • Порядок ГАРАНТИРОВАН
  • Лучший выбор для основных скриптов приложения

Сравнение

                    | Загрузка | Выполнение | Порядок
--------------------|----------|-----------|----------
Обычный <script>    | Синхронно| Сразу     | Гарантирован
<script async>      | Фон      | Когда готов| НЕ гарантирован
<script defer>      | Фон      | После HTML| Гарантирован

Визуально

Обычный <script>:
|--HTML parse--[STOP]--script load+execute--[RESUME]--HTML parse--|

async:
|--HTML parse (скрипт загружается отдельно)--|[STOP для выполнения]
|--script load--|--script execute--|

defer:
|--HTML parse (скрипт загружается отдельно)--|
                 |--script load--|
                                |--script execute--|

Практические примеры

<!-- Хорошая практика для современного приложения -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <!-- CSS БЕЗ async/defer (нужно для стилей) -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="app">Loading...</div>
  
  <!-- Основной скрипт приложения с defer -->
  <script defer src="app.js"></script>
  
  <!-- Аналитика с async (независима от приложения) -->
  <script async src="https://analytics.google.com/analytics.js"></script>
</body>
</html>

Next.js / React подход

В Next.js используется оптимизация через <Script> компонент:

import Script from 'next/script';

export default function Page() {
  return (
    <>
      {/* afterInteractive — выполнится после интерактивности страницы */}
      <Script
        src="analytics.js"
        strategy="afterInteractive"
      />
      
      {/* lazyOnload — выполнится когда браузер свободен */}
      <Script
        src="ads.js"
        strategy="lazyOnload"
      />
    </>
  );
}

Что блокирует рендеринг

  1. CSS — блокирует рендеринг (CSSOM construction)

    <!-- Рендеринг начнется ПОСЛЕ загрузки CSS -->
    <link rel="stylesheet" href="style.css">
    
  2. Синхронные скрипты — блокируют парсинг

    <script src="app.js"></script>
    
  3. Нарисованные изображения — не блокируют, но замедляют

Лучшие практики для оптимизации

  1. Используйте defer для основных скриптов

    <script defer src="app.js"></script>
    
  2. Используйте async для независимых скриптов

    <script async src="analytics.js"></script>
    
  3. Минимизируйте скрипты в <head>

    <!-- Хорошо -->
    <head>
      <link rel="stylesheet" href="style.css">
      <script defer src="app.js"></script>
    </head>
    
    <!-- Плохо -->
    <head>
      <script src="huge-lib.js"></script>
      <script src="another.js"></script>
    </head>
    
  4. Code splitting — разделите большой скрипт на части

    // Динамический импорт
    const module = await import('./heavy-module.js');
    
  5. Ленивая загрузка — загружайте скрипты когда они нужны

Метрики производительности

  • FCP (First Contentful Paint) — зависит от CSS и DOM
  • LCP (Largest Contentful Paint) — зависит от скриптов
  • CLS (Cumulative Layout Shift) — зависит от скриптов
  • TTI (Time to Interactive) — зависит от скриптов

Итог: скрипты могут блокировать рендеринг, но defer и async позволяют контролировать это поведение. Для лучшей производительности используйте defer для основных скриптов и async для независимых.