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

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>

Процесс:

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

Атрибут `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"
      />
    </>
  );
}

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

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

<!-- Рендеринг начнется ПОСЛЕ загрузки CSS -->
<link rel="stylesheet" href="style.css">

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

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

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

Минимизируйте скрипты в <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>

Code splitting — разделите большой скрипт на части

// Динамический импорт
const module = await import('./heavy-module.js');

Ленивая загрузка — загружайте скрипты когда они нужны

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

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

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

Header