Логотип
Знания для вашего роста
Перейти к курсамКаталог
HabrVCDzen
Бесплатный курс для начинающих
Освойте HTML, CSS и JavaScript
Узнать больше
17 апреля 2026

Как работает браузер: что нужно знать разработчику

Разобраться
#программирование
Каждый день люди открывают браузер, чтобы зайти на один из миллиарда сайтов в интернете. Всё, что видит пользователь на экране — текст, кнопки, картинки, анимации — браузер собирает из кода, который написал разработчик.

Разбираемся, как работает браузер и что происходит внутри него — от момента, когда пользователь вводит URL в адресную строку, до появления готовой страницы на экране. Статья будет полезна начинающим фронтенд-разработчикам и тем, кто только входит в веб-разработку.

Дина Майсон

Автор, UX-редактор
Каждый день люди открывают браузер, чтобы зайти на один из миллиарда сайтов в интернете. Всё, что видит пользователь на экране — текст, кнопки, картинки, анимации — браузер собирает из кода, который написал разработчик.

Разбираемся, как работает браузер и что происходит внутри него — от момента, когда пользователь вводит URL в адресную строку, до появления готовой страницы на экране. Статья будет полезна начинающим фронтенд-разработчикам и тем, кто только входит в веб-разработку.
  • За консультацию при подготовке материала благодарим экспертов Нетологии:
Подробно

Что такое браузер и зачем он нужен

Браузер — программа, которая помогает пользователю выходить в интернет. Человек вводит адрес сайта, браузер связывается с сервером, на котором этот сайт хранится, получает код страницы и превращает его в то, что мы привыкли видеть на экране: текст, изображения, кнопки, формы.

Архитектура браузера: из чего он состоит

Браузер — система из нескольких компонентов, каждый со своей задачей. Вместе они превращают адрес сайта в готовую страницу:
  • Пользовательский интерфейс — всё, что видит человек вокруг самой страницы: адресная строка, вкладки, кнопки «Назад» и «Вперёд», закладки, меню настроек.
  • Браузерный движок принимает команду от пользователя и координирует работу между тремя разными компонентами: сетевым модулем, движком рендеринга и UI-бэкендом.
  • Сетевой модуль отправляет запросы к серверам и принимает ответы. Например, когда браузеру нужно загрузить страницу, картинку или шрифт.
  • Движок рендеринга превращает код в картинку на экране. Он получает HTML и CSS, разбирает их и собирает визуальную страницу. Движки бывают разные: Chrome, Edge, Opera и Яндекс Браузер работают на Blink, Safari — на WebKit, а Firefox от Mozilla — на Gecko. 
Раньше, когда интернет только начинал развиваться, каждый браузер пытался захватить аудиторию и работал по своим правилам. Разработчикам приходилось изворачиваться, чтобы сайт нормально отображался везде. Со временем появились единые правила, как должны работать веб-технологии. Поэтому крупных расхождений при показе страницы, как во времена войны браузеров, уже нет — стандарты унифицированы.
Раньше, когда интернет только начинал развиваться, каждый браузер пытался захватить аудиторию и работал по своим правилам. Разработчикам приходилось изворачиваться, чтобы сайт нормально отображался везде. Со временем появились единые правила, как должны работать веб-технологии. Поэтому крупных расхождений при показе страницы, как во времена войны браузеров, уже нет — стандарты унифицированы.
  • Владимир Чебукин
    Веб-разработчик в Лаборатории Касперского
  • Владимир Чебукин
    Веб-разработчик в Лаборатории Касперского
  • JavaScript-движок выполняет JavaScript-код, когда пользователь нажимает кнопку на странице. В Chrome это движок V8, в Firefox — SpiderMonkey, в Safari — JavaScriptCore.
  • UI-бэкенд рисует стандартные элементы интерфейса: выпадающие списки, чекбоксы, диалоговые окна. Он же, например, отвечает за предупреждение: «Вы уверены, что хотите покинуть страницу?».
  • Хранилище данных — память браузера. Сюда попадают, например, cookies или настройки сайтов. Благодаря хранилищу браузер помнит, что пользователь уже авторизован на сайте, и не загружает повторно картинку, которую получил минуту назад.
  • Компоненты работают по цепочке: пользователь вводит адрес → браузерный движок передаёт команду → сетевой модуль получает код от сервера → движок рендеринга разбирает HTML и CSS → JavaScript-движок выполняет скрипты, или небольшие программы из набора текстовых команд → на экране появляется страница. Хранилище данных и UI-бэкенд подключаются по мере необходимости — чтобы сохранить cookies или отобразить диалоговое окно.
