В чём разница между событиями `load` и `DOMContentLoaded` у документа?

Question

Accepted Answer

## Когда что стреляет

- **`DOMContentLoaded`** — HTML распарсен, deferred/module-скрипты выполнены. **Не** ждёт напрямую картинки, subframes и т.п. (блокирующий CSS может косвенно задержать через скрипты).
- **`load` (на `window`)** — документ и зависимые ресурсы загружены (кроме lazy).

```js
document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM fully loaded and parsed");
});

window.addEventListener("load", () => {
  console.log("Page fully loaded");
});
```

Обычно `DOMContentLoaded` раньше `load`.

---

## Практика

Инициализация DOM-логики — на `DOMContentLoaded` (или модули в конце/`type=module`). Метрики «всё догрузилось» / работа с полными размерами картинок — часто `load`.

**Итог:** DCL = DOM готов; `load` = DOM + ресурсы.