> Всегда ли JavaScript выполняется после события onload (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Garage Eight

Стек: JavaScript

> Пример ответа

Короткий ответ

Нет, не всегда. JavaScript может выполняться до, во время и после события onload. Всё зависит от того, как подключён скрипт (синхронно, асинхронно, с defer), где он расположен в HTML, и какой именно код выполняется. Событие onload срабатывает только после полной загрузки страницы, включая все ресурсы, но скрипты могут запускаться раньше.

Подробное объяснение

Порядок выполнения JavaScript относительно onload определяется несколькими факторами:

Синхронные скрипты в <head> - выполняются немедленно при парсинге HTML, задолго до onload. Блокируют рендеринг.
Синхронные скрипты в конце <body> - выполняются после парсинга всего DOM, но до загрузки изображений и других ресурсов, то есть до onload.
Скрипты с атрибутом defer - выполняются после парсинга HTML, но до DOMContentLoaded. onload срабатывает позже.
Скрипты с атрибутом async - выполняются сразу после загрузки, независимо от парсинга и onload. Могут выполниться как до, так и после onload.
Код, подписанный на window.onload - выполняется только после полной загрузки страницы (все ресурсы: изображения, стили, iframe).
Динамически загружаемые скрипты - по умолчанию ведут себя как async, если не задан async=false.

Таким образом, JavaScript-код может выполняться на любом этапе жизненного цикла страницы. Гарантия выполнения после onload есть только у кода, который явно подписан на это событие или находится внутри обработчика.

На практике

Для frontend-разработчика важно понимать:

Если нужно манипулировать DOM - достаточно DOMContentLoaded или размещения скрипта в конце <body>.
Если нужны размеры изображений или данные из ресурсов - используйте window.onload.
Для аналитики и трекеров часто используют onload, чтобы не влиять на загрузку страницы.
defer - предпочтительный способ подключения скриптов, так как сохраняет порядок выполнения и не блокирует рендеринг.

Типичный сценарий: скрипты с defer выполняются до onload, но после построения DOM. Это нормально для большинства задач.

Пример кода

HTML
<!DOCTYPE html>
<html>
<head>
  <script>
    console.log('1: синхронный в head - до onload');
  </script>
  <script defer>
    console.log('2: defer - до onload, после парсинга');
  </script>
  <script async>
    console.log('3: async - когда загрузится, может быть до или после onload');
  </script>
</head>
<body>
  <img src="large-image.jpg" onload="console.log('4: изображение загружено')">
  <script>
    console.log('5: синхронный в конце body - до onload');
    window.onload = () => console.log('6: onload - последний');
  </script>
</body>
</html>

Порядок вывода в консоль будет: 1, 5, 2 (или 3, если async загрузился быстро), 3 (или 2), 4, 6. Только 6 гарантированно выполняется после полной загрузки всех ресурсов.

Как отвечать на собеседовании

Начните с чёткого отрицательного ответа. Затем перечислите основные сценарии выполнения скриптов относительно onload. Упомяните defer, async, синхронные скрипты и динамическую загрузку. Объясните разницу между DOMContentLoaded и onload. Приведите пример, когда код выполняется после onload (обработчик события). Покажите понимание практических последствий для производительности и корректности работы.