Что происходит после получения script по сети?

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

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

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

🐱

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

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

Что происходит после получения script по сети

Когда браузер загружает JavaScript файл по сети (через тег <script src="..."> или динамически), происходит серия этапов: загрузка, парсинг, компиляция и исполнение. Понимание этого процесса критично для оптимизации производительности страницы.

Общий процесс

1. Запрос (Request)
2. Загрузка (Download)
3. Парсинг (Parsing)
4. Компиляция (Compilation)
5. Исполнение (Execution)

Пример HTML

<!DOCTYPE html>
<html>
<head>
  <!-- Синхронный скрипт - блокирует парсинг HTML -->
  <script src="/bundle.js"></script>
</head>
<body>
  <div id="app">Приложение</div>
  
  <!-- Асинхронный скрипт - НЕ блокирует парсинг -->
  <script src="/analytics.js" async></script>
  
  <!-- Отложенный скрипт - загружается, но выполняется после парсинга -->
  <script src="/app.js" defer></script>
</body>
</html>

Подробный процесс для синхронного скрипта

Этап 1: Запрос

Браузер находит <script src="/bundle.js"></script>
        |
        v
Отправляет HTTP запрос к серверу:
GET /bundle.js HTTP/1.1
Host: example.com
Accept: */*

Этап 2: Загрузка

Сервер отправляет файл по TCP/IP
        |
        v
Браузер получает данные в chunks (куски)
        |
        v
Данные буферизируются (временно сохраняются)
        |
        v
Когда весь файл загружен, переходит к парсингу

Это может быть долго, особенно для больших файлов:

// Пример: загрузка 500KB файла
// На 2G (0.5 Mbps): ~8 секунд
// На 4G (10 Mbps): ~0.4 секунда
// На Wi-Fi (50 Mbps): ~0.08 секунда

Этап 3: Парсинг (Parsing)

Браузер преобразует текст JavaScript в структуру, которую он может выполнить.

// Исходный код
const greeting = "Hello";
function sayHi() {
  console.log(greeting);
}
sayHi();

// Браузер парсит это в AST (Abstract Syntax Tree):
// Program
//   ├── VariableDeclaration
//   │   └── name: "greeting"
//   │       value: "Hello"
//   ├── FunctionDeclaration
//   │   └── name: "sayHi"
//   │       body: [...]
//   └── CallExpression
//       └── callee: "sayHi"

Этот этап может быть медленный:

Время парсинга примерно:
- 100KB файла: ~5ms
- 1MB файла: ~50ms
- 5MB файла: ~250ms

Этап 4: Компиляция (JIT Compilation)

Современные браузеры используют Just-In-Time (JIT) компиляцию для оптимизации.

AST (Abstract Syntax Tree)
    |
    v
Интерпретация (Baseline compilation)
    |
    v
Оптимизирующая компиляция (TurboFan, IonMonkey и т.д.)
    |
    v
Machine code

V8 (Chrome, Node.js) процесс:

Source code
    |
    v (Parser)
AST
    |
    v (Ignition - базовый интерпретатор)
Bytecode (промежуточный код)
    |
    v (TurboFan - оптимизирующий компилятор)
Optimized Machine code (быстро исполняется)

Этап 5: Исполнение (Execution)

Оптимизированный machine code выполняется процессором.

// Исходный код
for (let i = 0; i < 1000000; i++) {
  sum += i;
}

// Браузер исполняет оптимизированный machine code,
// который работает очень быстро

Синхронный vs Асинхронный vs Отложенный скрипт

1. Синхронный скрипт

<script src="/bundle.js"></script>

Временная шкала:

1. Браузер начинает парсить HTML
2. Встречает <script>
3. ОСТАНАВЛИВАЕТ парсинг HTML
4. Загружает /bundle.js
5. Парсит и компилирует bundle.js
6. ИСПОЛНЯЕТ bundle.js
7. Продолжает парсить HTML
8. Встречает <body> и его содержимое

Проблема: Если скрипт долго загружается или исполняется, страница "зависает".

2. Асинхронный скрипт (async)

<script src="/analytics.js" async></script>

Временная шкала:

1. Браузер парсит HTML
2. Встречает <script async>
3. ПРОДОЛЖАЕТ парсить HTML (не останавливается)
4. Одновременно загружает analytics.js в фоне
5. Когда analytics.js загружен:
   - Останавливает парсинг HTML
   - Исполняет analytics.js
   - Продолжает парсить HTML

Использование: Для независимых скриптов (аналитика, реклама).

3. Отложенный скрипт (defer)

<script src="/app.js" defer></script>

Временная шкала:

1. Браузер парсит HTML
2. Встречает <script defer>
3. ПРОДОЛЖАЕТ парсить HTML (не останавливается)
4. Одновременно загружает app.js в фоне
5. ПАРСИТ весь HTML полностью
6. Встречает событие DOMContentLoaded
7. Исполняет app.js
8. Встречает событие load

Использование: Для основного приложения (главный bundle).

Диаграмма временной шкалы

  Без атрибутов (синхронный):
  |---HTML---|WAIT|---JS---|---HTML---|
             (блокировка)
  
  async:
  |---HTML---|---HTML---|---HTML---|
        (JS загружается отдельно)
        |---JS---|
  
  defer:
  |---HTML---|---HTML---|---HTML---|---JS---|

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

<!DOCTYPE html>
<html>
<head>
  <!-- Синхронный - блокирует рендер -->
  <script src="/heavy-library.js"></script>
  
  <title>My App</title>
</head>
<body>
  <h1>Loading...</h1>
  
  <!-- Асинхронный - не блокирует -->
  <script src="/google-analytics.js" async></script>
  
  <!-- Главный бандл - выполнится после парсинга HTML -->
  <script src="/app.js" defer></script>
</body>
</html>

Что происходит внутри исполнения

Когда скрипт исполняется, браузер выполняет операции в контексте глобального объекта:

// Глобальная переменная
var globalVar = "I'm global";

// Это создаёт window.globalVar
console.log(window.globalVar);  // "I'm global"

// Функция добавляется в window
function myFunction() {
  console.log("Hello");
}
window.myFunction();  // "Hello"

// Event listeners добавляются
document.addEventListener('click', () => {
  console.log("Clicked");
});

Порядок исполнения нескольких скриптов

<script src="first.js"></script>
<script src="second.js" async></script>
<script src="third.js" defer></script>
<script src="fourth.js" async></script>

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

1. first.js (синхронный) - сразу
2. third.js (defer) - после парсинга HTML
3. second.js или fourth.js (async) - когда готовы (порядок не гарантирован)

Ошибки при загрузке скрипта

// Если скрипт не найден
<script src="/nonexistent.js"></script>
// Браузер отправляет 404, но не выбрасывает ошибку
// (или выбрасывает, зависит от контекста)

// Обработка ошибки
<script src="/app.js" onerror="console.error('Failed to load')"></script>

// Или
const script = document.createElement('script');
script.src = '/app.js';
script.onerror = () => console.error('Failed to load');
document.body.appendChild(script);

Оптимизация загрузки скриптов

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

<!-- Хорошо -->
<script src="/app.js" defer></script>

<!-- Не очень (блокирует парсинг) -->
<script src="/app.js"></script>

2. Разделение больших файлов (code splitting)

// Вместо одного большого bundle.js
// Разделите на несколько файлов

// main-bundle.js (критичный)
<script src="/main-bundle.js" defer></script>

// analytics-bundle.js (не критичный)
<script src="/analytics-bundle.js" async></script>

// vendor-bundle.js (зависимости)
<script src="/vendor-bundle.js" defer></script>

3. Использование service workers для кэширования

// Service worker может кэшировать скрипты
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/app.js',
        '/vendor.js'
      ]);
    })
  );
});

4. Приоритет загрузки (Resource Hints)

<!-- Hint браузеру предзагрузить скрипт -->
<link rel="preload" href="/app.js" as="script" />

<!-- Hint браузеру предсоединиться к серверу -->
<link rel="preconnect" href="https://api.example.com" />

<!-- Hint браузеру предварительно загрузить ресурс -->
<link rel="prefetch" href="/heavy-library.js" />

Вывод

После получения script по сети браузер:

Загружает файл по HTTP
Парсит текст в AST
Компилирует в оптимизированный machine code (JIT)
Исполняет код в контексте window

Время может быть затрачено на:

Сетевую задержку (network latency)
Загрузку (download)
Парсинг (parsing)
Компиляцию (compilation)
Исполнение (execution)

Для оптимизации:

Используйте defer для основных скриптов
Используйте async для независимых скриптов
Разделяйте большие файлы на несколько
Предзагружайте критичные ресурсы
Минимизируйте размер скриптов