Научиться создавать сайты и приложения можно на курсе ↓
Веб-разработчик
• Освоите вёрстку и разработку интерфейсов с JavaScript

• Выберете специализацию для бэкэнд-разработки: PHP, Node. js или Python

• Добавите в портфолио до 20 реальных кейсов
Подробнее
Веб-разработчик
• Освоите вёрстку и разработку интерфейсов с JavaScript

• Выберете специализацию для бэкэнд-разработки: PHP, Node. js или Python

• Добавите в портфолио до 20 реальных кейсов
Подробнее
А если ещё не готовы учиться платно, начните с бесплатных курсов ↓
Бесплатный курс
Профессии и языки программирования:
что выбрать
Разберёте 6 востребованных профессий в разработке и напишете свой первый код
Подробнее
Бесплатный курс
Frontend-разработка: основы HTML, CSS и JavaScript
Изучите основные инструменты программиста и создадите свой первый проект
Подробнее

Как браузер обрабатывает запросы

Пользователь набрал адрес сайта и нажал Enter — дальше запускается цепочка событий, которую принято называть critical rendering path — критический путь рендеринга. Браузер выясняет, где находится сервер, устанавливает соединение, загружает код страницы, разбирает его и собирает из него готовое изображение на экране. Рассказываем по шагам, что происходит, когда вводишь URL в браузер.

Шаг 1. Браузер ищет адрес сервера

Адрес сайта — например, netology.ru — понятен человеку, но не компьютеру, ему нужен числовой IP-адрес. В случае Нетологии он может выглядеть так: 51.250.51.8. Чтобы узнать этот адрес, браузер обращается к DNS — системе доменных имён. Принцип похож на список контактов в телефоне: вместо того чтобы набирать номер по памяти, достаточно найти имя — а телефон подставит нужный номер. Сначала браузер проверяет DNS-кеш — вдруг он уже недавно заходил на этот сайт и помнит адрес. Если нет — отправляет запрос на DNS-сервер.

Шаг 2. Устанавливается соединение

Когда адрес найден, браузер устанавливает соединение с сервером через TCP — протокол управления передачей данных. Это происходит в три этапа, так называемое тройное рукопожатие: браузер запрашивает соединение, сервер отвечает готовностью, браузер подтверждает. Если сайт работает по HTTPS — а сегодня это подавляющее большинство — добавляется ещё один этап: TLS-рукопожатие, во время которого браузер и сервер договариваются о шифровании, чтобы никто не мог перехватить данные.

Шаг 3. Браузер запрашивает страницу

После установки соединения браузер отправляет HTTP-запрос — например, «отдай мне главную страницу». Сервер в ответ присылает HTML-документ — код, описывающий структуру страницы.
На схеме — пример обмена данными между браузером и сервером. Браузер отправляет запрос GET — «отдай главную страницу netology.ru», сервер присылает ответ с кодом 200 OK — «всё в порядке, вот она» — и прикладывает HTML-документ с кодом страницы. GET, HTTP/1.1, 200 OK — это части HTTP: тип запроса, версия протокола и код статуса
  • HTML-код состоит из тегов. Тег — это команда для браузера, записанная в угловых скобках. Например, <p> — абзац текста, <h1> — главный заголовок, <img> — изображение. У большинства тегов есть открывающая и закрывающая часть: <p>Текст абзаца</p>.

    У тегов могут быть атрибуты — дополнительные параметры, которые уточняют поведение. Например,
    в <a href="https://netology.ru"> атрибут href указывает адрес ссылки. А в <img src="photo.jpg" alt="Описание"> атрибут src задаёт путь к картинке, alt — текстовое описание для случаев, когда картинка не загрузилась.

Шаг 4. Браузер строит дерево элементов — DOM

Браузер читает HTML и выстраивает из него древовидную структуру. Каждый тег становится узлом дерева. Например, внутри <body> лежит <div>, внутри <div> — <p> с текстом. Эта структура называется DOM — Document Object Model, объектная модель документа. По сути — карта страницы, с которой потом работают и CSS, и JavaScript.
Пример DOM-дерева
  • Важный нюанс: если браузер встречает тег <script> без специальных атрибутов, он останавливает построение дерева и ждёт, пока скрипт загрузится и выполнится. Именно поэтому скрипты часто подключают в конце страницы или с атрибутами async и defer.

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

