Skip to content

Update webdev.md #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions interview/webdev.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,44 @@
<details>
<summary>Ответ</summary>

#### *1. Парсинг URL - можно отнести к условно первому этапу (не считая самого процесса ввода символов в поисковом поле браузера), во время которого*:
- Браузер проверяет список предзагруженных HSTS (HTTP Strict Transport Security). Это список сайтов, которые требуют, чтобы к ним обращались только по HTTPS. Если нужный сайт есть в этом списке, то браузер отправляет ему запрос через HTTPS вместо HTTP. В противном случае, начальный запрос посылается по HTTP.
- Конвертируются не-ASCII Unicode символы в название хоста.

#### *2. Следующий этап - Определение DNS*
- Браузер проверяет наличие домена в своём кэше. Если домена там нет, то браузер вызывает библиотечную функцию *gethostbyname* (отличается в разных ОС) для поиска нужного адреса в файле *hosts*.
- Если домен нигде не закэширован и отсутствует в файле hosts, gethostbyname отправляет запрос к сетевому DNS-серверу.
- Запрос к сетевому DNS-серверу называется ARP-запросом.
- Для того, чтобы отправить ARP-запрос браузеру необходимо отыскать целевой IP-адрес, а также знать MAC-адрес интерфейса, который будет использоваться для отправки ARP-запроса.

#### *3. Открытие сокета и сборка TCP-сегмента/пакета*
- Когда браузер получает IP-адрес конечного сервера, то он берёт эту информацию и данные об используемом порте из URL (80 порт для HTTP, 443 для HTTPS), осуществляет вызов функции socket системной библиотеки и запрашивает поток TCP сокета.
- Этот запрос сначала проходит через транспортный уровень, где собирается TCP-сегмент. Получившийся сегмент отправляется на сетевой уровень, на котором добавляется дополнительный IP-заголовок, IP-адрес сервера назначения и адрес текущей машины — теперь сегмент сформирован.

#### *4. TLS handshake — для передачи пакетов данных между клиентом (компьютером) и сервером важно установить TCP-соединение. Это соединение устанавливается с помощью процесса, называемого трехсторонним рукопожатием TCP / IP, реализованного следующим образом*:

- Клиентская машина отправляет SYN-пакет на сервер, спрашивая, открыт ли он для новых подключений.
- Если на сервере есть открытые порты, которые могут принимать и инициировать новые соединения, он ответит, используя пакет SYN / ACK.
- Клиент получит пакет SYN / ACK от сервера и подтвердит его, отправив пакет ACK.

#### *5. Обработка HTTP-запросов на сервере*
- Одним из инструментов обработки запросов/ответов на стороне сервера является HTTPD. Наиболее популярные HTTPD-серверы это Apache или Nginx для Linux и IIS для Windows.
- Сервер разбирает запрос по следующим параметрам: метод HTTP-запроса (наиболее распространенные — GET/POST), домен, запрашиваемые пути.
- Сервер находит контент, который соответствует запросу и парсит файл с помощью обработчика.

#### *6. Парсинг HTML и интерпретация CSS*
- Главной задачей HTML-парсера является разбор разметки в специальное дерево — «parse tree» — это дерево DOM-элементов.
- Во время разбора браузер парсит CSS-файлы, каждый из которых разбирается в объект StyleSheet.

#### *7. Рендеринг страниц и пост-рендеринговое исполнение*
- Путём перебора DOM-узлов и вычисления для каждого узла значений CSS-стилей создаётся «Дерево рендера» (Render Tree или Frame Tree).
- Вычисляются координаты каждого узла. Вычисляются финальные позиции слоёв и через Direct3D/OpenGL отдаются композитные команды.
- После завершения рендеринга, браузер исполняет JavaScript-код в результате срабатывания часового механизма или в результате действий пользователя.

