Управление выполнением скриптов при загрузке страницы в JavaScript

Для управления выполнением нескольких скриптов при загрузке страницы в чистом JavaScript следует использовать событие DOMContentLoaded и различные подходы к синхронизации. Основной принцип заключается в том, что событие DOMContentLoaded срабатывает только один раз, поэтому для выполнения второго скрипта после полной загрузки DOM можно добавить обработчики к тому же событию, использовать Promise или атрибуты defer и async в тегах скриптов.

Содержание

• Основные события загрузки страницы
• Управление несколькими скриптами с помощью DOMContentLoaded
• Альтернативы повторной отправке DOMContentLoaded
• Атрибуты async и defer для управления загрузкой
• Пользовательские события и Promise для синхронизации скриптов
• Практические примеры реализации
• Источники
• Заключение

Основные события загрузки страницы

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

• DOMContentLoaded — срабатывает, когда HTML-документ полностью загружен и обработан, но внешние ресурсы (изображения, стили, фреймы) могут еще не загружены
• load — срабатывает, когда вся страница вместе со всеми ресурсами полностью загружена
• readystatechange — событие для отслеживания состояния загрузки документа

Для управления загрузкой скрипта в JavaScript важно понимать, что браузер выполняет скрипты последовательно по умолчанию, что может блокировать рендеринг страницы. Оптимальное решение — использовать современные подходы к управлению выполнением скриптов.

Управление несколькими скриптами с помощью DOMContentLoaded

Событие DOMContentLoaded срабатывает только один раз, поэтому для управления несколькими скриптами необходимо использовать другие подходы. Вот основные методы:

Множественные обработчики одного события

Вы можете добавить несколько обработчиков к одному событию DOMContentLoaded:

document.addEventListener("DOMContentLoaded", () => {
 // Первый скрипт
 initFirstScript();
});

document.addEventListener("DOMContentLoaded", () => {
 // Второй скрипт
 initSecondScript();
});

Проверка состояния документа

Если скрипт может загружаться после того, как событие уже произошло, можно проверить document.readyState:

function runAfterDOM(fn) {
 if (document.readyState === 'loading') {
 document.addEventListener('DOMContentLoaded', fn);
 } else {
 fn();
 }
}

runAfterDOM(() => {
 // Код, который должен выполниться после DOM готов
});

Использование Promise

Для более сложной синхронизации можно использовать Promise:

const domReady = new Promise(resolve => {
 if (document.readyState === "loading") {
 document.addEventListener("DOMContentLoaded", resolve);
 } else {
 resolve();
 }
});

domReady.then(() => {
 // Код, который должен выполниться после DOM готов
});

Альтернативы повторной отправке DOMContentLoaded

Чтобы избежать рекурсии и дублирования событий, существуют альтернативные подходы к управлению выполнением нескольких javascript скрипт:

Пользовательские события

Создайте собственное событие, которое вы можете триггерить после выполнения первого скрипта:

// Первый скрипт
document.addEventListener('DOMContentLoaded', () => {
 initFirstScript();
 
 // Триггерим пользовательское событие
 const event = new CustomEvent('firstScriptLoaded', { detail: {} });
 document.dispatchEvent(event);
});

// Второй скрипт
document.addEventListener('firstScriptLoaded', () => {
 initSecondScript();
});

Прямое вызов функций

Просто вызывайте второй скрипт из первого:

document.addEventListener('DOMContentLoaded', () => {
 initFirstScript();
 initSecondScript(); // Выполняется сразу после первого
});

Использование флагов

let domReady = false;

document.addEventListener('DOMContentLoaded', () => {
 domReady = true;
 initFirstScript();
 initSecondScript();
});

// Если скрипт загружается позже
if (domReady) {
 initSecondScript();
}

Эти подходы позволяют избежать ошибки загрузки скрипта, связанной с повторной отправкой DOMContentLoaded.

Атрибуты async и defer для управления загрузкой

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

Атрибут async

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

Скрипты с async загружаются параллельно и выполняются по завершении загрузки, независимо от порядка. Подходит для независимых скриптов.

Атрибут defer

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

Скрипты с defer загружаются параллельно, но выполняются последовательно после полной загрузки DOM и в порядке их расположения в документе. Идеально для скриптов, зависящих от DOM.