Шаг 5. Браузер строит дерево стилей — CSSOM

Не дожидаясь завершения DOM, браузер начинает читать CSS и строит из него CSSOM — CSS Object Model. Это дерево описывает, какие стили применяются к каждому элементу. Например, если в CSS указано, что заголовки <h1> должны быть синими и крупными, CSSOM сохранит это правило и свяжет его с соответствующими узлами DOM. При этом дальше — к сборке render tree — браузер не перейдёт, пока не построит хотя бы начальный CSSOM.
  • Важно учитывать, что CSS блокирует рендеринг: браузер отложит первую отрисовку, пока не обработает стили, относящиеся к текущему viewport — видимой области экрана. Именно поэтому CSS принято подключать в начале HTML-документа — в теге <head>.

Шаг 6. Два дерева объединяются в одно

DOM отвечает на вопрос «что есть на странице?», CSSOM — на вопрос «как это выглядит?». Браузер совмещает их в render tree — дерево рендеринга. Оно содержит только те элементы, которые реально нужно показать. Например, модальное окно «Вы уверены?» может присутствовать в HTML-коде страницы с самого начала, но быть скрытым через CSS-свойство display: none. В render tree его не будет — до тех пор, пока пользователь не нажмёт кнопку, которая его покажет.

Шаг 7. Расчёт позиций — layout

Браузер вычисляет, где именно на экране окажется каждый элемент: его ширину, высоту, отступы, положение относительно других элементов.

Шаг 8. Отрисовка — paint

Браузер выводит пиксели: заливает цвета, отображает текст, рисует границы и тени.

Шаг 9. Сборка слоёв — compositing

Современные браузеры разбивают страницу на несколько слоёв. Например, анимированный баннер выносится отдельным слоем, чтобы при его движении не перерисовывать весь остальной контент — текст, меню, фон. На последнем шаге все слои объединяются в финальное изображение — и так завершается рендеринг страницы в браузере.
Схема critical rendering path — от DNS-запроса до Compositing

Выполнение JavaScript в браузере

Шаги выше описывают, как браузер превращает код в картинку. Но страница — это не только картинка: кнопки реагируют на клики, формы отправляют данные, содержимое обновляется без перезагрузки. За всё это отвечает JavaScript — основной язык программирования для веба, который браузер выполняет напрямую. С 2017 года браузеры также поддерживают WebAssembly — формат, позволяющий запускать код на других языках прямо в браузере. Но для начинающего разработчика ключевым инструментом остаётся именно JavaScript.

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

JavaScript-движок не запускает код сразу построчно. Сначала он разбирает исходный текст — находит функции, переменные, зависимости и определяет структуру. После этого начинается выполнение кода в браузере.
  • Если какая-то задача запускается многократно — например, нужно пересчитать стоимость корзины при добавлении товаров в интернет-магазине — движок переводит её в машинный код. Это набор низкоуровневых команд, которые процессор выполняет напрямую и гораздо быстрее. Такой подход называется JIT-компиляция — Just-In-Time, компиляция «в нужный момент».

Почему интерфейс иногда зависает

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

Как браузер справляется с ожиданием — event loop

Многие задачи требуют ожидания: загрузить данные с сервера, подождать 3 секунды, дождаться клика. Если бы браузер останавливался каждый раз — страницы работали бы очень медленно.

Поэтому в браузере есть механизм event loop — цикл событий. Основной поток выполняет код по порядку. Когда встречается задача, требующая ожидания — например, запрос к серверу — браузер поручает её своим фоновым потокам и продолжает работать дальше. Когда ответ приходит, event loop отправляет результат в очередь, и как только основной поток освободится, забирает его и обрабатывает.

Например, когда пользователь нажимает «Оплатить» и сайт отправляет запрос к платёжной системе, браузер не замирает в ожидании ответа. Он продолжает реагировать на прокрутку и другие действия. Когда ответ придёт — обработает его и покажет итог.

Как разгрузить основной поток — web workers

Если задача действительно тяжёлая — например, обработка большого файла или сложные математические вычисления — её можно вынести в отдельный поток с помощью web workers.

