จะเกิดอะไรขึ้นเมื่อคุณเรียกดูเว็บไซต์ในเบราว์เซอร์ของคุณ


64

จะเกิดอะไรขึ้นเบื้องหลังเมื่อเราพิมพ์ www.cnn.com ในเบราว์เซอร์และข้อมูลจะปรากฏบนหน้าจออย่างไร

คำอธิบายทางเทคนิคจะได้รับการชื่นชมอย่างมาก


คำอธิบายทางเทคนิคที่ดีสามารถพบได้ในหนังสือเล่มนี้: ระบบเครือข่ายคอมพิวเตอร์: วิธีการจากบนลงล่างรุ่นที่ 6 (ลิงก์: หนังสือ ) (หน้า 495-500) พวกเขามีรายละเอียดจำนวนมาก เริ่มจากสิ่งที่เกิดขึ้นเมื่อเปิดคอมพิวเตอร์จนถึงเวลาที่เว็บไซต์ปรากฏในเบราว์เซอร์ผู้ใช้ คุณสามารถลิ้มรสสิ่งที่กล่าวถึงในหนังสือในชุดสไลด์นี้ (ลิงก์: สไลด์ 88 ถึง 95)
Slothworks

คุณสามารถหาข้อมูลรายละเอียดได้ที่นี่: github.com/vasanthk/how-web-worksหรือhtml5rocks.com/en/tutorials/internals/howbrowserswork
mems

คำตอบ:


134

เบราว์เซอร์: "ตกลงดังนั้นฉันมีผู้ใช้ที่ร้องขอที่อยู่นี้: www.cnn.com ฉันคิดเนื่องจากไม่มีเครื่องหมายทับหรืออะไรนี่เป็นคำขอโดยตรงของหน้าหลักนอกจากนี้ยังไม่มีโปรโตคอลหรือพอร์ตที่กำหนดไว้ ดังนั้นฉันจะถือว่ามันเป็น HTTP และจะไปที่พอร์ต 80 ... โอเคอย่างแรกก่อนอื่นเฮ้ DNS เอาละตื่นแล้ว! www.cnn.com ซ่อนตัวอยู่ที่ไหน? "

DNS: "ถูกต้อง ... เดี๋ยวก่อนฉันจะถามเซิร์ฟเวอร์ ISP ตกลงดูเหมือนว่า 157.166.226.25"

เบราว์เซอร์: "ตกลง Internet Protocol Suite, ตาคุณ! โทร 157.166.226.25 ได้โปรดส่งส่วนหัว HTTP นี้ให้พวกเขามันถามถึงโครงสร้างพื้นฐานและเนื้อหาของหน้าหลักของพวกมัน ไม่ว่าคุณจะสนใจเรื่องนี้ฉันเดา "

TCP / IP: "คุณหมายถึงอะไรของฉันหรือไม่เหมือนฉันไม่เพียง แต่ทำงานด้านหลังเพื่อ DNS เท่านั้นพระเจ้าฉันต้องทำอะไรเพื่อให้ได้รับความชื่นชมที่นี่ ... "

เบราว์เซอร์: ...

TCP / IP: "ใช่แล้ว ... กำลังเชื่อมต่อ ... ฉันจะขอให้เกตเวย์ส่งต่อต่อไปคุณรู้ไหมมันไม่ใช่เรื่องง่ายเลยฉันจะต้องแบ่งคำขอสวย ๆ ของคุณออกเป็นหลายส่วน ดังนั้นมันจึงมาถึงจุดจบและรวบรวมสิ่งต่าง ๆ ที่พวกเขาส่งกลับมาจากแพ็คเกจทั้งหมดที่ฉันได้รับจำนวนนับพัน ... อ่าใช่คุณไม่สนใจตัวเลข "

ในขณะเดียวกันที่สำนักงานใหญ่ของ CNN ในที่สุดข้อความก็ปรากฏขึ้นที่ประตูของเว็บเซิร์ฟเวอร์

เว็บเซิร์ฟเวอร์ของ CNN: "Nzhôô! ลูกค้า! เขาต้องการข่าวสาร! The Front Page!

เอ็นจินสคริปต์ฝั่งเซิร์ฟเวอร์ CNN: "ถูกต้องจะทำ! หน้าแรกใช่มั้ย"

