Запуск JavaScript перед полной загрузкой страницы: возможно ли?

Быстрый ответ

Да! Выполнить JavaScript до окончания загрузки всей страницы можно, воспользовавшись тегами script в разделе head и событием DOMContentLoaded, которое срабатывает после полной разборки DOM.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Проверим, что DOM полностью загружен
    console.log('DOM готов к использованию JS!');
  });
</script>

Код, не связанный с DOM элементами, корректно размещать непосредственно в начале body.

<script>
  // Код, не зависящий от DOM
  console.log('DOM? Никогда об этом не слышал!');
</script>

Внимание: взаимодействовать с DOM может быть проблематично, если его элементы ещё не загрузились. Применяйте JavaScript для задач, не требующих взаимодействия с DOM, или устанавливайте слушатели для подобных задач на более поздний момент.

Применение defer и async

Чтобы скрипты не влияли на скорость загрузки страницы, рекомендуется использовать атрибуты async и defer:

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

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

• Async: async позволяет браузеру одновременно с парсингом HTML загружать скрипт и выполнять его как только загрузка завершится, что может произойти в любой момент парсинга HTML.

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

Модули JavaScript

Модули JavaScript – это современный способ отложения выполнения скрипта до окончания разбора HTML, но перед полной загрузкой всех ресурсов страницы.

<script type="module" src="myModule.js"></script>

Взаимодействие с DOM

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

• Событие DOMContentLoaded: наступление этого события говорит о том, что HTML документ загружен и проанализирован. Теперь безопасно взаимодействовать с DOM-элементами, не дожидаясь загрузки всех изображений, стилей и фреймов.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // DOM-элементы загружены и можно с ними взаимодействовать
    console.log('DOM теперь под моим контролем!');
  });
</script>

• Метод jQuery: Если вы по-прежнему используете jQuery, то $(document).ready() работает аналогично.

<script>
  $(document).ready(() => {
    // DOM загружен, можно применить jQuery для взаимодействия с ним!
    console.log('jQuery еще работает! Пора начинать.');
  });
</script>

Визуализация

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

Поезд (🚂) – это наша аналогия загрузки веб-страницы
Пассажир с ранним посадочным талоном (🧑‍💼🎟️💨) – это JavaScript, который можно запустить раньше

JavaScript — как пассажир, ожидающий посадки среди других пассажиров (🧑‍💼🚶‍♂️🚶‍♀️🚶‍♂️). Как только начинается посадка (🚪), JavaScript тут же занимает своё место (🧑‍💼🎟️💨➡️🚪), в то время как остальные пассажиры всё ещё идут к своим местам (🚪➡️🚶‍♂️🚶‍♀️). Таким образом, JavaScript может начать работу до того, как веб-страница полностью загрузится (пока остальные пассажиры еще идут к своим местам).

Продвинутые стратегии

Для повышения производительности сайта и эффективного расположения скриптов могут быть полезны следующие стратегии:

Предзагрузка и предварительная загрузка

Оптимизируйте загрузку скриптов, используя предзагрузку и предварительную загрузку:

• Предзагрузка: применяется к скриптам, расположенным в конце документа и предзагружаемым заблаговременно для сокращения времени на их выполнение.
• Предварительная загрузка: используется для того, чтобы указать браузеру, какие ресурсы следует загрузить в первую очередь.

Подробнее об этом расскажет наш спикер на видео

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

Понимание порядка и времени выполнения скриптов помогает их правильно разместить на странице:

• Скрипты с async выполняются непосредственно после загрузки, возможно, даже во время разборки HTML.
• Скрипты с defer и модули начинают работать только после полного разбора HTML и срабатывания события DOMContentLoaded.

Полезные материалы

1. Введение в DOM – Веб-API | MDN – изучите принципы взаимодействия JavaScript с DOM.
2. Как использовать промисы – Учим веб-разработку | MDN – подробнее ознакомьтесь с темой асинхронного JavaScript и промисов.
3. Document: Событие DOMContentLoaded – Веб-API | MDN – когда стоит использовать событие DOMContentLoaded.
4. EventTarget: метод addEventListener() – Веб-API | MDN – основы работы с JavaScript-обработчиками событий.
5. Эффективная загрузка JavaScript с помощью defer и async – передовые методы загрузки скриптов с использованием defer и async.
6. Node.js — Обзор блокирующего и неблокирующего кода – разберитесь в отличиях между блокирующим и неблокирующим кодом в JavaScript.