Як працюють сайти? Основи основ

Прочитаєте за: 2 хв. Слідкуйте за «Новини Полтавщини» в Google

Невеличка шпаргалка для тих, хто лише розпочинає вивчати веб-технології.

Більшість наявних сайтів в інтернеті побудована як серверні застосунки.

Ось що відбувається за ту секунду, поки ви очікуєте завантаження — від тієї миті, коли ви ввели адресу сайту (наприклад, example.com/example/) у рядок пошуку, і до того, як сторінка завантажується повністю:

  1. Браузер (наприклад, Chrome або Safari) надсилає запит на DNS-сервер: йому потрібно дізнатися, як «достукатися» до сервера, на якому є файли набраного користувачем сайту.

  2. DNS-сервер повідомляє браузерові, що IP-адреса сервера сайта example.com — 93.184.216.34.

  3. За допомогою спеціального протоколу та вже відомої IP-адреси браузер з’єднується із сервером і надсилає запит на отримання необхідних йому даних.

  4. Запит опрацьовується сервером (Nginx або IIS). Якщо браузерові потрібно віддати виключно статичні файли, сервер самостійно віддає браузерові необхідний йому контент. Якщо прийшов запит на динамічний вміст (наприклад, перелік товарів для певної категорії інтернет-магазину), Nginx або Apache передають обробку запиту «сторонньому» оброблювачу (наприклад, PHP або.NET).

  5. Після отримання даних про основну розмітку сторінки браузер запускає рендеринг: перетворює отримані дані в той вигляд, у якому їх побачать користувачі у вікні браузера. У процесі рендерингу браузер запитує із сервера додаткові файли, які потрібно буде відобразити на сторінці (наприклад, зображення, посилання на які знаходяться в розмітці) і які відповідають за остаточний вигляд і функціональність сторінки (скрипти і стилі).

  6. Сервер знову обробляє запит і знову віддає потрібні дані. Процес повторюється доти, поки сторінка не буде повністю відрендерена.

Під бекендом мається на увазі робота з даними на боці сервера.

За допомогою фронтенд-технологій відбувається робота з даними на боці користувача:

  • HTML (Hyper Text Markup Language – мова розмітки) відповідає за структуру сторінки і її основне наповнення.

  • CSS (Cascading Style Sheets) — за її оформлення (наприклад, ми хочемо вставити зображення не з прямими кутами, а із заокругленими).

  • JS (мова програмування JavaScript) — за динамічну взаємодію користувача зі сторінкою. Лайк цьому текстові ви поставите саме завдяки JavaScript.

Якщо все це вам добре знайоме, відгукуйтеся на вакансії web-розробників.

Зичимо успіхів у розвитку кар’єри!

матеріал підготував/ла: Дмитро Кравченко

Читайте нас у Telegram

Приєднатися
Поділитись новиною:

Схожі новини: