Как взаимодействуют JS, браузер и DOM?

1.7 Middle🔥 171 комментариев

#JavaScript Core

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

🐱

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

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

Как взаимодействуют JS, браузер и DOM

Это один из самых важных концептов веб-разработки. Понимание взаимодействия между JavaScript, браузером и DOM критично для создания высокопроизводительных приложений.

Основные компоненты:

JavaScript (JS) — язык программирования, который выполняет логику на стороне клиента Браузер — окружение (runtime), которое выполняет JS и управляет отображением DOM (Document Object Model) — представление HTML структуры в виде объектов, которыми можно манипулировать

Жизненный цикл страницы:

1. Парсинг HTML

1. Браузер загружает HTML файл
2. Парсит его построчно (top-to-bottom)
3. Создает DOM tree из элементов

2. Загрузка и выполнение скриптов

<!DOCTYPE html>
<html>
  <head>
    <!-- скрипт блокирует парсинг -->
    <script src="index.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <!-- скрипт выполняется после парсинга body -->
    <script src="app.js"></script>
  </body>
</html>

Проблема: Blocking Script

<!-- Плохо - блокирует парсинг -->
<head>
  <script src="large-library.js"></script>
</head>
<body>
  <!-- Пользователь видит пустую страницу -->
</body>

Решение: async и defer

<!-- async - загружается параллельно, выполняется сразу -->
<script async src="analytics.js"></script>

<!-- defer - загружается параллельно, выполняется после парсинга -->
<script defer src="app.js"></script>

DOM API — как JS управляет элементами:

Выбор элементов

// Старый способ (работает)
const el1 = document.getElementById('header');
const el2 = document.getElementsByClassName('button');
const el3 = document.getElementsByTagName('div');

// Современный способ (рекомендуется)
const el4 = document.querySelector('.button'); // первый
const el5 = document.querySelectorAll('.button'); // все

Изменение содержимого

const div = document.getElementById('root');

// Изменить текст
div.textContent = 'Hello World';

// Изменить HTML
div.innerHTML = '<p>Hello <strong>World</strong></p>';

// Добавить классы
div.classList.add('active');
div.classList.remove('disabled');
div.classList.toggle('visible');

Изменение стилей

const button = document.querySelector('button');

// Инлайн стили
button.style.backgroundColor = 'blue';
button.style.padding = '10px';

// Получить computed стили
const color = window.getComputedStyle(button).color;

Добавление и удаление элементов

const container = document.getElementById('container');

// Создать элемент
const newDiv = document.createElement('div');
newDiv.textContent = 'New item';
container.appendChild(newDiv);

// Удалить элемент
container.removeChild(newDiv);

// Или современный способ
newDiv.remove();

События (Events) — взаимодействие пользователя:

Добавление слушателя события

const button = document.querySelector('button');

// Способ 1: addEventListener (рекомендуется)
button.addEventListener('click', function(event) {
  console.log('Button clicked!');
});

// Способ 2: свойство onclick (старый способ)
button.onclick = function() {
  console.log('Clicked');
};

Различные типы событий

const input = document.querySelector('input');

// Клавиатура
input.addEventListener('keydown', (e) => console.log(e.key));
input.addEventListener('input', (e) => console.log(e.target.value));

// Мышь
document.addEventListener('mousemove', (e) => {
  console.log(e.clientX, e.clientY);
});

// Жизненный цикл
window.addEventListener('load', () => console.log('Page loaded'));
window.addEventListener('DOMContentLoaded', () => console.log('DOM ready'));
window.addEventListener('beforeunload', () => console.log('Page unloading'));

Всплытие событий (Event Bubbling)

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
// События идут от элемента вверх по иерархии
document.getElementById('child').addEventListener('click', (e) => {
  console.log('Button clicked');
  // e.stopPropagation(); // Остановить всплытие
});

document.getElementById('parent').addEventListener('click', (e) => {
  console.log('Parent clicked'); // Это тоже выполнится!
});
</script>

Репаинт и Reflow — производительность:

Что такое Reflow?

// Каждая из этих операций вызывает reflow (пересчет макета)
const box = document.querySelector('.box');

box.style.width = '100px';      // Reflow 1
box.style.height = '100px';     // Reflow 2
box.style.backgroundColor = 'red'; // Repaint (не reflow)

// Плохо - 3 reflows
box.style.width = '100px';
console.log(box.offsetWidth);   // Запрос размера = Reflow!
box.style.height = '100px';

Оптимизация

// Хорошо - батчим изменения
const box = document.querySelector('.box');

// Способ 1: Применить все стили сразу
Object.assign(box.style, {
  width: '100px',
  height: '100px',
  backgroundColor: 'red'
});

// Способ 2: Через класс
box.classList.add('styled'); // В CSS один класс с несколькими свойствами

// Способ 3: DocumentFragment для добавления элементов
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div); // Нет reflow
}
container.appendChild(fragment); // Один reflow

Асинхронное выполнение:

Event Loop

console.log('1'); // Синхронно

setTimeout(() => {
  console.log('2'); // Асинхронно (callback queue)
}, 0);

Promise.resolve().then(() => {
  console.log('3'); // Микротаск (microtask queue)
});

console.log('4'); // Синхронно

// Вывод: 1, 4, 3, 2

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

1. Синхронный код (call stack)
2. Microtasks (promises, async/await)
3. Макротаски (setTimeout, setInterval)
4. Репаинт/Reflow
5. Событие отрисовки (requestAnimationFrame)

React и DOM:

React управляет DOM через Virtual DOM

function Counter() {
  const [count, setCount] = useState(0);
  
  // React не трогает DOM напрямую
  // Вместо этого обновляет Virtual DOM
  // Затем применяет минимальные изменения к реальному DOM
  
  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

// React.createRoot() использует ReactDOM для связи с браузером
ReactDOM.createRoot(document.getElementById('root')).render(
  <Counter />
);

Взаимодействие (Sequence):

1. Браузер загружает HTML
   ↓
2. Парсит и создает DOM
   ↓
3. Загружает и выполняет JavaScript
   ↓
4. JS устанавливает event listeners на DOM элементы
   ↓
5. Пользователь взаимодействует (клик, ввод текста)
   ↓
6. Браузер генерирует event
   ↓
7. JS обработчик выполняется
   ↓
8. JS изменяет DOM (через API или React)
   ↓
9. Браузер выполняет reflow и repaint
   ↓
10. Пользователь видит обновленную страницу

Ключевые моменты:

JS может манипулировать DOM через DOM API (document, element.style, etc.)
Браузер выполняет JS и управляет отрисовкой
События связывают взаимодействие пользователя с JS
Производительность зависит от оптимизации reflow/repaint
Современные фреймворки (React, Vue) управляют DOM эффективнее, чем ручные манипуляции
Virtual DOM позволяет фреймворкам минимизировать реальные изменения DOM

Понимание этого взаимодействия — это то, что отличает хорошего фронтенд-разработчика от среднего.