เซิร์ฟเวอร์ฐานข้อมูลของ CNN: "Yey! Work for me! คุณต้องการเนื้อหาอะไรบ้าง"

เอ็นจิ้นสคริปต์ฝั่งเซิร์ฟเวอร์ของ CNN: "... อืมขอโทษฐานฉันมีสำเนาของหน้าแรกที่นี่ในแคชของฉันไม่จำเป็นต้องรวบรวมอะไร แต่เดี๋ยวก่อนใช้ ID ผู้ใช้นี้และเก็บไว้ฉันจะส่งมัน กับลูกค้าด้วยดังนั้นเราจึงรู้ว่าเรากำลังพูดถึงใครในภายหลัง "

เซิร์ฟเวอร์ฐานข้อมูล CNN: "Yey!"

กลับไปที่คอมพิวเตอร์ของผู้ใช้ ...

TCP / IP: "Ooookay มาที่นี่ตอบแล้วโอ้เด็กทำไมฉันถึงรู้สึกว่ามันจะเป็นเรื่องใหญ่ ... "

เบราว์เซอร์: "เอ่อว้าว ... นี่มีโค้ดจาวาสคริปต์ทุกรูป ... หลาย ๆ รูป ... หลายรูปแบบ ... ใช่นี่จะใช้เวลาสักพักในการแสดงผลดีกว่าไปเลยเฮ้ระบบ IP มีอีกหลายสิ่งที่คุณจะต้องได้รับลองมาดูกันว่าฉันต้องการสไตล์ชีตจาก i.cdn.turner.com - ผ่าน HTTP และขอไฟล์ /cnn/.element/css/2.0/common.css และ จากนั้นรับสคริปต์เหล่านั้นที่ i.cdn.turner.com ด้วยฉันนับได้ถึงหกครั้งแล้ว ... "

TCP / IP: "ฉันได้รับรูปภาพเพียงแค่ให้ที่อยู่เซิร์ฟเวอร์กับทุกสิ่งและห่อไฟล์นั้นไว้ในคำขอ HTTP ฉันไม่ต้องการจัดการกับมัน"

DNS: "กำลังตรวจสอบ i.cdn.turner.com ... เฮ้นิด ๆ หน่อย ๆ มันเรียกว่า cdn.cnn.com.c.footprint.net จริง ๆ IP คือ 4.23.41.126"

เบราว์เซอร์: "แน่นอนว่า ... รอสักครู่นี่จะใช้เวลาสองสามวินาทีในการประมวลผลฉันกำลังพยายามทำความเข้าใจกับสคริปต์นี้ทั้งหมด ... "

TCP / IP: "เฮ้นี่คือ CSS ที่คุณถามโอ้และ ... ใช่สคริปต์เพิ่มเติมเหล่านั้นเพิ่งกลับมาอีกด้วย"

เบราว์เซอร์: "เอ่อมีอีกแล้ว ... โฆษณาวิดีโอบางประเภท!"

TCP / IP: "โอ้เจ้านี่มันสนุกขนาดนี้ ... "

เบราว์เซอร์: "มีรูปภาพทุกประเภทด้วยเช่นกันและ CSS นี้ดูน่ารังเกียจ ... ใช่แล้วถ้าส่วนนั้นไปที่นั่นและมีบรรทัดนี้ที่ด้านบน ... วิธีบนโลกจะพอดีอีกต่อไป ... ไม่มี ฉันจะต้องยืดออกนิดหน่อยเพื่อทำให้มัน ... โอ้ แต่ไฟล์ CSS อื่น ๆ แทนที่กฎนั้น ... อืมอันนี้จะไม่ง่ายสำหรับการเรนเดอร์แน่นอน! "

TCP / IP: "ตกลงตกลงหยุดกวนใจฉันสักครู่มีอะไรให้ทำมากมายที่นี่"

เบราว์เซอร์: "ผู้ใช้นี่เป็นรายงานความคืบหน้าเล็กน้อยสำหรับคุณขออภัยทั้งหมดนี้อาจใช้เวลาสองสามวินาทีมี 140 องค์ประกอบที่แตกต่างในการโหลดและดำเนินการจนถึง 16"

หนึ่งหรือสองวินาทีต่อมา ...

TCP / IP: "ตกลงนั่นควรจะเป็นทั้งหมดเฮ้ฟัง ... ขอโทษที่ฉันตะคอกใส่คุณก่อนหน้านี้คุณจัดการที่นี่หรือไม่แน่นอนเช่นนี้ดูเหมือนจะค่อนข้างโหลดสำหรับคุณด้วย"

