Бид өдөр бүр Chrome, Edge, Firefox, Safari зэрэг browser ашиглан google.com, youtube.com, facebook.com гэх мэт хаяг бичиж вэбсайт руу ордог. Хэрэглэгчийн хувьд энэ үйлдэл маш энгийн: URL бичээд Enter дарахад л хэдхэн секундын дараа сайт нээгдэнэ.

Гэхдээ тэр хэдхэн секундын дотор компьютер, browser, DNS сервер, интернет сүлжээ, веб сервер болон олон төрлийн протокол хоорондоо ажиллаж, хэд хэдэн үе шат дамждаг.

Тэгвэл URL бичээд Enter дарахаас эхлээд веб хуудас дэлгэц дээр бүрэн харагдах хүртэл яг юу болдгийг дарааллаар нь тайлбарлая.

1. URL-ийг browser задлан шинжилнэ.

Жишээ нь бид дараах URL-ийг browser дээр бичлээ гэж бодъё.

https://example.com/products?id=10

Browser эхлээд URL-ийг хэд хэдэн хэсэг болгон салгана.

• https — protocol буюу ямар дүрмээр сервертэй холбогдохыг заана.

• example.com — domain name буюу серверийн нэр.

• /products — сервер дээрээс ямар resource хүсэж байгааг заана.

• ?id=10 — query parameter буюу сервер рүү дамжуулах нэмэлт мэдээлэл.

Энэ үед browser хамгийн түрүүнд “example.com гэдэг сервер хаана байгаа вэ?” гэсэн асуултыг шийдэх хэрэгтэй болдог.

2. Browser cache-ээ шалгана

Интернетээр шууд хүсэлт явуулахаасаа өмнө browser өмнө нь хадгалсан мэдээллээ шалгана.

Browser дараах зүйлсийг cache-д хадгалж чадна.

• DNS мэдээлэл

• HTML

• CSS

• JavaScript

• зураг

• font

• бусад static resource

Жишээлбэл та тухайн сайтад саяхан орсон бол зарим зураг, CSS, JavaScript файлыг дахин интернетээс татах шаардлагагүй байж болно.

Ингэснээр сайт илүү хурдан ачаалагддаг.

3. DNS domain нэрийг IP address болгон хувиргана

Компьютерууд google.com гэх мэт нэрээр хоорондоо холбогддоггүй. Интернет дээр төхөөрөмжүүд ихэвчлэн IP address ашиглан хоорондоо харилцдаг.

Жишээ нь:

example.com

гэсэн domain нэрийг DNS систем:

93.184.216.34

гэх мэт IP address болгон хөрвүүлж болно.

DNS гэдэг нь Domain Name System гэсэн үг.

Үүнийг интернетийн утасны лавлахтай адилтгаж болно.

Хүн:

youtube.com

гэж санахад хялбар.

Харин компьютер:

142.x.x.x

хэлбэрийн IP address ашиглан серверээ олдог.

DNS lookup хийхдээ компьютер дараах дарааллаар шалгаж болно.

1. Browser DNS cache

2. Operating system DNS cache

3. Router cache

4. ISP эсвэл тохируулсан DNS resolver

5. Root DNS server

6. TLD server

7. Authoritative DNS server

Эцэст нь тухайн domain-ийн IP address олдоно.

4. Browser сервертэй network connection үүсгэнэ

IP address олдсоны дараа browser тухайн сервертэй холбогдоно.

Уламжлалт HTTP/1.1 болон HTTP/2 орчинд энэ нь ихэвчлэн TCP connection байдаг.

TCP буюу Transmission Control Protocol нь өгөгдлийг найдвартай дамжуулах үүрэгтэй.

TCP connection үүсэхдээ алдартай three-way handshake явагдана.

Client:

SYN

Сервер:

SYN-ACK

Client:

ACK

Үүний дараа хоёр тал хоорондоо өгөгдөл дамжуулах боломжтой болно.

Орчин үеийн HTTP/3 нь TCP биш, QUIC протокол ашиглаж болох бөгөөд энэ нь холболтын зарим үе шатыг хурдан болгодог.

5. HTTPS ашиглаж байгаа бол TLS handshake хийгдэнэ

Өнөөдрийн ихэнх сайт HTTPS ашигладаг.

