👨‍💻#WebPerf - як браузер вантажить ресурс (3)👨‍💻

Для того, щоб завантажити будь-який ресурс (HTML, CSS, JS, тощо) потрібно зробити наступні кроки

➡️ Знайти сервер

Коли ви пишете в браузерному рядку https://drag13.io , браузер ніц не знає що це за адреса і куди звертатися. Для того щоб це дізнатися, він робить запит до сервісу доменних імен для отримання IP адреси вашого серверу (я тебе по айпі знайду!!!)

➡️ Встановити з ним зв'язок

Після того як браузер дізнався адресу серверу, з ним треба вийти на зв'язок (можливо сервера там давно й немає немає) і, якщо у нас з'єднання захищене (https), то ще й помінятися сертифікатами

➡️ Запитати в нього ресурс і почати отримувати відповідь

Якщо сервер живий і відповідає, браузер надсилає йому запит за конкретним ресурсом (наприклад index.html) і очікує на передачу даних. Сервер, в свою чергу, шукає в себе ресурс і віддає його (або не віддає) і ще робить купу інших речей (наприклад логує)

➡️ Обробити ресурс

Дані, які ми отримуємо з сервера є "сирими" і часто стиснутими. Тому браузеру потрібно їх розпакувати та перетворити на щось корисне. Так HTML перетворюється на спеціальну структуру в пам'яті - DOM, CSS на СSSOM, JS - перетворюється з літер на код який зрозумілий браузеру. Важливо, що "ціна" обробки а також можливість оброблення під час завантаження залежить від виду ресурсу.


➡️ "Виконати" ресурс

І тільки тепер ми можемо "виконати" ресурс - відмалювати HTML, накласти стилі, виконати JS.

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

@reactbeginners