↓ Перейти к основному содержимому
Тармолов про работу

Как работает браузер

·454 слов·3 минут
Оглавление

В этом посте вы узнаете:

  • о роли клиента во взаимодействии с сервером
  • что такое движок браузера и как он работает
  • из чего состоит типичная веб-страница (HTML, CSS и JavaScript)

Браузер и его движок
#

Рассмотрим одного из главных участников взаимодействия — клиента. Клиент запрашивает и отправляет данные на сервер. Но что он делает с этими данными и как в итоге отображает результат?

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

image.png

Внутри браузера находится специальный компонент — движок браузера. Благодаря движку мы видим красивые веб-страницы с текстом и изображениями.

Движок браузера получает несколько “ингредиентов” и преобразует их в веб-страницу.

image.png

Нам нужно немного глубже погрузиться в работу браузера, и для этого сначала ознакомьтесь с основными “ингредиентами”.

HTML
#

HTML (HyperText Markup Language) — язык разметки, который используется для создания структуры и содержимого веб-страниц.

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

Например, вот простой HTML-код для создания заголовка и параграфа:

<!DOCTYPE html>
<html>
<head>
  <title>Пример HTML</title>
</head>
<body>
  <h1>Заголовок страницы</h1>
  <p>Это пример параграфа на веб-странице.</p>
</body>
</html>

CSS
#

CSS (Cascading Style Sheets) - язык стилей, который используется для определения внешнего вида и оформления веб-страниц.

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

Например, вот простой пример CSS для изменения цвета текста и фона параграфа:

p {
  color: blue;
  background-color: yellow;
}

В данном примере мы задаем стили для элемента <p>. Свойство color устанавливает цвет текста (синий), а свойство background-color устанавливает цвет фона (желтый).

Javascript
#

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

Например, вот простой пример JavaScript для вывода сообщения на веб-странице:

function showMessage() {
  var message = "Привет, мир!";
  alert(message);
}

showMessage();

В данном примере мы создали функцию showMessage, которая определяет переменную message со значением “Привет, мир!”. Затем мы используем функцию alert для вывода сообщения в диалоговом окне. Вызов showMessage() запускает выполнение функции и отображает сообщение “Привет, мир!”.

Как работает движок браузера
#

О работе движка браузера написано множество статей. Я предлагаю две на выбор:

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

После прочтения указанных статей должно укрепиться понимание того, что браузер — не просто адресная строка для ввода URL-адреса и окно для отображения сайта.

image.png

Не беспокойтесь, если некоторые моменты в указанных статьях сейчас кажутся вам непонятными. Важно, чтобы у вас сложилось общее представление.