เบราว์เซอร์: "ว่ววววววววววววววววววววววุุุุุุ่พวกพวกเขาแน่ใจว่าอย่าทำให้ง่ายสำหรับคุณเอาละฉันจะจัดการ

TCP / IP: "ฉันเดาว่ามันค่อนข้างหนักสำหรับเราทุกคนในวันนี้ ... โอ้หยุดมองด้วยความละโมบ DNS!"

เบราว์เซอร์: "เฮ้ผู้ใช้เว็บไซต์พร้อมแล้ว - ไปรับข่าวสารของคุณ!"


17
ดังนั้นนี่คือสิ่งที่พีซีของฉันทำหลังจากมืด
Phoshi

7
คำอธิบายที่ดี ... ออกไปหาคุณ ... บิงโก ...
Rachel

7
ชิ้นส่วนของการเล่าเรื่องที่มหัศจรรย์ :)
Michael Borgwardt

5
@dex: ... และจนถึงวันนี้พวกเขายังคงแข็งแกร่งเรียงลำดับคำขอทั้งหมดของผู้ใช้ด้วยความเพียรที่สมควรได้รับการยกย่องในหนังสือประวัติศาสตร์ แต่เช่นเดียวกับทุกสิ่งวันหนึ่งมันจะถึงเวลาที่พวกเขาจะต้องกลับไปสู่ความล้าสมัยอย่างสง่างามทำให้มีวิธีการที่ทันสมัยกว่าเหมาะกับยุคสมัยมากขึ้น แต่มั่นใจได้ว่าพวกเขาจะอยู่ที่นั่นเสมอในมรดกของเราดูด้วยรอยยิ้มรู้และส่งต่อไปยังคนรุ่นต่อไปในอนาคตบทเรียนทั้งหมดที่พวกเขาเรียนรู้ในช่วงเวลาที่มีการสื่อสารทางอินเทอร์เน็ต
Ilari Kajaste

3
ไชโยสำหรับชาวเนย์ใช่ไหม @wahnfrieden? ฉันคิดว่ามันค่อนข้างแม่นยำและให้ข้อมูล
Jürgen A. Erhard


18
  • เบราว์เซอร์จะแยกสิ่งที่คุณพิมพ์ (URL) ออกเป็นชื่อโฮสต์และพา ธ
  • เบราว์เซอร์สร้างคำขอ HTTP เพื่อขอข้อมูลที่ชื่อโฮสต์และพา ธ ที่กำหนด
  • เบราว์เซอร์ทำการค้นหา DNS เพื่อแก้ไขชื่อโฮสต์ให้เป็นที่อยู่ IP
  • เบราว์เซอร์จะสร้างการเชื่อมต่อ TCP / IP กับคอมพิวเตอร์ที่ระบุผ่านที่อยู่ IP (การเชื่อมต่อนี้เกิดขึ้นจริงจากคอมพิวเตอร์หลาย ๆ เครื่องแต่ละการส่งผ่านข้อมูลไปยังเครื่องถัดไป)
  • เบราว์เซอร์ส่งคำขอ HTTP ลงการเชื่อมต่อไปยังที่อยู่ IP ที่กำหนด
  • คอมพิวเตอร์เครื่องนั้นได้รับการร้องขอ HTTP จากการเชื่อมต่อ TCP / IP และส่งต่อไปยังโปรแกรมเว็บเซิร์ฟเวอร์
  • เว็บเซิร์ฟเวอร์อ่านชื่อโฮสต์และพา ธ และค้นหาหรือสร้างข้อมูลที่คุณขอ
  • เว็บเซิร์ฟเวอร์สร้างการตอบสนอง HTTP ที่มีข้อมูลนั้น
  • เว็บเซิร์ฟเวอร์ส่งการตอบสนอง HTTP นั้นกลับลงการเชื่อมต่อ TCP / IP ไปยังเครื่องของคุณ
  • เบราว์เซอร์ได้รับการตอบสนอง HTTP และแยกออกเป็นส่วนหัว (อธิบายข้อมูล) และเนื้อหา (ข้อมูลเอง)
  • เบราว์เซอร์ตีความข้อมูลเพื่อตัดสินใจว่าจะแสดงข้อมูลในเบราว์เซอร์อย่างไรโดยทั่วไปนี่คือข้อมูล HTML ที่ระบุประเภทของข้อมูลและรูปแบบทั่วไป
  • ข้อมูลบางส่วนจะเป็นข้อมูลเมตาที่ระบุทรัพยากรเพิ่มเติมที่จำเป็นต้องโหลดเช่นสไตล์ชีตสำหรับเค้าโครงโดยละเอียดหรือรูปภาพอินไลน์หรือภาพยนตร์ Flash ข้อมูลเมตานี้ถูกระบุอีกครั้งเป็น URL และกระบวนการทั้งหมดนี้จะทำซ้ำสำหรับแต่ละรายการจนกว่าจะโหลดทั้งหมด

