วิธีการทำงานของเว็บ ตอนที่ II: จะเกิดอะไรขึ้นเมื่อคุณเยี่ยมชม URL

เผยแพร่แล้ว: 2016-12-06

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

เทคโนโลยีที่เกี่ยวข้องตั้งแต่วินาทีที่คุณกดปุ่ม Enter จนถึงเมื่อคุณดูหน้าเว็บมีมากมาย ในโพสต์ที่แล้ว เราได้พูดคุยเกี่ยวกับ Hypertext และ HTTP แต่นี่เป็นเพียงจุดเริ่มต้น:

เว็บเซิร์ฟเวอร์ (เช่น apache2 และ nginx) ใช้โปรโตคอล HTTP ร่วมกับฟังก์ชันอื่นๆ ที่ทำให้เว็บเบราว์เซอร์สามารถเชื่อมต่อ ขอ และรับข้อมูลเว็บได้ HTTP เป็นช่องทางที่ข้อความ หน้าเว็บ รูปภาพ และทรัพยากร "เดินทาง" ระหว่างเว็บเซิร์ฟเวอร์และเบราว์เซอร์

เว็บสมัยใหม่มีความต้องการค่อนข้างมากและเว็บเซิร์ฟเวอร์สมัยใหม่ได้เผชิญกับความท้าทายดังกล่าว ความสามารถในการปรับขนาดและความปลอดภัยเป็นปัญหาหลักสองประการของโลกปัจจุบัน เว็บเซิร์ฟเวอร์สมัยใหม่สามารถปรับขนาดได้สูง (สามารถรองรับการเชื่อมต่อพร้อมกันมากกว่า 10,000 รายการ) มีตัวเลือกมากมายสำหรับการโหลดบาลานซ์ รองรับ SSL/TLS และ HTTP/2 การปรับปรุงที่สำคัญของ HTTP/2 ผ่าน HTTP/1.1 คือ การจัดการการสตรีมแพ็คเก็ตที่เหนือกว่าอย่างไม่ต้องสงสัย การสตรีมวิดีโอแพร่หลายในปัจจุบัน และ HTTP/1.1 ไม่สามารถตอบสนองความต้องการของอุปกรณ์ ความจุเครือข่าย และจำนวนผู้ใช้เว็บออนไลน์ทั้งหมดในปัจจุบันได้อย่างเพียงพอ

HTML (HyperText Markup Language) เป็นภาษาที่ใช้แท็กเพื่อแสดงเอกสารไฮเปอร์เท็กซ์ที่มีโครงสร้างซึ่งเว็บเบราว์เซอร์ของคุณสามารถเข้าใจได้

รูปแบบใหม่ล่าสุดของ HTML5 มีการปรับปรุงภาษาและการล้างข้อมูลมากมาย แต่ส่วนเพิ่มเติมที่น่าประทับใจที่สุดคือการสนับสนุนวิดีโอและเสียงแบบเนทีฟ กราฟิก 2D และ 3D ตลอดจนที่จัดเก็บฐานข้อมูลในเครื่อง การปรับปรุงเหล่านี้ทำให้เทคโนโลยีมัลติมีเดียล้าสมัยอย่างมีประสิทธิภาพ เช่น Flash และ Silverlight

CSS (Cascading Style-sheets) เป็นเทคโนโลยีที่นักออกแบบเว็บไซต์ใช้เพื่อทำให้การเปลี่ยนแปลงทางภาพง่ายขึ้นในหน้าเว็บหลายๆ หน้า

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

แบ็กเอนด์ (เช่น PHP หรือ Java) คือโค้ดที่ผสมกับ HTML ซึ่งเว็บเซิร์ฟเวอร์จะดำเนินการเมื่อการคำนวณสิ้นสุดลง

ทุกวันนี้เว็บไซต์ทั้งหมดเป็นไดนามิก หมายความว่าไม่มีไฟล์ .html ธรรมดา ๆ ที่ให้บริการในเบราว์เซอร์อีกต่อไป ภาษาสมัยใหม่ทั้งหมดด้วยการเพิ่มไลบรารีซอฟต์แวร์ที่เรียกว่ากรอบงานเว็บ สามารถใช้เป็นโซลูชันส่วนหลังสำหรับเว็บไซต์ได้ รุ่นล่าสุดของ PHP 7 และการปรับปรุงประสิทธิภาพการทำงานที่ยอดเยี่ยมและฟีเจอร์ที่เปิดตัว รวมถึง HHVM ของ Facebook ได้นำกระบวนการทั้งหมดไปสู่อีกระดับ

ฟรอนต์เอนด์ (Javascript) เป็นโค้ดที่ผสมกับ HTML ด้วยเช่นกัน แต่จะถูกเรียกใช้ในเครื่องคอมพิวเตอร์ของคุณโดยเว็บเบราว์เซอร์ของคุณ

บางทีการพัฒนาที่น่าอัศจรรย์และน่าประทับใจที่สุดในเว็บสมัยใหม่ก็คือ Javascript มันเปลี่ยนจากการเป็นน้องชายของ Java ธรรมดาๆ ที่ใช้ทำเมนูและแสดงป๊อปอัป ไปสู่ภาษาการเขียนโปรแกรมที่ทรงพลังที่ใช้ทั้งในไคลเอนต์และเซิร์ฟเวอร์ ทุกวันนี้ มันสามารถทำอะไรก็ได้บนเว็บเบราว์เซอร์และด้วยความเร็วที่ยอดเยี่ยม เอ็นจิ้น V8 Javascript ของ Google เป็นตัวเปลี่ยนเกมทางเทคโนโลยีที่สำคัญ

จะเกิดอะไรขึ้นเมื่อคุณเยี่ยมชม URL

เว็บเป็นพื้นที่ที่อุดมสมบูรณ์ของเทคโนโลยีที่แตกต่างกัน แต่มีสองแนวคิดที่ฟังก์ชันพื้นฐานยังคงไม่เปลี่ยนแปลงแม้ในปัจจุบัน เว็บเบราว์เซอร์และเว็บเซิร์ฟเวอร์ สิ่งเหล่านี้ทำงานบนโมเดลไคลเอนต์/เซิร์ฟเวอร์ "เก่า" ซึ่งมีดังต่อไปนี้: ไคลเอนต์เชื่อมต่อกับเซิร์ฟเวอร์โดยใช้ที่อยู่ (IP หรือชื่อ) และร้องขอบางสิ่ง เซิร์ฟเวอร์จะตอบสนองต่อไคลเอนต์เป็นต้น ลูกค้าเชื่อมต่อกับเซิร์ฟเวอร์ แต่ไม่ใช่ในทางกลับกัน แม้ว่าเทคโนโลยีเว็บในปัจจุบันจะเปลี่ยนแปลงรูปแบบนี้ไปอย่างมาก เราจะใช้สิ่งนี้เพื่ออธิบายกระบวนการในลักษณะที่ง่ายขึ้น

ดังนั้น คุณเปิดเบราว์เซอร์ที่คุณชื่นชอบและไปที่หน้าเว็บ ตั้งแต่วินาทีที่คุณกดปุ่ม Enter จนถึงเมื่อคุณเห็นหน้าเว็บปรากฏขึ้น สิ่งต่อไปนี้จะเกิดขึ้น:

ขั้นแรกเบราว์เซอร์ของคุณจะเรียกใช้โมดูลซอฟต์แวร์ที่เรียกว่าตัวแก้ไข DNS ที่กำหนดค่าให้กับคอมพิวเตอร์ของคุณ และขอที่อยู่ IP ที่สอดคล้องกับ URL ที่คุณป้อน
DNS (ระบบชื่อโดเมน) เป็นบริการอินเทอร์เน็ตหลักที่จับคู่ชื่อคอมพิวเตอร์ (เช่น www.pressidium.com ) เข้ากับที่อยู่ IP ที่อยู่ IP คือสิ่งที่คอมพิวเตอร์ที่เชื่อมต่ออินเทอร์เน็ตเข้าใจและสามารถเชื่อมต่อได้ เราจะสำรวจว่ามันคืออะไรและทำงานอย่างไรในโพสต์ถัดไป
เบราว์เซอร์ของคุณจะเริ่มต้นการเชื่อมต่อกับที่อยู่ IP นั้น โดยใช้พอร์ต 80 หรือ 443
ที่อยู่ IP หมายถึงเซิร์ฟเวอร์ ในขณะที่หมายเลขพอร์ตหมายถึงบริการที่คุณต้องการเชื่อมต่อ เว็บเซิร์ฟเวอร์ทั้งหมดทำงานโดยค่าเริ่มต้นบนพอร์ต 80 ในขณะที่พอร์ต 443 ใช้สำหรับการเชื่อมต่อเว็บที่ปลอดภัย
เว็บเซิร์ฟเวอร์ประมวลผล URL ที่คุณป้อนและให้การควบคุมแก่ส่วนหลัง โค้ดส่วนหลังสร้างหน้า HTML และส่งต่อไปยังเว็บเซิร์ฟเวอร์ ในที่สุด เว็บเซิร์ฟเวอร์ก็ส่งหน้า HTML ไปยังเบราว์เซอร์ผ่านช่องทาง HTTP
มีหลายสิ่งหลายอย่างที่เกิดขึ้นในหน่วยมิลลิวินาทีที่เว็บเซิร์ฟเวอร์ใช้ในการส่ง HTML กลับ รหัสส่วนหลังในเว็บไซต์มักจะเชื่อมต่อกับฐานข้อมูล ดำเนินการค้นหา รับข้อมูลกลับ ติดต่อบริการส่วนหลังอื่น ๆ และสุดท้ายประกอบทุกอย่างลงในเอกสาร HTML มันไม่ใช่ไฟล์แยกที่คุณร้องขอ แต่เป็นทรัพยากรแบบไดนามิก ซึ่งสร้างขึ้นทันทีโดยใช้เทคโนโลยีและส่วนประกอบที่หลากหลาย
เว็บเบราว์เซอร์ของคุณได้รับหน้า HTML ปิดการเชื่อมต่อกับเว็บเซิร์ฟเวอร์แล้วแสดงผลบนหน้าจอของคุณ มันรันโค้ด Javascript ที่มีอยู่ในการออกแบบเว็บ HTML.Modern ตามแนวทางที่เรียกว่า Responsive Design วิธีนี้ใช้ HTML, CSS และ Javascript เพื่อปรับเลย์เอาต์ของหน้าเว็บแบบไดนามิก ขึ้นอยู่กับอุปกรณ์ที่คุณใช้สำหรับการเรียกดู สิ่งนี้มีความสำคัญมากในทุกวันนี้ด้วยการเติบโตอย่างรวดเร็วของอุปกรณ์พกพาและแท็บเล็ต

อะไรต่อไป?

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