З бара адреса да пікселей: як прыгледчыкаў зацягваецца веб-сторана

Запісваўчы example.com і натиснувшы Enter, здаецца, ўсё відбываецца мгновенна, але перш чым ўсё з’явіцца на экране, відбуваецца калькі разлічных крокаў. Калі вы толькі пачынаеце працаваць у сферы веб-розрабкі, такія тэрміны як DNS, сервер, HTML, CSS і JavaScript можу здавацца окремымі тэмамі. У этай статыце ўсе яны з’ѐеднаны ў адну послідовнасць, так што у вас будзе ментальная модель, да якой пазней можна будзе прыўязаць іншыя тэмы — ад API да кантролі працяздатнасі відображэння.

Этот процес складаецца з чатырох стадзій: падбор сайту, запит да яго на контэнт, приём гэтага контэнту і ператворэнне яго ў видимую сторанку.

Стадзія 1: Падбор месца, дзе знаходзіцца веб-сайт

Люди ідентыфікуюць веб-сайты па іменах. Такія імены лёгка запам’ятаваць:

example.com
google.com
youtube.com

Адрэсы комп’ютераў у сетцы, тым часам, адзін з другім пазначаюцца за дапамогою IP-адрэс — цифровых ідэнтыфікатораў, такіх як 203.0.113.10 для IPv4 або дэльнейшых шысцядзевічных форм для IPv6. Перш чым браузер можа звяжыцца з сайтом, ён должен перакласті це назва ў адрэсу. Гэтая задача лежыць на DNS — Сістэме імен доменаў.

Хорашы спосаб разумець DNS — это списак контактаў у вашам тэлефоне. Вы зберагаеце і шукаеце людзей па імені, а тэлефон сам нарабляе ўсё неабходнае число. Вам ніколі не трэба запамяцваць цыфры. DNS рабіць тое ж самае для інтэрнету: вы вводзіце назву домена, а DNS падае адрэса машыны, якая яго обслугоўвае.

У практыцы процес пошуку адрэса ўраджваеся шляхом викорыстання кэша. Браузер спачатку пераглядае свой сэндкэш, потым кэш операцыйной системы, і толькі пасля чаго звертаецца да рашыючага прыстроя DNS, які зазвычай адмаўляецца вашым інтэрнет-прадаўцам або публічным DNS-сэрвісам. Якщо рашыючы прыстрой ўжо не знае адпаведзення, ён праходзіць праз іерархію DNS пакуль не знаходзіць серверы, якія адпаведаюць за той домэн. Завядзкай кэшавання, сайт, які вы няўжо адвідалі, зазвычай рашуецца практычна мгновенна.

Этап 2: Адправка запиту

Калі ёсць IP-адрэса, браузер можа звяжыцца з сэрверам сайту – комп’ютерам, задачай якога є зберагчыць, генераваць і дастаўляць файлы і даны, неабходныя веб-сайту.

Перш чым які-небудзь веб-контэнты будуць пераданы, прыгледач стварае з’язок з тым серверам. Для сучаснага сайту https:// гэта таксама включае процедуру TLS-рукостукання, пад час якой обе стороны дагадваюцца пра ключы шифравання, а прыгледач пераканальвае сертыфікат сервера, ўбеджаючыся, што він спрацоўвае з асалідным сайтом. Лячына толькі тады прыгледач адправляе запит HTTP.

У сваёй паляве запит праходзіць через многія сеті і прыстроі, такія як ваш раутер, обладнанне вашага прадавца і разныя проміжныя раутеры, перш чым досягне сервера. У своім сутнасці запит гаворыць: «Па канспекту, адправіце мне тое, што мне трэба, каб прадысплеяць гэтую сторанку». У яму таксама ўключаюцца дакладныя відомасці, такія як точны шлях запиту, падтрымваныя прыгледачам форматы і будзь-якія кукі для таго сайту.

Этап 3: Прыема адпаведзі

Сервер обрабоцвае запит і адпавядае HTTP-адпаведзеннем. Першым адпаведзеннем зазвычай яўляецца дакумент HTML, і гэты дакумент паводзіць на іншыя ресурсы, якія потым запрашвае браузер, у тым часе:

• HTML-дакументы
• CSS-шаблоны стылю
• файлы JavaScript
• Адпраўкі
• іншыя даны, такія як шрыфты або JSON з API

Рэстарант прыемлівае гэтыя адносы для лёгкага запамятавання:

• Браузер — гаспадар.
• Запит — замовленне.
• Сервер — кухня.
• Адпаведзенне — страва.

Вы ставіце замовленне, кухня яго прачытае, готавіць страву і адправляе яе. Інтернет працюе па той жа прынцып: браузер запитвае, сервер выканаём задачу, і рэзультат вяртаецца. Кожны адказ таксама містіць код статусу, напрыклад 200 для успеху або 404, калі сторанка не існуе, што паведамляе браузеру, як аднацца з тым, што ён прыняў.