В отличие от event loop, который лишь управляет очередью задач, web workers позволяют задействовать дополнительные мощности процессора для выполнения кода. Механизм запускает сложные вычисления параллельно с основным потоком: он выполняет расчёт в фоне, а когда заканчивает, — передаёт результат обратно. Браузер при этом продолжает обслуживать интерфейс, и страница не зависает.

Как JavaScript меняет страницу

Изменения происходят через DOM API — набор команд, который браузер предоставляет для работы с деревом элементов. JavaScript может находить элементы на странице, менять их текст, стили, атрибуты, удалять существующие узлы или добавлять новые — например, когда пользователь вводит текст в поле поиска и под ним появляются подсказки.
  • Любое такое изменение заставляет браузер заново просчитывать, как должна выглядеть страница. Если JavaScript меняет геометрию — например, ширину блока или размер шрифта — происходит reflow, то есть пересчёт позиций всех зависимых элементов. Затем следует repaint — отрисовка пикселей. Если же меняется цвет или прозрачность, браузер обойдётся только перерисовкой.

    Когда JavaScript меняет десять элементов один за другим — например, по очереди увеличивает высоту карточек в каталоге интернет-магазина — браузер запускает десять циклов пересчёта страницы, и сайт начинает тормозить. Чтобы этого избежать, правки стоит группировать: сначала собрать все изменения в черновом фрагменте кода, а потом применить одним действием. Так браузер пересчитает позиции только один раз.

Как браузер работает с сетью и протоколами

Каждый раз, когда браузер загружает страницу, картинку или шрифт, он отправляет запрос по сети. Чтобы понимать друг друга, браузер и сервер общаются по правилам — протоколам.

HTTP — основной протокол веба

Каждое взаимодействие браузера с сервером — это пара «запрос — ответ». Браузер отправляет запрос: «дай мне главную страницу». Сервер отвечает: «вот она» и присылает код. Но одна страница — это не один запрос: HTML-документ, файлы стилей, скрипты, картинки, шрифты — каждый ресурс загружается отдельно. Все эти запросы идут через соединение — канал связи между браузером и сервером. Запросы бывают разных типов: GET — получить данные, POST — отправить, PUT — обновить, DELETE — удалить.

HTTP/2 и HTTP/3 — ускорение загрузки

Первая массовая версия протокола — HTTP/1.1 — уже умела переиспользовать одно соединение для нескольких запросов. Но с ограничением: браузер открывал не больше шести параллельных соединений на один домен, и в каждом запросы обрабатывались строго по очереди. Если на странице 50 ресурсов — они загружались порциями, остальные ждали.

HTTP/2 решил эту проблему мультиплексированием: десятки запросов начали идти по одному соединению одновременно, не блокируя друг друга. HTTP/3 пошёл ещё дальше — использует другой транспортный протокол, QUIC, который работает быстрее, особенно при нестабильном мобильном соединении.

HTTPS — HTTP с шифрованием

Буква S означает secure — безопасный. Все данные между браузером и сервером шифруются: никто посередине — например, провайдер или злоумышленник в публичной Wi-Fi-сети — не может их прочитать. Сегодня HTTPS — стандарт. Браузеры помечают HTTP-сайты как небезопасные, поисковые системы понижают их в выдаче.

Кеширование — как браузер экономит время

Протоколы определяют, как браузер запрашивает данные, но иногда запрос не нужен вовсе. Когда браузер впервые загружает ресурс — картинку, файл стилей, скрипт — он может сохранить копию у себя. При повторном визите этот ресурс не придётся заново запрашивать с сервера — браузер возьмёт его из кеша. Это ускоряет загрузку и экономит трафик.

Есть два подхода:
  • Сильный кеш — браузер вообще не обращается к серверу и берёт файл из локальной копии.
  • Условный кеш — браузер спрашивает «этот файл изменился?», и если нет — использует свою копию.

Service workers — работа офлайн

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

На такой технологии строятся progressive web apps, или PWA. Это сайты, которые умеют работать без интернета. Внешне они выглядят как обычные приложения: открываются в отдельном окне, отправляют уведомления. Но за ними не стоит отдельная программа: браузер сам сохраняет нужные файлы и запускает сайт из кеша. Например, веб-версия Telegram позволяет просматривать чаты, даже если связь пропала, — а когда интернет появляется, данные синхронизируются с сервером.
  • Service Workers подходят далеко не каждому проекту. Настроить их непросто: нужно продумать, какие данные сохранять, в какое время их обновлять и что делать, когда сохранённая версия устарела. Если допустить ошибку — пользователь будет видеть старую версию страницы и не поймёт, почему ничего не обновляется. Типовому корпоративному сайту или интернет-магазину без офлайн-функций Service Workers не нужны.