นี่เป็นสิ่งที่ดี แต่อาจคุ้มค่าที่จะกล่าวถึงการแคช (ในเบราว์เซอร์และที่อื่น ๆ ) พร็อกซีการทำโหลดบาลานซ์ CDN และอื่น ๆ ฉันคิดว่าสิ่งเหล่านี้ล้วนเป็นส่วนสำคัญในการทำความเข้าใจว่าเว็บไซต์ที่ยุ่ง (บนโลก) จัดการกับคำขอจำนวนเกือบล้านรายการพร้อมกันสำหรับเนื้อหาจำนวนมหาศาลได้อย่างไร
Sam Dutton

12

ขั้นตอนแรกคือการค้นหา DNS (เซิร์ฟเวอร์ชื่อโดเมน) มันใช้เซิร์ฟเวอร์ DNS ที่ระบุในการตั้งค่าเครือข่ายของคุณ (หรือมอบให้คุณโดย DHCP) เพื่อค้นหาโดเมนบนสุด (cnn.com) จากนั้นขอชื่อเซิร์ฟเวอร์ของโดเมนนั้นเพื่อหาที่อยู่ IP ของโดเมนย่อยที่ระบุ (www.cnn.com)

หลังจากที่มีที่อยู่ IP แล้วเบราว์เซอร์ของคุณจะเริ่มสื่อสารกับเว็บเซิร์ฟเวอร์ สิ่งนี้ทำได้โดยใช้โปรโตคอลที่ระบุ (ซึ่งโดยปกติแล้วจะเป็นค่าเริ่มต้นไปที่ HTTP 1.1) มีการร้องขอ 'GET' สำหรับ '/' ไปยังเซิร์ฟเวอร์ซึ่งตอบสนองกับเนื้อหาเอกสาร HTML และส่วนหัวที่เหมาะสม (ซึ่งบอกเบราว์เซอร์ของประเภทเนื้อหา HTML และข้อมูลอื่น ๆ ) จากนั้นเบราว์เซอร์จะแยกวิเคราะห์เอกสารและค้นหา URL ที่จำเป็นต้องฝังไว้ในหน้า (เช่นรูปภาพหรือสไตล์ชีทที่เชื่อมโยง) และรับคำขอในแต่ละรายการ

เบราว์เซอร์มักจะส่งคำขอ GET สำหรับ '/favicon.ico' โดยอัตโนมัติ (เพื่อแสดงไอคอน CNN เล็ก ๆ ถัดจากชื่อไซต์)

เบราว์เซอร์ของคุณมีแนวโน้มที่จะระบุในส่วนหัวคำขอซึ่งต้องการให้เนื้อหาการตอบสนองถูกบีบอัดโดยใช้อัลกอริทึม gzip ทำให้ไฟล์ดาวน์โหลดมีขนาดเล็กลงมากหากเซิร์ฟเวอร์รองรับ นี่เป็นสิ่งที่โปร่งใสสำหรับคุณแม้ว่ามันจะเหมือนกับการดาวน์โหลดไฟล์ ZIP และการขยายไฟล์

เมื่อคุณโหลดหน้านี้ใหม่เบราว์เซอร์ของคุณจะตรวจสอบว่าหน้านั้นถูกแคชในระบบของคุณหรือไม่และถ้าเป็นเช่นนั้นคำขอ HTTP จะทำหน้าที่เป็นส่วนหัวของเอกสารและตรวจสอบวันที่แก้ไข หากวันที่นี้ช้ากว่าสำเนาที่คัดลอกมามันจะร้องขอเนื้อหาเอกสารแบบเต็มอีกครั้งและรีเฟรชหน้า มิฉะนั้นจะใช้สำเนาในเครื่องของคุณ


