DNS และ HTTP ของเบราว์เซอร์: วงจรชีวิตคำขอ
ติดตาม URL ตั้งแต่แถบที่อยู่ ผ่านการแก้ไข DNS การเชื่อมต่อ TCP คำขอ HTTP และการตอบกลับจากเซิร์ฟเวอร์กลับมายังเบราว์เซอร์
DNS และ HTTP ของเบราว์เซอร์: วงจรชีวิตคำขอ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
เกิดอะไรขึ้นเมื่อคุณพิมพ์ที่อยู่เว็บ
ทุกครั้งที่คุณเข้าเว็บไซต์ เบราว์เซอร์จะเริ่มลำดับขั้นตอนที่แม่นยำชุดหนึ่ง การเข้าใจลำดับนี้จะช่วยให้คุณเป็นนักพัฒนาที่เก่งขึ้น เพราะคุณจะรู้ว่าปัญหาอาจเกิดขึ้นที่ใดและจะทำให้แต่ละขั้นตอนเร็วขึ้นได้อย่างไร
ขั้นตอนที่ 1 — การแปลงชื่อด้วย DNS
DNS (ระบบชื่อโดเมน) เปรียบเสมือนสมุดโทรศัพท์ของอินเทอร์เน็ต เบราว์เซอร์จะถามตัวแก้ไข DNS ว่า "ที่อยู่ IP ของ example.com คืออะไร" จากนั้นตัวแก้ไขจะตรวจสอบแคช และหากจำเป็นก็จะสอบถามเซิร์ฟเวอร์ชื่อโดเมนที่มีอำนาจอ้างอิง
# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NSขั้นตอนที่ 2 — การจับมือของ TCP
เมื่อทราบที่อยู่ IP แล้ว เบราว์เซอร์จะเปิดการเชื่อมต่อ TCPด้วยการจับมือสามทาง: SYN → SYN-ACK → ACK สำหรับ HTTPS ขั้นตอนนี้จะตามด้วยการจับมือของ TLS ซึ่งใช้เจรจาวิธีเข้ารหัส
ขั้นตอนที่ 3 — คำขอ HTTP
เบราว์เซอร์จะส่งคำขอ HTTPผ่านการเชื่อมต่อ TCP โดยคำขอจะประกอบด้วยเมธอด (GET, POST…), เส้นทาง (/index.html) รุ่นของ HTTP และส่วนหัว เช่น Host และ Accept
GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0ขั้นตอนที่ 4 — การตอบกลับ HTTP
เซิร์ฟเวอร์จะประมวลผลคำขอแล้วส่งการตอบกลับกลับมา ซึ่งประกอบด้วยรหัสสถานะ (200 OK, 404 ไม่พบ…), ส่วนหัวของการตอบกลับ (Content-Type, Cache-Control) และเนื้อหาหลัก (HTML, JSON, ไบต์ของรูปภาพ)
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
<!DOCTYPE html>...HTTP/1.1 กับ HTTP/2 และ HTTP/3
HTTP/1.1 ส่งคำขอหนึ่งรายการต่อการเชื่อมต่อหนึ่งครั้ง ส่วน HTTP/2 สามารถส่งคำขอจำนวนมากผ่านการเชื่อมต่อเดียวกันได้ และ HTTP/3 ใช้ QUIC (บน UDP) เพื่อลดความหน่วง โดยเฉพาะบนเครือข่ายมือถือที่ข้อมูลสูญหายได้
รหัสสถานะที่คุณต้องรู้
2xx = สำเร็จ (200 OK, 201 สร้างแล้ว) 3xx = เปลี่ยนเส้นทาง (301 ย้ายถาวร, 304 ไม่มีการแก้ไข) 4xx = ข้อผิดพลาดจากไคลเอ็นต์ (400, 401, 403, 404) 5xx = ข้อผิดพลาดจากเซิร์ฟเวอร์ (500, 502, 503)
HTTPS และ TLS
HTTPS ห่อหุ้ม HTTP ไว้ภายใน TLS (ความปลอดภัยระดับชั้นการส่งข้อมูล) TLS มีคุณสมบัติดังนี้: การเข้ารหัสเพื่อป้องกันไม่ให้อ่านข้อมูลการสื่อสารได้ การยืนยันตัวตนผ่านใบรับรอง (คุณกำลังสื่อสารกับ example.com จริง) และความถูกต้องครบถ้วนของข้อมูลเพื่อป้องกันการดัดแปลง
การแคช: เพิ่มความเร็วในการเข้าชมซ้ำ
การตอบกลับอาจมี Cache-Control: max-age=86400 เพื่อให้เบราว์เซอร์นำสำเนาที่แคชไว้นั้นกลับมาใช้ซ้ำเป็นเวลาหนึ่งวัน ส่วนส่วนหัว ETag และ Last-Modified ช่วยให้เบราว์เซอร์ตรวจสอบว่าเวอร์ชันที่แคชไว้ยังเป็นข้อมูลล่าสุดหรือไม่
Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMTคุกกี้และเซสชัน
เซิร์ฟเวอร์จะกำหนดคุกกี้ด้วยส่วนหัว Set-Cookie เบราว์เซอร์จะส่งคุกกี้เหล่านั้นกลับไปโดยอัตโนมัติกับทุกคำขอที่ส่งไปยังโดเมนเดียวกัน โดยทั่วไปเซสชันจะเป็นคุกกี้ที่เก็บรหัสเซสชัน ซึ่งเซิร์ฟเวอร์จะใช้จับคู่กับข้อมูลของผู้ใช้
CDN — เครือข่ายจัดส่งเนื้อหา
CDN จะจัดเก็บสำเนาทรัพยากรของคุณไว้ในศูนย์ข้อมูลทั่วโลก ผู้ใช้จะดาวน์โหลดข้อมูลจากโหนดที่อยู่ใกล้ที่สุด ทำให้ความหน่วงลดลง Cloudflare, Fastly และ AWS CloudFront เป็น CDN ยอดนิยมที่เว็บไซต์ขนาดใหญ่ส่วนใหญ่ใช้
ตรวจสอบความเข้าใจ
เมธอด HTTP ใดใช้สำหรับขอหน้าเว็บจากเซิร์ฟเวอร์
สรุป: วงจรชีวิตของคำขอทั้งหมด
ป้อน URL → DNS แปลงโดเมนเป็น IP → สร้างการเชื่อมต่อ TCP (+ TLS) → เบราว์เซอร์ส่งคำขอ HTTP → เซิร์ฟเวอร์ตอบกลับด้วยสถานะ + ส่วนหัว + เนื้อหาหลัก → เบราว์เซอร์แสดงผลการตอบกลับ คุณสามารถสังเกตแต่ละขั้นตอนได้ในแผงเครือข่ายของ DevTools
คำถามที่พบบ่อย
บทเรียน “DNS และ HTTP ของเบราว์เซอร์: วงจรชีวิตคำขอ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “DNS และ HTTP ของเบราว์เซอร์: วงจรชีวิตคำขอ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “DNS และ HTTP ของเบราว์เซอร์: วงจรชีวิตคำขอ”
ติดตาม URL ตั้งแต่แถบที่อยู่ ผ่านการแก้ไข DNS การเชื่อมต่อ TCP คำขอ HTTP และการตอบกลับจากเซิร์ฟเวอร์กลับมายังเบราว์เซอร์ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “DNS และ HTTP ของเบราว์เซอร์: วงจรชีวิตคำขอ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- DNS และ HTTP ของเบราว์เซอร์: วงจรชีวิตคำขอ
- HTML CSS และ JavaScript: หน้าที่ของแต่ละชั้น
- หน้าเว็บแสดงผลอย่างไร: การแยกวิเคราะห์ DOM CSSOM การจัดวาง และการวาด
- เครื่องมือสำหรับนักพัฒนา: การเปิดและใช้งาน DevTools