Что такое блокировка скриптами во время парсинга страницы?

2.0 Middle🔥 201 комментариев

#Браузер и сетевые технологии

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

🐱

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

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

Блокировка скриптами при парсинге HTML

Это критичная проблема производительности, когда JavaScript (JS) скрипт останавливает парсинг HTML и замораживает рендеринг страницы. Разберу как это работает и как это исправить.

Как браузер парсит страницу

1. Загрузить HTML
2. Парсить HTML сверху вниз
3. Встреченные CSS - загрузить и заблокировать
4. Встреченные JS - загрузить, выполнить, потом продолжить парсинг
5. Встреченные ресурсы - загрузить параллельно

Проблема: синхронный скрипт

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

Останавливает парсинг HTML
Загружает скрипт (если он внешний)
Выполняет скрипт полностью
Продолжает парсинг HTML

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <!-- Браузер парсит до сюда -->
    <script src="heavy-script.js"></script> <!-- СТОП! Парсинг заморожен -->
    <!-- Пока скрипт загружается и выполняется, остальное не парсится -->
    <p>This content is blocked</p>
  </body>
</html>

Визуально

Время парсинга:

Без скрипта:
|----HTML парсинг (50ms)---->

Со скриптом:
|--HTML--|  загрузка  |выполнение| --HTML--|
       H1 <script>     JS        P
       |<------ ПАРСИНГ ЗАМОРОЖЕН ------->|

Реальный пример проблемы

<!DOCTYPE html>
<html>
<head>
  <title>Slow Page</title>
</head>
<body>
  <h1>My Website</h1>
  <p>This is visible</p>
  
  <!-- ПРОБЛЕМА: браузер заморозит парсинг -->
  <script src="analytics.js"></script> <!-- 2 сек загрузка -->
  
  <div id="content">
    <!-- Весь этот контент не начнёт парситься, пока не загрузится analytics.js -->
    <h2>Main Content</h2>
    <p>This is blocked</p>
  </div>
</body>
</html>

Почему это происходит?

Скрипт может:

Мутировать DOM (document.write(), appendChild(), и т.д.)
Запросить информацию о стилях (getComputedStyle())
Изменить следующие элементы

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

// Скрипт может изменить следующий контент!
<script>
  document.write('<h2>I came from JS!</h2>');
  // Это вставляется в место скрипта, влияя на парсинг
</script>

Как исправить: async

Атрибут async загружает скрипт в фоне и выполняет сразу когда готов:

<!-- Не блокирует парсинг -->
<script src="analytics.js" async></script>
<p>Это будет парситься немедленно</p>

Порядок выполнения:

Парсинг:  |----HTML парсинг (быстро)---->
Скрипт:                    загрузка     выполнение
          (параллельно)

Как исправить: defer

Атрибут defer загружает в фоне, но выполняет только когда парсинг готов:

<head>
  <script src="app.js" defer></script>
  <script src="utils.js" defer></script>
</head>
<body>
  <!-- Весь контент парсится нормально -->
</body>

Порядок выполнения:

Парсинг:  |----HTML парсинг----|
Скрипт:       загрузка      выполнение
          (параллельно)    (после парсинга)

async vs defer

                 Время парсинга    Выполнение

Синхронный:      [===блок===|скрипт]
                
async:           [===парсинг===]
                       [скрипт]
                 
defer:           [===парсинг===]
                            [скрипт]

Практический пример:

<head>
  <!-- Рекомендуется: async для независимых скриптов -->
  <script src="analytics.js" async></script>
  <script src="tracking.js" async></script>
  
  <!-- defer для основного приложения (порядок важен) -->
  <script src="utils.js" defer></script>
  <script src="app.js" defer></script> <!-- utils загрузится первым -->
</head>

Проблема с document.write()

// Блокирует парсинг!
<script>
  document.write('<h1>Hello</h1>');
  // Браузер должен остановить парсинг и вставить это
</script>

// Лучше: манипулировать DOM после парсинга
<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.body.innerHTML += '<h1>Hello</h1>';
  });
</script>

Оптимизация: inline критичный JS

<!-- Вместо внешнего скрипта (блокирует) -->
<script src="critical.js"></script>

<!-- Инлайни критичный код -->
<script>
  // Только критичный код (5KB max)
  const theme = localStorage.getItem('theme') || 'light';
  document.documentElement.setAttribute('data-theme', theme);
</script>

<!-- Остальное загружай с defer -->
<script src="app.js" defer></script>

Лучшие практики

Помещай скрипты перед </body> вместо <head>

<body>
  <!-- контент -->
  <script src="app.js"></script> <!-- парсинг уже почти готов -->
</body>

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

Минимизируй inline скрипты

<!-- Плохо: большой inline скрипт -->
<script>
  // 50KB кода здесь
</script>

<!-- Хорошо: только критичный inline -->
<script>const x = 1;</script>

Инструменты для анализа

# Chrome DevTools - Performance tab
# Смотри синий график парсинга и жёлтый скрипт выполнения

# Lighthouse
# Покажет "Eliminate render-blocking resources"

Резюме

Синхронный скрипт = парсинг HTML замораживается
async = загружается параллельно, выполняется сразу (для независимых скриптов)
defer = загружается параллельно, выполняется после парсинга (для app.js)
Inline = только критичный код
В конце body = лучше чем в head