Сравнение атрибутов

Эти атрибуты позволяют эффективно управлять загрузкой файла скрипт без сложного JavaScript-кода.

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

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

Синхронизация с Promise

function loadScript(url) {
 return new Promise((resolve, reject) => {
 const script = document.createElement('script');
 script.src = url;
 script.onload = resolve;
 script.onerror = reject;
 document.head.appendChild(script);
 });
}

// Использование
loadScript('first.js').then(() => {
 console.log('Первый скрипт загружен');
 return loadScript('second.js');
}).then(() => {
 console.log('Второй скрипт загружен');
});

Манипуляция событиями загрузки

Для запуск скрипта при загрузке можно комбинировать различные подходы:

// Создаем глобальный объект для управления скриптами
const ScriptLoader = {
 scripts: [],
 load(url) {
 return new Promise((resolve, reject) => {
 const script = document.createElement('script');
 script.src = url;
 script.onload = () => {
 this.scripts.push(url);
 resolve();
 };
 script.onerror = reject;
 document.head.appendChild(script);
 });
 },
 loadSequential(urls) {
 return urls.reduce((promise, url) => 
 promise.then(() => this.load(url)), Promise.resolve());
 }
};

// Использование
ScriptLoader.loadSequential(['first.js', 'second.js'])
 .then(() => console.log('Все скрипты загружены'));

Практические примеры реализации

Пример 1: Базовая реализация с DOMContentLoaded

// Основной скрипт
document.addEventListener('DOMContentLoaded', () => {
 console.log('DOM загружен');
 initializeApp();
});

// Если нужно выполнить код после полной загрузки страницы
window.addEventListener('load', () => {
 console.log('Все ресурсы загружены');
 initializeAnalytics();
});

Пример 2: Управление зависимостями скриптов

// Функция для загрузки скриптов с зависимостями
function loadScriptWithDependencies(url, dependencies = []) {
 return new Promise((resolve, reject) => {
 // Проверяем зависимости
 Promise.all(dependencies.map(dep => 
 window[dep] ? Promise.resolve() : Promise.reject(`Зависимость ${dep} не найдена`)
 )).then(() => {
 const script = document.createElement('script');
 script.src = url;
 script.onload = resolve;
 script.onerror = reject;
 document.head.appendChild(script);
 }).catch(reject);
 });
}

// Использование
loadScriptWithDependencies('app.js', ['jquery', 'lodash'])
 .then(() => console.log('Приложение загружено'))
 .catch(error => console.error('Ошибка загрузки:', error));

Пример 3: Отложенная загрузка скриптов

// Функция для отложенной загрузки скрипта
function loadScriptDeferred(url) {
 return new Promise((resolve, reject) => {
 const script = document.createElement('script');
 script.src = url;
 script.defer = true;
 script.onload = resolve;
 script.onerror = reject;
 document.head.appendChild(script);
 });
}

// Использование для **загрузка скрипта после загрузки страницы**
if (document.readyState === 'complete') {
 loadScriptDeferred('analytics.js');
} else {
 window.addEventListener('load', () => {
 loadScriptDeferred('analytics.js');
 });
}

Эти примеры показывают различные подходы к управлению скрипт загрузка страницы в зависимости от требований проекта.

Источники

1. MDN Web Docs — Документация по событию DOMContentLoaded: https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
2. javascript.info — Обработка событий загрузки страницы: https://javascript.info/onload-ondomcontentloaded
3. MDN Web Docs — Документация по тегу script: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Заключение

Управление выполнением нескольких скриптов при загрузке страницы в чистом JavaScript требует понимания жизненного цикла загрузки и использования различных подходов. Основные методы включают множественные обработчики одного события, проверку состояния документа, использование Promise, пользовательские события и атрибуты async и defer.

Ключевое правило — избегайте повторной отправки события DOMContentLoaded, так как оно срабатывает только один раз. Вместо этого используйте описанные альтернативы для синхронизации скриптов. Для оптимальной производительности и лучшего пользовательского опыта рекомендуется использовать атрибут defer для скриптов, которые должны выполняться после полной загрузки DOM, и async для независимых скриптов.

Правильная управление скриптами не только улучшает производительность, но и предотвращает потенциальные ошибки, связанные с доступом к DOM до его полной загрузки.