Same-origin policy и CORS — ограничения на запросы между сайтами

Браузер соблюдает правило безопасности: скрипт на одном сайте не может просто так обратиться к другому. Допустим, разработчик делает сайт-агрегатор погоды: JavaScript на my-weather.ru пытается получить прогноз с api.openweather.org — внешнего сервиса, который отдаёт данные о погоде через API. Браузер не даст JavaScript прочитать ответ, если сервер openweather не разрешил доступ явно. Это правило называется same-origin policy — политика одного источника.

Чтобы всё-таки получить данные с чужого сервера, тот должен явно это разрешить. Механизм, через который это работает, называется CORS — cross-origin resource sharing. Сервер добавляет в ответ специальный заголовок — например, Access-Control-Allow-Origin: my-weather.ru — который говорит браузеру: данные с этого сервера разрешено запрашивать сайту my-weather.ru. Когда такого заголовка нет, браузер получает ответ, но скрывает его от JavaScript. То есть запрос доходит до цели и успешно обрабатывается, но скрипт не способен прочитать результат без разрешения, полученного через CORS.

  • Именно поэтому начинающие разработчики часто попадают в ловушку: тестируют запрос в Postman — программе, которая отправляет запросы к серверу напрямую, минуя браузер, — и всё работает. А тот же запрос из кода на странице возвращает ошибку. Разница в том, что Postman не применяет same-origin policy, так как он не браузер. А браузер — применяет.


    Похожая ситуация и с переходом с локального сервера на продакшен. Пока разработчик тестирует код на своём компьютере, запросы к API уходят с того же адреса, на который настроен сервер, и всё работает. Но стоит выложить сайт на другой домен — CORS-заголовки на сервере могут оказаться не настроенными, и запросы начнут падать с ошибкой. Браузер у каждого пользователя — это другая среда с другими настройками, и стоит заранее думать о том, что условия отличаются от локальных.

Узнайте больше о работе браузера ↓
База знаний Нетологии
•  25 видеоуроков для начинающих разработчиков

• Всего 16 000 лекций, воркшопов и вебинаров — по разработке, программированию, мягким навыкам, саморазвитию, хобби и многому другому

• Смотрите до 10 видео в день — бесплатно
Получить доступ
База знаний Нетологии
•  25 видеоуроков для начинающих разработчиков

• Всего 16 000 лекций, воркшопов и вебинаров — по разработке, программированию, мягким навыкам, саморазвитию, хобби и многому другому

• Смотрите до 10 видео в день — бесплатно
Получить доступ

Разбор инструментов разработчика в браузере — DevTools

Все процессы, описанные выше — от загрузки кода до выполнения JavaScript и сетевых запросов, — можно наблюдать и анализировать в реальном времени. Для этого есть DevTools — консоль разработчика в браузере. Это набор встроенных инструментов для отладки и анализа веб-страниц, который есть в каждом современном браузере. Например, в Google Chrome DevTools открывается сочетанием Ctrl+Shift+I на Windows и Linux или Cmd+Option+I на macOS. Панель можно закрепить сбоку, снизу или в отдельном окне.
  • Чтобы начать пользоваться консолью разработчика в браузере, достаточно освоить пять инструментов. Логичная последовательность — та же, что и в обучении: сначала вёрстка — работа с HTML и стилями, потом программирование и отладка кода, а затем сеть и анализ HTTP-запросов.

Elements — что на странице и как это выглядит

Вкладка показывает дерево элементов страницы — тот самый DOM. Можно кликнуть на любой элемент и увидеть его HTML-код и применённые стили. Прямо в браузере меняется текст, цвет или размер — результат виден мгновенно, но не сохраняется после перезагрузки. Это удобно для экспериментов: например, посмотреть, как будет выглядеть другой цвет заголовка или что произойдёт, если увеличить ширину блока.

Отдельно полезна Box Model — визуальная схема, которая показывает, сколько места занимает элемент: его ширину и высоту, границу, внутренние и внешние отступы. Если вёрстка поехала — Box Model помогает быстро понять, в чём причина.
Вкладка Elements при работе с главной страницей сайта Медиа Нетологии. Справа внизу — Box Model

Console — журнал ошибок и место для экспериментов

