Як браузер ходить інтернетом.

Чи знаєте ви, як до вашого браузера потрапляють фотки смаженої русні, коли ви заходите, наприклад, на (уявний) сайт rusnipyz.da? А цікаво? Тоді давайте розглянемо увесь процес під мікроскопом.

Почнемо з браузера. Так от, ваш браузер це не “інтернет”, як казав ваш викладача з інформатики 20 років тому, а, власне, оглядач, вікно до чудового світу вільного доступу до інформації та тупих людей. Браузер — це така спеціяльна програма, задача якої отримати звідкись html-файл, або ж html-документ, як секретно називаємо його ми, комп’ютерники, прочитати його, виконати усі інструкції, пережувати, перем’яти в чорній скриньці і видати вам картинку, яку ви бачите, коли “заходите на сайт”. І так, це реально одна здоровенна картинка. Як саме відбувається ця чорна магія, я розповім дещо іншим разом.

Тепер важливо зазначити, що інтернет як такий не послуговується читабельними іменами, коли мова іде про доступ до якогось ресурсу, користується так званими IP-адресами. IP-адреса розшифровується як адреса Internet Protocol і являє собою групу з чотирьох чисел від 0 до 255, коли мова іде про IPv4, або ж групу з восьми чисел, записаних в шістнадцятковій системі, коли мова йде про IPv6. Саме такі адреси і використовуються всередині мережі для пошуку ресурсів.

IPv4
192.0.0.1

IPv6
2001:0db8:85a3:0000:0000:8a2e:0370:7334

Не найзручніша форма запису для людини, еге ж? Саме тому, аби полегшити вам життя, коли ви шукаєте чергове відео Арестовича, були придумані так звані доменні імена — читабельні адреси, які людина може запам’ятати і навіть надрукувати по пам’яти. І от саме такі адреси ми і вводимо в рядочку введення адреси в браузері. Ще важливе зауваження — в цій статті я пояснюю спрощений процес, бо в сучасному вебі усе відбувається дещо складніше, бо ще є така штука як сек’юрність, тобто безпека з’єднання, але тема для окремої історії.

Довгий шлях до бібліотеки

Отже, ви друкуєте в рядочку адреси завітні буковки rusnipyz.da та натискаєте Enter. Що далі? Далі браузер починає гру “не підкажете, як пройти в бібліотеку?” і домахується до всіх, кого може знайти на своєму шляху.

Починає він із себе. Кожен браузер зберігає на нетривалий час так званий кеш таблички DNS, в якій записані усі нещодавно відвідані вами сайти. Тож, якщо ви останнім часом уже дивилися в конкретному браузері на смажену русню, то він уже знатиме найкоротший шлях до цього сайту. А DNS — це Domain Name System, така собі телефонна книжка для інтернету, де записані усі доменні імена та відповідні їм IP.

Якщо ж він не має такого запису, то пошук відбудеться в кеші на рівні вашої операційної системи, вашого Windows, MacOS, Android чи ще там що стоїть на вашому пристрої. Звідки ж цей запис може з’явитися там, на думку браузера? Дуже просто, він сподівається, що ви вже ходили на цей сайт, але з іншого браузера на цьому ж пристрої.

Коли ж він не знайде цієї інформації і там, ваш браузер не впадатиме у відчай, а чекатиме, поки ваш комп’ютер піде з цим питанням уже до вашого роутера, тобто пристрою, що роздає інтернет на всі ваші пристрої. Цього разу розрахунок іде на те, що ви усе таки відвідували сайт, але з іншого пристрою в цій же мережі. Маленький сміливий браузер ніколи не здається!

І він не втратить надії, навіть якщо не знайдеться потрібної інформації і у роутера, бо тоді останній звернеться до вашого інтернет-провайдера, і попросить його пошукати у себе, в його DNS-таблицях, які уже незрівнянно більші за все, де пошук відбувався до того, адже в таких таблицях зберігаються відвідані сайти від тисяч користувачів.

Ну, а якщо невдача спіткає і тут, то сумний, але незламний браузер чекатиме, поки відбудеться пошук уже на великих DNS-серверах, поки таку адресу не знайдуть. Або не знайдуть. Якщо не знайдуть, то браузер покаже вам сумну сторінку, на якій писатиме шось по комп’ютерному на кшталт DNS_PROBE_FINISHED_NXDOMAIN. Щойно такий запис буде знайдено, кеш DNS оновиться на усіх рівнях, аби наш маленький, але такий в’їдливий браузер не турбував їх зайвий раз.

Отже, браузер отримав справжню IP-адресу сайту, і тепер він повинен зв’язатися із сервером, аби попросити його, нарешті, віддати йому те, що там лежить, бо вже несила ждати ті фотки смаженої русні, ну. Як він це робить? Якщо коротко, між ними відбувається приблизно такий діалог:

— Превіт!, — каже браузер.

— Шо там? — зайнято бурчить сервер.

— Діло є.

Якщо перекласти це на комп’терну, то відбувається наступне:

  1. Спочатку браузер відправляє серверу так званий SYN, Synchronize Sequence Number, той самий умовний “Превіт”, яким повідомляє, шо був би не проти почати спілкуватись.
  2. Далі сервер, якщо він справний, не зайнятий і має час та натхення, відправляє у відповдь нашому браузеру пакет з АТБ даних, в якому лежить той самий SYN, збільшений на одиничку, та ще так званий ACK (від acknowledge), теж SYN, але від сервера.
  3. Браузер дає серверу зрозуміти, що “я тебе почув” та надсилає йому у відповідь ACK, теж збільшений на одиничку.

Таким чином браузер та сервер ручкаються, і всі розуміють, що можна переходити до наступних дій.

А наступним кроком браузер уже питає сервера по ділу і відправляє йому так званий HTTP-запит, в якому детально описує, що він від того сервера хоче. Виглядати він може приблизно так:

GET / HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.rusnipyz.da
Accept-Encoding: gzip, deflate
Connection: Keep-Alive

Сильно розбирати я не буду, адже в цьому запиті може бути прямо купа різної інформації, яку туди додає сам браузер, ну і ще криворукі веб-розробники, да. Якщо коротко, то уявіть, що це браузер оформлює запит на отримання чогось, ну, наприклад, довідки про несудимість до того, як її можна стало отримати через “Дію”. Тобто має зібрати всю необхідну інформацію, а то можуть і не видати, а тоді вже сервер то все розбирає і вирішує, шо з тим усім робити.

Отже, сервер отримує цей запит і починає в ньому розбиратись. У кожного сервера є свої правила обробки запитів, і він уже там, під капотом, розбирається, чи віддавати вам взагалі шось, а якщо да, то шо саме, і тому подібне. І ось коли він розбирається в тому усьому, сервер надсилає вам офіційну відповідь, в якій також міститься купа різної інформації, такої як статус запиту, тип файлу, його вміст і т.д.

Статус відповіді завжди іде першим рядочком, і містить числовий код, який пояснює браузеру, наскільки успішно все відбулось. Цей код може належати до п’яти категорій:

  1. Інформаційний код, 1хх. Я отримав запит, працюю над ним, не трогай мене, скоро всьо буде.
  2. Успішно, 2хх. У мене всьо получилось, забирай.
  3. Перенаправлення, 3хх. Мужчина, ви шо не бачите, шо ми чай п’єм? Зайдіть в 304-й кабінет, от у них і питайте.
  4. Помилка клієнта, 4хх. Ти якуто херню запитав, нема нічого.
  5. Помилка сервера, 5хх Кіт перевернув вазона і у нас не получаєця.

І уже в залежности від відповіді сервера наш браузер шось показує. Або не показує.

Дерева, дерева, кубікі всякі

А далі відбувається та сама чорна магія, про яку, звичайно, варто буде поговорити в окремій статті, але дуже коротенько зачеплю і тут.

Отже, основа web — це, звичайно ж, html-документи, в яких і описується структура цього документу, як, в якому порядку іде інформація, підказує браузеру наскільки важлива та чи інша частина, що можна з нею зробити і т.д.

HTML розшифровується як HyperText Markup Language, або ж гіпертекстова мова розмітки. Чому гіпертекстова, чому мова, яка ще розмітка? Це все я детальніше планую описати окремо, а наразі досить зазначити, що це спеціальна мова для розмітки документів, яка полегшує структуризацію даних. Отако. Тож, html-документ — це основа основ, і містить саму інформацію та її структуру. Це інформаційний рівень.

Ще є CSS, Cascade Style Sheets, каскадні таблиці стилів, які пояснюють браузеру, наскільки красиво має виглядати документ. За допомогою CSS ми можемо змінювати зовнішній вигляд сторінки — кольори, шрифти, розміри, анімації, оце все. Це — презентаційний рівень.

І є JavaScript, скриптова мова програмування, за допомогою якої можна додавати на сторінку падаючі сніжинки, додавати взаємодію до сторінки, всіляки інтерактивности, також можна створювати штучний інтелект та просто захаращувати оперативну пам’ять вашого пристрою. Це — інтерактивний рівень.

Сучасна веб-сторінка обов’язково матиме в собі усі ці елементи, але інтернет починався з чистого HTML, і по сей день його одного достатньо, аби браузер був в змозі відобразити вашу інформацію на екрані.

Спробую максимально просто пояснити процес відображення фінальної картинки. В загальному, щоб мати можливість відобразити вашу сторінку, браузеру потрібно спочатку зрозуміти, що в тому документі взагалі є і яку ж таку структуру ви тим html-ом там описали. Тому він перетворює ваш html-код на певну структуру даних, яку ще називають деревом. З такого дерева він потім складе, ніби з цеглинок, те, як елементи на сторінці повинні розміщуватись, хто за ким стоїть, хто в кому лежить.

Коли під час побудови цього дерева браузер натикається на посилання на інші ресурси, як то файли CSS, JS, чи медіа, він зазвичай відкладає усі справи в сторону, тобто ставить оце дерево на паузу, вантажить такий ресурс і починає обробляти його.

Якщо це CSS-файл, то браузер будує інше дерево, в якому теж відбито залежність, каскадність стилів (поки не звертайте не ці терміни уваги, то реально окрема стаття), і, що важливо, щоразу, як вантажиться новий CSS-файл, бідося браузер мусить перебудовувати то довбане дерево наново, бо воно має враховувати всі-всі стилі.

У випадку з JavaScript браузер виконує увесь код, написаний в ньому, відразу після завантаження, бо це скриптова мова, її не треба компілювати в якийсь двійковий таємничий код перед тим, цим займається сам браузер.

І от коли ось ця вся катавасія нарешті завершується, браузер збирає докупи всі дерева, щоб почати будувати картинку, що буде відображено у вікні переглядача. Це теж доволі складний процес, бо одне дерево задає порядок і початкове розташування усіх блоків інформації, а інше дерево, те, що робиться з CSS, може вносити корективи в розташування елементів на екрані, тому це дуже громіздко і складно, та в результаті у нього усе вдається, він складає все в прямокутнички, розфарбовує і нарешті на екрані з’являється відображення сторінки. Ура!

Ось такі от складні процеси відбувають буквально за лічені миті просто для того, аби ми з вами могли помилуватися черговим спаленим танком русні.