itmo_conspects
Web-разработка: Frontend
Презентации доступны по ссылке https://xrem.github.io/web/
Лекция 1. Как устроен Web?
Всемирная паутина (World Wide Web, или же просто Web) - распределенная система компьютеров, предоставляющая доступ к связанным между собой документам
Сейчас же веб используется для просмотра веб-страниц с контентом, таким как текст, видео, музыка и другое, но что же происходит, когда мы вводим адрес веб-сайта в строке браузера?
Для этого браузер, специальная программа для доступа и обработки веб-страниц, отправляет запрос DNS-серверу
В сети Интернет для непосредственного доступа к другому компьютеру не используются URL-адреса (Uniform Resource Locator), которыми мы пользуемся и которые мы легко понимаем, например itmo.ru. Вместо них используются IP-адреса (например, 247.207.70.150), которые присвоены каждому компьютеру в Интернете
Чтобы по URL-адресу получить IP-адрес, браузер делает запрос DNS-серверу, который возвращает IP-адрес сервера
Подробнее про DNS - https://pelmesh619.github.io/itmo_conspects/telecomm/telecomm_superconspect.html#-%D0%BB%D0%B5%D0%BA%D1%86%D0%B8%D1%8F-12-dns
Далее браузер делает запрос этому серверу на получение веб-страницы. Основным протоколом в обмене веб-страниц и совершении других запросов является HTTP, HyperText Transfer Protocol (Протокол передачи гипертекста). HTTP работает поверх протокола TCP. Сейчас использует более безопасная версия HTTPS (HTTP Secured). Для создания запроса браузер создает TCP-соединение между текущим компьютером и сервером. Для браузеры выбирается случайный TCP-порт больше 1024, а для сервера порт заранее известен: 80 для HTTP и 443 для HTTPS. Имя протокола указывается в начале полного адреса, например, https://itmo.ru
Веб-сервер, компьютер, принявший запрос, имеет специальное программное обеспечение, которое обрабатывает запрос. Основной функцией веб-сервера является хранение, обработка и передача веб-страниц. Имя страницы представляет собой путь после доменного имени и в простейшем случае может быть файлом на веб-сервере, например, https://itmo.ru/promo/itmo-logo-dark.svg
Если веб-страница по данному адресу существует, то сервер отправляет ее. Ответ содержит HTTP-код, например, 200, что означает успешный запрос. Если запрошенной страницы нет, то отправляется ответ с кодом 404 и страница-заглушка. Дополнительно, сервер может отправить код 304, что означает, что страница не изменилась, и браузер может загрузить ее из своего кеша
Далее TCP-соединение закрывается, и полученный контент обрабатывается. Сейчас все веб-страницы представляют из себя набор документов из HTML-файла, стилей и скриптов. Браузер обрабатывает HTML-код, обнаруживает дополнительные ресурсы, которые нужны для работы страницы, такие, как изображения, стили, скрипты и прочее, и загружает их, делая дополнительные запросы
После этого браузер дополнительно анализируется HTML-код, содержащий в себе структуру страницы. HTML-код, состоящий из тегов, парсится, создается документно-объектная модель страницы
Далее обрабатываются стили, задающие обертку блоков, форматирование текста и другую стилизацию страницы, после чего страница рендерится в окне браузера. Затем запускаются скрипты, написанные на языке JavaScript, которые делают страницу интерактивной
Основная задача фронтенд-разработчика - создать надежный, быстрый и удобный мост между бэкендом и пользователем, реализовав весь сложный интерфейс, который работает на стороне клиента, несмотря на то, какое устройство имеет пользователь, телефон с маленьким экраном и широкий дисплей