Усі, хто читає цю статтю, роблять це за допомогою відвідування веб-сайту або ж через застосунок, що за фактом є також відвідуванням інтернет-ресурсу. У цій статті ми розповімо вам простими словами про те, як працює веб-сайт. Ця інформація буде корисна багатьом – від молодих людей, які тільки хочуть стати розробниками, до літніх, яким цікава ця тематика.
Будь-який веб-сайт складається з серверної та клієнтської частини. Серверна частина розміщена на віддаленому сервері в мережі Інтернет, а сам сервер може бути в будь-якій точці земної кулі і навіть за її межами, наприклад, на штучному супутнику Землі. Сервер віддає браузеру користувача код, а сам браузер цей код перетворює вже на клієнтську частину. У те, що ми бачимо і з чим взаємодіємо під час роботи з інтернет-ресурсом.
Що відбувається під час відвідування веб-сайту?
Припустимо, ви ввели адресу сайту в адресний рядок браузера, перейшли з пошукової системи або через закладки. Далі за роботу відповідає браузер. Спершу він звіряється з локальним кешем DNS-серверів, щоб знайти відповідність. Якщо відповідності немає, то браузер звертається до віддаленого DNS-сервера, щоб отримати IP-адресу сервера, на якому вже розташований сайт. Після того як браузер дізнався IP-адресу, то він уже звертається безпосередньо до віддаленого сервера за допомогою TCP/IP протоколу.
Відбувається так зване тристороннє «рукостискання» браузера із сервером. Оглядач надсилає SYN (синхронізаційний) пакет на сервер, а сервер надсилає SYN-ACK (пакет, що підтверджує синхронізацію) пакет, підтверджуючи відповідь. Далі браузер надсилає ACK (фінальна відповідь браузера) пакет, і таким чином увесь конект підтверджується.
Далі все спілкування віддаленого сервера з сайтом і браузера відбувається за допомогою протоколу HTTP. Але спершу браузеру потрібно з’ясувати, чи використовує сайт звичайне з’єднання (http) або ж є сертифікат шифрування (https, той самий замочок у браузері). Сервер надсилає свій сертифікат безпеки, а браузер перевіряє сертифікат і генерує симетричний ключ шифрування, а потім надсилає його на сервер зашифрованим.
Після всього цього оглядач формує HTTP-запит, який містить у собі безліч різних параметрів. Наприклад, метод передачі даних (GET, POST), повний URL запитуваного сайту, різні заголовки запиту і багато іншого. Цей запит надсилається на сервер, а останній має підготувати відповідь.
Сервер готує відповідь (про це в подробицях нижче) і надсилає браузеру HTTP-запит, який містить цілу низку різних параметрів. Наприклад, статус-код (404, 200, 202 тощо), заголовки і саме тіло відповіді, що містить увесь потрібний код для формування веб-сайту на клієнтській стороні.
Що відбувається на сервері?
Сервер – віддалений комп’ютер, на якому розташовані файли веб-сайту. Будь-який код сайту можна назвати програмою або набором скриптів – весь код написаний за допомогою якоїсь мови програмування. Наприклад, PHP, Python, Ruby, Java, C, Node JS та інші.
Сайт може бути написаний як чистою мовою програмування, так і використовувати фреймворки (конструктор для програміста), які також написані однією з вищевказаних мов. Є також готові «рушії» (CMS) для сайтів, наприклад WordPress, Joomla, Drupal і багато-багато інших. CMS для веб-сайту бувають як платними, так і безоплатними, тоді як фреймворки для програмістів здебільшого безоплатні.
Сервер, отримавши запит, звертається до коду сайту, і вже віддача самого контенту залежить від коду. Сайт може використовувати різні бази даних і складний код для формування конкретної відповіді. Код відповіді формує CMS сайту, і сервер відправляє відповідь у браузер. Успішна відповідь, як правило, складається з HTML-коду, з якого браузер формує сайт. Також сервер віддає зображення, різні файли скриптів, каскадних таблиць стилів і той контент, який запитує браузер, виходячи зі структури сайту, для кінцевого відтворення.
Що відбувається в браузері?
Для того щоб сформувати веб-сайт, браузеру потрібно кілька складових частин. Це HTML-код – розмітка сайту, за ним браузер розуміє, як формувати сторінку і які додаткові дані запросити у сервера. Каскадні таблиці стилів (CSS) – спеціальна мова оформлення веб-сторінки, код JavaScript – найголовніша мова програмування браузера, яка відповідає за динамічну складову сайту.
Приблизний хід відображення веб-сторінки такий:
- Браузер парсить HTML-код і запитує у сервера те, що потрібно ще довантажити (CSS, JavaScript, зображення, медіафайли та інше);
- Застосування таблиці стилів для отримання оформлення;
- Виконання JavaScript-коду (також йде перевірка на його коректність);
- Створення моделі DOM (Document Object Model) – об’єктна модель для кінцевого виведення користувачеві;
- Саме відображення кінцевого результату.
Наприклад, красива кнопка не може бути створена без допомоги CSS, а процес її натискання, анімація та отримання результату без перезавантаження сторінки не може проходити без участі JavaScript. Взагалі, сучасний сайт може бути дуже складним і навороченим і для кінцевого відтворення вимагати значних ресурсів браузера. Часом багато хто думає, що у них повільно працює доступ до інтернету, але це не завжди так – іноді браузеру просто важко «збирати» сайт зі складових частин.
Якщо раніше сайт візуалізувався тільки з HTML-коду, стилів CSS і JavaScript, то зараз браузер надсилає й отримує сотні Xhr (XMLHttpRequest) запитів, щоб зібрати веб-сторінку цілком, а деякі частини сайту можуть довантажуватися вже після того, як користувач побачив сайт.
Кожен перехід за посиланням на сайті призводить знову до повторення всього процесу – обмін даних із сервером, отримання відповіді та її обробка.
Який висновок?
Технології веб-сайтів розвиваються семимильними кроками – цей процес буде тільки поліпшуватися. З’являються нові мови програмування, фреймворки, CMS. Постійно поліпшується і клієнтська частина – за допомогою веб-сайту можна відобразити в браузері все що завгодно. Наприклад, технологія HTML 5 з легкістю замінила складний і громіздкий флеш – браузер може відмальовувати все що завгодно.
Також варто розуміти, що сайт – це не тільки те, що показує браузер. Наприклад, безліч застосунків для смартфонів за фактом є спеціальним браузером і формують у себе звичайну веб-сторінку. Переважна більшість спілкування браузера і сервера відбувається за HTTP-запитами, а вищевказані технології (HTML, CSS, JavaScript) використовуються зараз буквально скрізь.
Наприклад, зараз уже видно тенденцію відмови від класичних додатків для комп’ютера на користь браузерних. Мине час, і з розвитком дуже швидкісного інтернету класичні програми можуть зовсім втратити популярність – вже зараз є повноцінні графічні та відеоредактори в браузері і безліч інших програм. Ну чого вже лукавити – давно існують ноутбуки Chromebook, які заточені в основному тільки для роботи в інтернеті.
Віддалені сервери будуть здійснювати ресурсомісткі операції і віддавати в браузер кінцевий результат. Не потрібно мати потужний комп’ютер – усі обчислення відбуватимуться в хмарі. Це буде тоді, коли доступ у мережу у більшості людей планети буде зі швидкістю вище 1 Гбіт/сек, і це не фантастика, а майбутня реальність.
