← Назад ко всем вопросам

Как браузер определяет порядок загрузки и исполнения ресурсов

1️⃣ Как кратко ответить

Браузер определяет порядок загрузки и исполнения ресурсов на основе HTML-документа и атрибутов тегов. Он загружает ресурсы в порядке их появления в документе, но может изменять этот порядок в зависимости от атрибутов, таких как async и defer для скриптов. CSS блокирует рендеринг, а JavaScript может блокировать загрузку последующих ресурсов, если не используется асинхронная загрузка.

2️⃣ Подробное объяснение темы

Когда браузер загружает веб-страницу, он выполняет несколько шагов, чтобы определить порядок загрузки и исполнения ресурсов. Этот процесс важен для оптимизации времени загрузки страницы и обеспечения правильного отображения контента.

Парсинг HTML

Браузер начинает с парсинга HTML-документа. По мере чтения HTML он обнаруживает различные ресурсы, такие как CSS, JavaScript, изображения и шрифты, которые необходимо загрузить.

Загрузка CSS

CSS-файлы загружаются в порядке их появления в HTML. Они блокируют рендеринг страницы, потому что браузер должен знать стили, прежде чем отобразить контент. Это означает, что браузер не будет отображать содержимое, пока все CSS не будут загружены и применены.

Загрузка JavaScript

JavaScript может блокировать загрузку и исполнение других ресурсов. По умолчанию, когда браузер встречает <script> без атрибутов async или defer, он останавливает парсинг HTML и загружает скрипт. После загрузки скрипт выполняется, и только затем продолжается парсинг HTML.

Атрибуты async и defer

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

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

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <link rel="stylesheet" href="styles.css"> <!-- CSS загружается и блокирует рендеринг -->
    <script src="script1.js" async></script> <!-- Загружается асинхронно, выполняется сразу после загрузки -->
    <script src="script2.js" defer></script> <!-- Загружается асинхронно, выполняется после парсинга HTML -->
</head>
<body>
    <h1>Hello, World!</h1>
    <img src="image.jpg" alt="Example Image"> <!-- Изображения загружаются асинхронно -->
</body>
</html>

Загрузка изображений и других медиа

Изображения и другие медиафайлы загружаются асинхронно, что означает, что они не блокируют парсинг HTML или выполнение JavaScript. Браузер может начать загрузку этих ресурсов, как только они обнаружены в HTML.

Оптимизация загрузки

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

  • Минимизация количества HTTP-запросов.
  • Использование CDN для ускорения доставки контента.
  • Применение атрибутов async и defer для скриптов.
  • Ленивая загрузка изображений и других медиа.

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

Тема: Основы веба и браузера
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки