Вопрос проверяет понимание механизма асинхронной загрузки ресурсов в браузере и его влияния на критический путь рендеринга.
Когда браузер встречает тег <img> в HTML, он не останавливает парсинг документа. Вместо этого он отправляет запрос на загрузку изображения асинхронно, а сам продолжает строить DOM. Это ключевое отличие от блокирующих ресурсов, таких как синхронные скрипты или CSS-файлы, которые могут задерживать рендеринг.
Современные браузеры используют предзагрузчик, который сканирует HTML ещё до того, как основной парсер построит DOM. Он находит ссылки на изображения, скрипты и стили и начинает их загрузку заранее. Это ускоряет общую загрузку страницы, так как запросы отправляются параллельно с парсингом.
Изображения не блокируют событие DOMContentLoaded, которое срабатывает, когда DOM полностью построен. Однако они могут задерживать событие load, которое ждёт загрузки всех ресурсов, включая изображения. Это важно для аналитики и интерактивности.
<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
</head>
<body>
<h1>Контент отображается сразу</h1>
<img src="large-image.jpg" alt="Большое изображение">
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM готов, изображение ещё может загружаться');
});
</script>
</body>
</html>В этом примере заголовок появится сразу, а изображение будет загружаться асинхронно. Событие DOMContentLoaded сработает до полной загрузки изображения.
Понимание асинхронной загрузки изображений помогает оптимизировать производительность страницы, особенно для контентных сайтов. Используйте атрибуты loading="lazy" для отложенной загрузки изображений вне экрана, чтобы ускорить начальный рендеринг.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультациюFrontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию