В чем разница между DomContentLoaded и load?

В чем разница между DomContentLoaded и load

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

DOMContentLoaded

DOMContentLoaded срабатывает, когда браузер полностью разобрал HTML и построил DOM дерево, но ещё ДО загрузки всех внешних ресурсов (изображения, стили, скрипты).

// DOMContentLoaded срабатывает раньше
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM готов к работе');
  // На этом этапе можно уже работать с элементами
  const element = document.getElementById('myElement');
  element.textContent = 'Привет';
});

// Эквивалент
window.addEventListener('DOMContentLoaded', () => {
  console.log('DOM готов');
});

Load

Load срабатывает, когда загружена ВСЯ страница, включая:

• HTML документ
• Все изображения
• Все стили
• Все скрипты
• Все other внешние ресурсы

// Load срабатывает после DOMContentLoaded
window.addEventListener('load', () => {
  console.log('Страница полностью загружена');
  // На этом этапе все ресурсы готовы
  const image = new Image();
  image.src = '/my-image.jpg'; // Безопасно работать с ресурсами
});

Временная шкала загрузки

1. Браузер начинает загружать страницу
           |
2. HTML парсится ----------> [HTML элементы доступны]
           |
   -----> DOMContentLoaded (обычно ~500ms - 1s)
           |
3. Загружаются изображения, стили, шрифты
           |
   -----> Load (обычно ~2-3s)
           |
4. Конец

Практический пример

const startTime = performance.now();

document.addEventListener('DOMContentLoaded', () => {
  const domTime = performance.now() - startTime;
  console.log(`DOMContentLoaded: ${domTime.toFixed(2)}ms`);
});

window.addEventListener('load', () => {
  const loadTime = performance.now() - startTime;
  console.log(`Load: ${loadTime.toFixed(2)}ms`);
});

// Вывод
// DOMContentLoaded: 457ms
// Load: 2340ms
// Разница: 1883ms (время на загрузку изображений и других ресурсов)

Когда использовать каждый

DOMContentLoaded - используй для:

// 1. Инициализация интерактивности (обработчики кликов)
document.addEventListener('DOMContentLoaded', () => {
  const buttons = document.querySelectorAll('button');
  buttons.forEach(button => {
    button.addEventListener('click', handleClick);
  });
});

// 2. Манипуляция с DOM элементами
document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('myForm');
  form.addEventListener('submit', handleSubmit);
});

// 3. Инициализация библиотек
document.addEventListener('DOMContentLoaded', () => {
  new Chart(ctx, data);
  new AwesomeLibrary(options);
});

// 4. Загрузка критичного контента (выше the fold)
document.addEventListener('DOMContentLoaded', () => {
  loadCriticalContent();
});

Load - используй для:

// 1. Работа со всеми загруженными изображениями
window.addEventListener('load', () => {
  const images = document.querySelectorAll('img');
  images.forEach(img => {
    const width = img.naturalWidth;  // Работает только после load
    const height = img.naturalHeight;
    console.log(`${img.src}: ${width}x${height}`);
  });
});

// 2. Инициализация слайдеров, каруселей (нужны размеры элементов)
window.addEventListener('load', () => {
  new Swiper('.swiper', {
    // Элементы уже имеют правильные размеры
  });
});

// 3. Аналитика загрузки
window.addEventListener('load', () => {
  const loadTime = window.performance.timing.loadEventStart - 
                   window.performance.timing.navigationStart;
  analytics.trackPageLoadTime(loadTime);
});

// 4. Тяжелые вычисления
window.addEventListener('load', () => {
  processHeavyData();
  renderComplexVisualization();
});

Performance API для измерения

// Используй PerformanceObserver для точного измерения
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name === 'DOMContentLoaded') {
      console.log('DCL:', entry.startTime);
    }
    if (entry.name === 'loadEventEnd') {
      console.log('Load:', entry.startTime);
    }
  });
});

observer.observe({ entryTypes: ['navigation'] });

// Или используй timing
console.log('DCL время:', window.performance.timing.domContentLoadedEventStart - 
            window.performance.timing.navigationStart);
console.log('Load время:', window.performance.timing.loadEventStart - 
            window.performance.timing.navigationStart);

Инструмент для измерения - Chrome DevTools

Открой DevTools -> Performance tab:

1. Нажми Record
2. Обнови страницу
3. Стоп запись
4. Увидишь:
   - Blue вертикальная линия = DOMContentLoaded
   - Red вертикальная линия = Load

Скрипты и DOMContentLoaded

<!-- Скрипт с атрибутом defer ждёт DOMContentLoaded -->
<script src="script.js" defer></script>

<!-- Этот скрипт выполнится ДО DOMContentLoaded -->
<script src="critical.js"></script>

<!-- Скрипт с async выполнится когда угодно -->
<script src="analytics.js" async></script>

// Если скрипт уже загружен, DOMContentLoaded мог уже произойти
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  // DOMContentLoaded уже произошёл
  init();
}

Отличия в разных сценариях

Best Practice

// Используй DOMContentLoaded для быстрого старта
document.addEventListener('DOMContentLoaded', () => {
  // Инициализация UI и интерактивности (200-400ms)
  initializeUI();
});

// Используй Load для деталей и оптимизации
window.addEventListener('load', () => {
  // Дополнительная работа (800-3000ms)
  enhanceExperience();
});

// Или используй requestIdleCallback для фоновых задач
if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    // Выполнится когда браузер свободен
    trackAnalytics();
  });
}

Вывод

DOMContentLoaded - для инициализации интерактивности (быстро, ~1s) Load - для работы со всеми ресурсами (медленнее, ~2-3s)

Для лучшего UX инициализируй критичный функционал на DOMContentLoaded, остальное на Load или requestIdleCallback.