Если на странице что-то сломалось — ошибка появится в консоли. Разработчики также используют консоль, чтобы выводить промежуточные значения: console. log показывает данные, console. error — ошибки, console. table — массивы и объекты в виде таблицы. Можно выполнять JavaScript-код прямо в консоли: проверить значение переменной, вызвать функцию, протестировать запрос к API.
Вкладка Console при работе с главной страницей сайта Медиа Нетологии

Network — что загружается и сколько это занимает

Вкладка отображает все запросы, которые браузер отправляет при загрузке страницы: HTML-документ, стили, скрипты, картинки, шрифты, запросы к API. Для каждого запроса видно, сколько он весит и сколько времени занимает. Waterfall, или водопад загрузки, — визуальная диаграмма справа от списка запросов, которая наглядно показывает, что грузится параллельно, а что ждёт очереди. Если страница тормозит, вкладка Network поможет найти самый тяжёлый ресурс.
Водопад загрузки во вкладке Network главной страницы сайта Медиа Нетологии

Performance — почему страница тормозит

Инструмент записывает, что браузер делает каждую миллисекунду: строит DOM, выполняет JavaScript, рисует пиксели. Помогает найти узкое место — тот момент, где браузер тратит больше всего времени.
Вкладка Performance при работе с главной страницей сайта Медиа Нетологии
  • Не всегда источник торможения находится там, где его ожидаешь. Иногда страница тормозит не из-за JavaScript, а из-за CSS — и обнаружить это можно только методом исключения, откатом по истории изменений в коде.

Lighthouse — автоматическая проверка качества

Запускает аудит и оценивает страницу по нескольким критериям: производительность, доступность, SEO и соответствие рекомендациям — например, используется ли HTTPS, нет ли уязвимостей в подключённых библиотеках, корректно ли работают изображения. По каждому критерию — оценка от 0 до 100 и конкретные рекомендации, что исправить.
Вкладка Lighthouse при работе с главной страницей сайта Медиа Нетологии
Для закрепления навыков важно не только читать документацию, но и ставить эксперименты — и фиксировать результаты. Например, можно проверить, как работает асинхронность. 

В Chrome на любой странице достаточно зажать Ctrl+Shift+I на Windows или Cmd+Option+I на macOS. Для работы с DevTools через Safari нужно сначала включить режим разработки: перейти в Safari → Настройки → Дополнения и поставить галочку «Показывать функции для веб-разработчиков».

Затем во вкладке Console нужно ввести:

console.log ('Начало'); fetch ('https://api.github.com/users/github').then (() => console. log ('Ответ от сервера')); console. log ('Конец');

В консоли появится «Начало», сразу за ним «Конец» — и только через мгновение «Ответ от сервера». Браузер не стал ждать ответа и продолжил выполнять код. Именно так работает event loop, о котором мы рассказывали выше.

Заведите себе тетрадь или файл и после каждого эксперимента записывайте: что ожидали, что произошло и почему. Через месяц такой практики вы будете понимать сеть гораздо лучше.
  • Валерий Семененко
    Фронтенд-разработчик в «Интер РАО — Цифровые решения»
Для закрепления навыков важно не только читать документацию, но и ставить эксперименты — и фиксировать результаты. Например, можно проверить, как работает асинхронность.

В Chrome на любой странице достаточно зажать Ctrl+Shift+I на Windows или Cmd+Option+I на macOS. Для работы с DevTools через Safari нужно сначала включить режим разработки: перейти в Safari → Настройки → Дополнения и поставить галочку «Показывать функции для веб-разработчиков».

Затем во вкладке Console нужно ввести:

console.log ('Начало'); fetch ('https://api.github.com/users/github').then (() => console. log ('Ответ от сервера')); console. log ('Конец');

В консоли появится «Начало», сразу за ним «Конец» — и только через мгновение «Ответ от сервера». Браузер не стал ждать ответа и продолжил выполнять код. Именно так работает event loop, о котором мы рассказывали выше.

Заведите себе тетрадь или файл и после каждого эксперимента записывайте: что ожидали, что произошло и почему. Через месяц такой практики вы будете понимать сеть гораздо лучше.
  • Валерий Семененко
    Фронтенд-разработчик в «Интер РАО — Цифровые решения»
Читать также
Чтобы быть в курсе всех новостей и не пропускать новые статьи, присоединяйтесь к Telegram-каналу Нетологии.
Дина Майсон
Автор, UX-редактор
Оцените статью