HTTP болон HTTPS-ийн хамгийн том ялгаа нь HTTPS холболт encryption ашигладаг явдал юм.

Жишээ нь:

https://example.com

гэсэн үед browser сервертэй TLS буюу Transport Layer Security handshake хийнэ.

Энэ үед browser:

• серверийн SSL/TLS certificate-ийг шалгана;

• certificate хүчинтэй эсэхийг шалгана;

• domain нэртэй тохирч байгаа эсэхийг шалгана;

• итгэмжлэгдсэн Certificate Authority гаргасан эсэхийг шалгана;

• encryption key тохиролцоно.

Үүний дараа browser болон серверийн хооронд дамжих мэдээлэл шифрлэгдэнэ.

Иймээс нууц үг, cookie, төлбөрийн мэдээлэл зэрэг өгөгдлийг замаас нь шууд уншихад маш хэцүү болдог.

6. Browser HTTP request илгээнэ

Холболт амжилттай үүссэний дараа browser сервер рүү HTTP request явуулна.

Жишээ нь:

GET / HTTP/1.1
Host: example.com
User-Agent: Chrome
Accept: text/html

Энд:

GET нь серверээс мэдээлэл авах хүсэлт.

/ нь homepage авахыг заана.

Host нь ямар domain руу хүсэлт илгээж байгааг заана.

User-Agent нь browser болон төхөөрөмжийн талаарх мэдээлэл агуулж болно.

Request-д мөн дараах зүйлс орж болно.

• Cookies

• Authorization token

• Accept-Language

• Cache information

• Referer

• Content-Type

Жишээлбэл хэрэглэгч өмнө нь login хийсэн бол session cookie хүсэлттэй хамт сервер рүү явж болно.

7. Request серверийн дэд бүтцээр дамжина

Browser-ийн хүсэлт заавал шууд нэг сервер дээр очно гэсэн үг биш.

Том хэмжээний веб системд хүсэлт дараах зүйлсээр дамжиж болно.

Browser → CDN → Load Balancer → Web Server → Application Server

CDN

CDN буюу Content Delivery Network нь хэрэглэгчтэй ойр серверээс static файлыг хүргэхэд ашиглагдана.

Жишээлбэл Монгол дахь хэрэглэгч Америкт байгаа үндсэн серверээс зураг татахын оронд Азид байрлах CDN серверээс татаж болно.

Load Balancer

Нэг сайт олон сервертэй байвал Load Balancer incoming request-үүдийг серверүүдэд хуваарилна.

Ингэснээр нэг сервер хэт ачаалал авахгүй.

8. Backend application request-ийг боловсруулна

Хүсэлт серверийн application хэсэгт хүрэхэд backend код ажиллана.

Backend нь Node.js, Java, Python, PHP, Go, C# гэх мэт олон технологиор бичигдсэн байж болно.

Жишээлбэл хэрэглэгч:

https://shop.com/products/15

гэсэн хаяг руу орлоо гэж бодъё.

Backend дараах ажиллагааг хийж болно.

1. URL-ээс product ID авна.

2. Хэрэглэгч login хийсэн эсэхийг шалгана.

3. Database руу query явуулна.

4. Product-ийн мэдээллийг авна.

5. Business logic ажиллуулна.

6. Response бэлтгэнэ.

   

9. Database-аас мэдээлэл авч болно

Dynamic вебсайтууд ихэвчлэн database ашигладаг.

Жишээлбэл бүтээгдэхүүний сайт:

SELECT *
FROM products
WHERE id = 15;

гэх query ажиллуулж болно.

Database-аас:

• бүтээгдэхүүний нэр;

• үнэ;

• үлдэгдэл;

• зураг;

• тайлбар

зэрэг мэдээллийг авч backend рүү буцаана.

Backend үүнийг ашиглан browser руу илгээх response-оо бэлтгэнэ.

10. Сервер HTTP response буцаана

Server боловсруулалт хийсний дараа browser руу HTTP response илгээнэ.

Жишээ:

HTTP/1.1 200 OK
Content-Type: text/html

Response-ийн body хэсэгт HTML байж болно.

Жишээлбэл:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

HTTP response нь мөн status code агуулна.

Түгээмэл status code-ууд:

• 200 OK — хүсэлт амжилттай.

• 301 Moved Permanently — resource өөр URL руу шилжсэн.