Этап 4: Ператворэнне файлаў у сторанку

Няверагоднасць файлаў — гэта не тое ж сама, што показ адпаведнай сторанкі. Браузер усё рава должен іх адначытаць і з’еднаныць у тое, што вы бачыце, і кожны з трох основных языкаў вебу мае свой унікальны ролю.

HTML забезпечвае структуру

HTML апісвае, што знаходзится на старонцы і як яна арганізавана: загаловкі, параграфы, кнапкі, адпрыемкі, звязанні і т. д. Бн являе сабо скелет. Браузер перакладае яго у DOM (Document Object Model) — дрэво элементаў, на якім базуецца весь працэс.

CSS кантролюе выгляд

CSS адлучае, як выглядае гэтая структура: кольоры, шрыфты, адступы, макет і размеры. Якщо HTML — скелет, то CSS — гэта все, што надае яму візуальнага формата. Браузер перакладае шаблоны стылю ў свой сопны структур і пасвячае кожнае правілу элементам, да якіх яно прызначана.

JavaScript дадае можлівасці для адносу

JavaScript робіць старонку інтэрактыўной: яна реагуе на нажатыя кнапкі, запускае анімацыі, завантажае і апдэйтуе контент без повнага перзавантажэння, і ўсё інша. Скрыпты можу чытаць і змяніць DOM і стылі, таму старонка можа змяніцца пасля свайго першага аплыву.

Абсалютна сума

Калі структура і стылі з’едынены, браузер вычыляе, дзе павінен знаходзіцца кожны элемент (распаковка), а пасля атрымлівае рэзультат (відрасовка). Па значэнню стандарту, простая таг <script> зупіняе парсаванне HTML пакуль скрыпта не будзе завантажаны і запусцаны, і гэта адна з прычын, чаму рэкамендаціі па выдакоўнасці часта прыменяюць атрыбуты defer чыста async.

Усі этапы па порядку

Этапы ў спілце:

1. Вы вводзіце адрес веб-сайта.
2. DNS перакладае назву ў IP-адрэс.
3. Браузер паў’язываецца з серверам і надсылае запит.
4. Сервер атрымлівае і обрабоцвае запит.
5. Сервер надсылае адпаведзь.
6. Браузер атрымлівае HTML і запрашвае CSS, JavaScript, з’явы і іншыя даны, на якія ён сацярогаецца.
7. Браузер парсавае і з’едынае гэтыя ресурсы.

Завершаная стороніца паказываецца на вашам экране.

Пры шырокаспектной наявнасці канекшні большая частка гэтага выконваецца за калеку секунды, таму здаецца, што проста нажатчыка клавішы Enter прыводзіць да паказу стораніцы.

Чаму гэтыя прынцыпы вартыя ўважання

Знанне гэтай последовасці спаўнае разам панявы, якія зазвычай выкладваюцца окаласці: прыгледачы, DNS, серверы, HTML, CSS і JavaScript. Гэта таксама дае вам месца для зберагчыць новыя знанні. Калі пазней вы дзецерапіяваце пра API, вы будете адразу ведаць, што гэта проста ўзаемныя адказы на запиты. Калі вучыцеся пра роботу бэкенду, вы зразумеце, што гэта відбываецца на сервернай стороне трэцьяго этапу. Калі дзецерапіяваце пра канэкшн фронтенду, вы зразумеце, што гэта пераважна стосуецца прышвартовання трэцьяго і чатвертага этапаў.

Это таксама дапомагае ў выкліканні прычын бягучых проблем. Кэс «стораніцы не знайдзена» указвае на першы этап, працягванне часу або кэшовая памятка — на другі этап, статус 500 — на сервер у трэцім этапе, а стораніца, якая завантажваецца, але выглядае несправна, — на проблемы з CSS або JavaScript у чацвертым этапе.

Галоўныя выводы

• DNS ператварае зрозумелыя для людзей назвы на IP-адрэсы, выкарыстоўваючы кэшаванне на розных роўнях.
• Браузер стварае з’єднанне, захаванае за дапамогою TLS для HTTPS, і надсылае HTTP-запит.
• Сервер адпавядае HTML, які збоку сабе паўтарае апылы да CSS, JavaScript, зображэнняў і іншых ресурсаў.
• HTML становіцься DOM для структуры, CSS задае ўзоры, а JavaScript дадае функціонал прычым браузер не выкладвае і не адрасавае стораніцу.
• Кожны этап выклікае проблемы сваім унікальным спосабам, што робіць гэтыя моделі практычнымі інструментамі для выклікання прычын бягучых проблем і адночасна дапамагаюць у навучэнні.