คนที่แต่งตัวประหลาดไม่ทราบพื้นฐานและคุณเพียงแค่เป่าเขาด้วย DNS, DHCP และ IP มาอธิบายโครงสร้างของแพ็กเก็ต IP กับเขากัน!

6
เขาขอรายละเอียดทางเทคนิค เขาสามารถค้นหา IP ได้ถ้าต้องการ

สิ่งคือเขาอาจไม่ต้องการค้นหาอะไร ... :(

8

การหายไปจากคำตอบอื่น ๆ คือสิ่งที่เกิดขึ้นทางฝั่ง CNN:

  • เครื่องที่ CNN ได้รับข้อความจากคอมพิวเตอร์ของคุณเพื่อขอหน้า
  • มันเปลี่ยนเส้นทางการร้องขอนี้ไปยังหนึ่งในคอมพิวเตอร์หลายเครื่องที่ใช้ CNN สำหรับเว็บไซต์ (เหตุผลนี้คือด้วยวิธีนี้คุณสามารถกระจายการทำงานของการรวบรวมหน้าเว็บการตอบสนองผ่านคอมพิวเตอร์หลายเครื่อง)
  • คอมพิวเตอร์ CNN ได้รับคำขอของคุณและตอบกลับด้วยหน้าเว็บที่อาจมีการคำนวณล่วงหน้าเกือบทั้งหมด แต่อาจจะมีการเปลี่ยนแปลงบางอย่างก่อนที่จะส่งถึงคุณ (อาจเป็นโฆษณาที่อยู่ด้านบนอาจเป็นหัวข้อข่าว) บางครั้งคอมพิวเตอร์ประกอบหน้าจากส่วนประกอบเล็ก ๆ จำนวนมากทุกครั้งที่ได้รับคำขอ ไม่แน่ใจว่า CNN ทำอะไร
  • การตอบสนองผ่านทางเครือข่ายไปยังคอมพิวเตอร์ของคุณซึ่งจะแสดงผล
  • การตอบสนองไม่ได้รวมถึงภาพ: คอมพิวเตอร์ของคุณส่งคำขออีกครั้งสำหรับภาพและสถานการณ์เดียวกันที่เกิดขึ้น

6

เห็นได้ชัดว่านี่ไม่ใช่คำอธิบายทางเทคนิค แต่เป็นเครื่องช่วยด้านภาพที่น่ารัก (จากเว็บไซต์ยอดเยี่ยมของVladstudio.com ) ที่อาจเป็นประโยชน์กับบางคน:

อินเทอร์เน็ตทำงานอย่างไร


1

ข้อมูลที่คุณถามสามารถเติมหนังสือสองสามเล่ม แต่นี่คือความพยายามของฉันที่จะอธิบาย: เบราว์เซอร์ของคุณบอกให้ระบบปฏิบัติการของคุณค้นหาที่อยู่ IP ของ cnn.com จากนั้นระบบปฏิบัติการของคุณจะขอเซิร์ฟเวอร์ DNS สำหรับที่อยู่ IP สำหรับ cnn.com IP จะถูกส่งไปยัง broswer ซึ่งจะติดต่อกับที่อยู่ IP และขอหน้า cnn.com จะส่งหน้า html ให้คุณ เบราว์เซอร์จะแยกวิเคราะห์ HTML และส่งข้อมูลไปยัง HTML renderer เบราว์เซอร์จะบอกระบบปฏิบัติการว่าจะแสดงผลบนหน้าจออย่างไร



1

มีวิดีโอยอดเยี่ยมจาก "Sendung mit der Maus" (รายการทีวีสำหรับเด็กที่โด่งดังของเยอรมันที่อธิบายเทคโนโลยีสำหรับเด็ก):

Die Sendung mit der Maus - วิธีใช้อินเทอร์เน็ต (วิธีการทำงานของอินเทอร์เน็ต)

ในภาษาเยอรมันเท่านั้นน่าเสียดาย แต่ตลกแม้ไม่มีข้อความ ผู้ชายที่มีหมวกกันน็อกตลกเล่นแพ็คเก็ต IP และข้อมูลจะถูกเขียนลงบนการ์ดกระดาษ คลาสสิก :-)

BTW คำอธิบายนั้นดีพอสมควร

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.