• 302 Found — түр redirect.

• 400 Bad Request — request буруу.

• 401 Unauthorized — authentication шаардлагатай.

• 403 Forbidden — access зөвшөөрөгдөөгүй.

• 404 Not Found — resource олдсонгүй.

• 500 Internal Server Error — сервер дээр алдаа гарсан.

11. Browser HTML-ийг parse хийж DOM үүсгэнэ

HTML browser дээр ирсэн даруйдаа шууд зураг шиг харагддаггүй.

Browser HTML кодыг уншиж DOM буюу Document Object Model үүсгэнэ.

Жишээлбэл:

<body>
    <h1>Hello</h1>
    <p>Welcome</p>
</body>

гэсэн HTML нь дотооддоо мод хэлбэрийн бүтэц болно.

Document
└── html
    └── body
        ├── h1
        └── p

JavaScript нь дараа нь DOM элементүүдийг өөрчилж чадна.

12. CSS татаж CSSOM үүсгэнэ

HTML дотор дараах код байж болно.

<link rel="stylesheet" href="style.css">

Browser style.css файлыг серверээс татаж авна.

CSS кодыг parse хийсний дараа CSSOM буюу CSS Object Model үүсгэнэ.

CSSOM нь элемент бүр ямар:

• өнгөтэй;

• хэмжээтэй;

• font-той;

• margin;

• padding;

• байрлалтай

байхыг тодорхойлно.

13. JavaScript татагдаж ажиллана

HTML дотор:

<script src="app.js"></script>

байвал browser JavaScript файлыг татаж ажиллуулна.

JavaScript нь веб хуудсыг interactive болгоход хэрэглэгддэг.

Жишээлбэл:

• button дарахад menu нээх;

• API-аас мэдээлэл авах;

• form validation хийх;

• popup харуулах;

• animation ажиллуулах;

• DOM өөрчлөх

зэрэг ажлыг JavaScript хийдэг.

React, Vue, Angular, Next.js зэрэг frontend framework-үүд ч эцэстээ browser дээр JavaScript хэлбэрээр ажилладаг.

14. Render Tree үүснэ

Browser DOM болон CSSOM-ийг нэгтгэж Render Tree үүсгэнэ.

DOM:

“Ямар элемент байна?”

гэсэн мэдээллийг агуулна.

CSSOM:

“Тэр элемент ямар харагдах вэ?”

гэсэн мэдээллийг агуулна.

Render Tree:

“Яг дэлгэц дээр ямар элемент ямар style-тай харагдах вэ?”

гэдгийг тодорхойлно.

15. Layout буюу байрлалыг тооцоолно

Дараа нь browser элемент бүр дэлгэцийн хаана байрлахыг тооцоолно.

Жишээлбэл:

• width = 500px

• height = 100px

• x = 50px

• y = 200px

гэсэн координат, хэмжээнүүдийг тооцно.

Энэ процессыг layout буюу заримдаа reflow гэж нэрлэдэг.

Responsive дизайнтай сайт бол дэлгэцийн хэмжээнээс хамаарч layout өөрчлөгдөнө.

Жишээлбэл desktop дээр гурван багана байсан зүйл mobile дээр нэг багана болж болно.

16. Paint хийгдэнэ

Layout тооцоологдсоны дараа browser элементүүдийг зурж эхэлнэ.

Үүнд:

• текст;

• өнгө;

• border;

• shadow;

• image;

• background

зэрэг багтана.

Энэ процессыг paint гэж нэрлэнэ.

17. Compositing хийгээд дэлгэц дээр харуулна

Орчин үеийн browser зарим элементүүдийг тусдаа layer болгон зурдаг.

Жишээлбэл:

• fixed header;

• animation;

• video;

• transform ашигласан элемент

тусдаа layer дээр байж болно.

GPU эдгээр layer-ийг нийлүүлж эцсийн frame үүсгэнэ.

Ингээд веб хуудас дэлгэц дээр харагдана.

Бүх процессыг товч харвал

URL бичиж Enter дарахад ерөнхийдөө дараах дараалал явагдана.

URL бичих
    ↓
Browser URL-ийг задлах
    ↓
Cache шалгах
    ↓
DNS lookup
    ↓
IP address олох
    ↓
Server-тэй connection үүсгэх
    ↓
TCP / QUIC
    ↓
