Как веб-разработчик, моя ежедневная работа заключается в представлении данных в браузере. Браузер, я использую его каждый день, но как работает браузер? Я действительно не понимаю.

Чтобы научиться этому, я создал игрушечный браузер. Он может отправить HTTP-запрос, получить ответ и отобразить ответ.

Там будет несколько статей, чтобы показать игрушечный браузер, и эта даст краткое введение и настройку игрушечного браузера.

Выкрикните wintercn. Я узнал об игрушечном браузере по его видео.

Введение

Когда мы хотим посетить некоторые веб-сайты, мы используем браузер. Мы вводим URL-адрес веб-сайта и ждем, пока домашняя страница не появится в браузере. Ну, этот сценарий включает в себя основные функции браузера. Чтобы было понятнее, мы можем разделить его на 5 шагов.

  1. HTTP-запрос и анализ ответа: когда мы вводим URL-адрес веб-сайта, браузер отправляет запрос на сервер. Он сообщает серверу, что клиенту нужна домашняя страница. Затем сервер отправляет домашнюю страницу. Браузер должен получить этот ответ и проанализировать его. Игрушечный браузер должен извлечь HTML-файл из ответа.
  2. Синтаксический анализ HTML и вычисление CSS: файл HTML представляет собой закодированную домашнюю страницу. Браузер должен его декодировать. В этой части браузер превратит файл HTML в дерево DOM, которое можно использовать для отображения домашней страницы. CSS устанавливает стиль домашней страницы. Например, CSS определяет, где должен быть размещен логотип веб-сайта. В этой частибраузер будетприменять правила CSS к элементам в дереве DOM, чтобы убедиться, что все элементы имеют правильный стиль.
  3. Макет и визуализация: некоторые правила CSS могут быть абстрактными, например flexили grid макет. Браузер должен преобразовать макеты CSS в инструкции направления, что означает предоставление свойств, таких как положение, ширина, высота и т. д. И эти инструкции также необходимо смонтировать в дереве DOM. Наконец, Дерево DOM будет отображаться как изображение.

Настроить

И игрушечный браузер, и сервер написаны на JavaScript. Перед установкой загрузите npm и node.js.

Мой игрушечный браузер доступен на моем Github. Инструкция по настройке находится в README. Ссылка на гитхаб

Скопируй и попробуй :)