#### *Для более детального ознакомления:*
- https://habr.com/ru/company/htmlacademy/blog/254825/
- https://github.com/alex/what-happens-when
- https://medium.com/@maneesha.wijesinghe1/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a
#### *1. Парсинг URL - можно отнести к условно первому этапу (не считая самого процесса ввода символов в поисковом поле браузера), во время которого*:
- Браузер проверяет список предзагруженных HSTS (HTTP Strict Transport Security). Это список сайтов, которые требуют, чтобы к ним обращались только по HTTPS. Если нужный сайт есть в этом списке, то браузер отправляет ему запрос через HTTPS вместо HTTP. В противном случае, начальный запрос посылается по HTTP.
- Конвертируются не-ASCII Unicode символы в название хоста.

#### *2. Следующий этап - Определение DNS*
- Браузер проверяет наличие домена в своём кэше. Если домена там нет, то браузер вызывает библиотечную функцию *gethostbyname* (отличается в разных ОС) для поиска нужного адреса в файле *hosts*.
- Если домен нигде не закэширован и отсутствует в файле hosts, gethostbyname отправляет запрос к сетевому DNS-серверу.
- Запрос к сетевому DNS-серверу называется ARP-запросом.
- Для того, чтобы отправить ARP-запрос браузеру необходимо отыскать целевой IP-адрес, а также знать MAC-адрес интерфейса, который будет использоваться для отправки ARP-запроса.

#### *3. Открытие сокета и сборка TCP-сегмента/пакета*
- Когда браузер получает IP-адрес конечного сервера, то он берёт эту информацию и данные об используемом порте из URL (80 порт для HTTP, 443 для HTTPS), осуществляет вызов функции socket системной библиотеки и запрашивает поток TCP сокета.
- Этот запрос сначала проходит через транспортный уровень, где собирается TCP-сегмент. Получившийся сегмент отправляется на сетевой уровень, на котором добавляется дополнительный IP-заголовок, IP-адрес сервера назначения и адрес текущей машины — теперь сегмент сформирован.

#### *4. TLS handshake — для передачи пакетов данных между клиентом (компьютером) и сервером важно установить TCP-соединение. Это соединение устанавливается с помощью процесса, называемого трехсторонним рукопожатием TCP / IP, реализованного следующим образом*:
- Клиентская машина отправляет SYN-пакет на сервер, спрашивая, открыт ли он для новых подключений.
- Если на сервере есть открытые порты, которые могут принимать и инициировать новые соединения, он ответит, используя пакет SYN / ACK.
- Клиент получит пакет SYN / ACK от сервера и подтвердит его, отправив пакет ACK.

#### *5. Обработка HTTP-запросов на сервере*
- Одним из инструментов обработки запросов/ответов на стороне сервера является HTTPD. Наиболее популярные HTTPD-серверы это Apache или Nginx для Linux и IIS для Windows.
- Сервер разбирает запрос по следующим параметрам: метод HTTP-запроса (наиболее распространенные — GET/POST), домен, запрашиваемые пути.
- Сервер находит контент, который соответствует запросу и парсит файл с помощью обработчика.

#### *6. Парсинг HTML и интерпретация CSS*
- Главной задачей HTML-парсера является разбор разметки в специальное дерево — «parse tree» — это дерево DOM-элементов.
- Во время разбора браузер парсит CSS-файлы, каждый из которых разбирается в объект StyleSheet.

#### *7. Рендеринг страниц и пост-рендеринговое исполнение*
- Путём перебора DOM-узлов и вычисления для каждого узла значений CSS-стилей создаётся «Дерево рендера» (Render Tree или Frame Tree).
- Вычисляются координаты каждого узла. Вычисляются финальные позиции слоёв и через Direct3D/OpenGL отдаются композитные команды.
- После завершения рендеринга, браузер исполняет JavaScript-код в результате срабатывания часового механизма или в результате действий пользователя.

#### *Для более детального ознакомления:*
- https://habr.com/ru/company/htmlacademy/blog/254825/
- https://github.com/alex/what-happens-when
- https://medium.com/@maneesha.wijesinghe1/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a
</details>

1. Что такое сессия? Для чего используется?
Expand Down