TLS handshake
    ↓
HTTP request
    ↓
Server processing
    ↓
Database / API
    ↓
HTTP response
    ↓
HTML parse
    ↓
DOM
    ↓
CSS татах
    ↓
CSSOM
    ↓
JavaScript ажиллах
    ↓
Render Tree
    ↓
Layout
    ↓
Paint
    ↓
Compositing
    ↓
Web page дэлгэц дээр харагдах

Хэрэглэгчийн хувьд энэ бүхэн ихэвчлэн хэдхэн зуун миллисекундээс хэдхэн секундын дотор явагддаг.

Нэг чухал зүйл: HTML ирснээр сайт бүрэн ачаалагдсан гэсэн үг биш

Browser эхний HTML-ийг авсны дараа дахин олон хүсэлт илгээдэг.

Жишээлбэл HTML дотор:

<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
<img src="logo.png">

байвал browser дахин:

GET style.css
GET app.js
GET logo.png

гэсэн хүсэлтүүдийг сервер рүү илгээнэ.

Орчин үеийн вебсайт хэдэн арваас хэдэн зуун resource ачаалж болно.

Тиймээс нэг URL нээх гэдэг нь ганц HTTP request биш байх нь түгээмэл.

Client-side rendering ба server-side rendering

Орчин үеийн веб хөгжүүлэлтэд хуудас хэрхэн үүсэж байгаагаас шалтгаалж процесс бага зэрэг өөр байдаг.

Server-Side Rendering

Server бэлэн HTML үүсгээд browser руу илгээнэ.

Browser
   ↓
Server
   ↓
Database
   ↓
Ready HTML
   ↓
Browser

Next.js зэрэг framework SSR ашиглаж чаддаг.

Client-Side Rendering

Server эхлээд бага хэмжээний HTML болон JavaScript илгээнэ.

JavaScript ажилласны дараа API руу хүсэлт явуулж мэдээлэл авч UI үүсгэнэ.

Browser
   ↓
HTML + JavaScript
   ↓
JavaScript ажиллана
   ↓
API request
   ↓
Data ирнэ
   ↓
UI үүснэ

React SPA application-ууд ийм бүтэцтэй байх нь түгээмэл.

Яагаад энэ процессыг ойлгох хэрэгтэй вэ?

URL бичихэд цаана нь юу болдгийг ойлгох нь зөвхөн онолын мэдлэг биш.

Web developer болон software engineer-д дараах асуудлыг ойлгоход маш хэрэгтэй.

Сайт яагаад удаан байна вэ?

Асуудал:

• DNS удаан;

• server response удаан;

• database query удаан;

• JavaScript bundle хэт том;

• зураг хэт том;

• render blocking CSS;

• network latency

зэрэг олон газар байж болно.

HTTPS яагаад хэрэгтэй вэ?

TLS handshake болон encryption хэрхэн ажилладгийг ойлговол HTTPS-ийн ач холбогдол илүү тодорхой болно.

404, 500 алдаа хаанаас үүсдэг вэ?

HTTP request-response механизмыг ойлговол frontend болон backend-ийн алдааг ялгахад хялбар.

Frontend performance-ийг яаж сайжруулах вэ?

DOM, CSSOM, layout, paint, JavaScript execution-ийг ойлгох нь website optimization хийх үндэс болдог.

Эцэст нь дүгнэж хэлэхэд

Browser дээр URL бичээд Enter дарах нь энгийн мэт боловч цаана нь маш олон систем хамтран ажилладаг.

DNS domain нэрийг IP address болгон хувиргана. Network protocol сервертэй холболт үүсгэнэ. TLS мэдээллийг хамгаална. HTTP browser болон серверийн хооронд мэдээлэл дамжуулна. Backend хүсэлтийг боловсруулж database-аас мэдээлэл авч болно. Харин browser HTML, CSS болон JavaScript-ийг боловсруулж DOM, CSSOM, Render Tree үүсгэн layout, paint, compositing хийсний эцэст веб хуудсыг дэлгэц дээр харуулдаг.

Өөрөөр хэлбэл бидний өдөр бүр хийдэг:

URL бичих → Enter дарах

гэсэн нэг жижиг үйлдлийн ард интернетийн үндсэн архитектур бараг бүхэлдээ ажиллаж байдаг.