เจาะลึกเว็บเบราว์เซอร์สมัยใหม่ (ตอนที่ 1)

Mariko Kosaka

สถาปัตยกรรม CPU, GPU, หน่วยความจำ และการประมวลผลแบบหลายกระบวนการ

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

ในส่วนของหัวข้อ 1 ในซีรีส์นี้ เราจะมาดูคำศัพท์หลักๆ ด้านคอมพิวเตอร์และ แบบหลายกระบวนการ

แกนหลักของคอมพิวเตอร์คือ CPU และ GPU

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

CPU

วันที่ CPU
รูปที่ 1: แกน CPU 4 แกนขณะพนักงานออฟฟิศกำลังนั่งจัดการงานแต่ละชิ้นบนโต๊ะทำงาน

ขั้นตอนแรกคือการเสนอราคาส่วนกลาง หรือ CPU CPU อาจได้รับการพิจารณา สมองคอมพิวเตอร์ CPU Core ตามที่แสดงในรูปนี้เป็นพนักงานออฟฟิศ สามารถจัดการงานต่างๆ ได้มากมาย ทีละอย่างเมื่อมีข้อมูลเข้ามา ช่วยจัดการสิ่งต่างๆ ได้ทุกอย่างตั้งแต่คณิตศาสตร์ไปจนถึงศิลปะ ทั้งยังรู้ว่าควรตอบกลับอย่างไร ถึงการโทรหาลูกค้า ที่ผ่านมา CPU ส่วนใหญ่จะใช้ชิปเดี่ยว แกนกลางก็เหมือนกับ CPU อีกตัวหนึ่งที่อาศัยอยู่ในแอป ชิปเดียวกัน ในฮาร์ดแวร์สมัยใหม่ คุณมักจะได้รับแกนประมวลผลมากกว่า 1 แกน ซึ่งให้พลังในการประมวลผลที่มากกว่า ลงในโทรศัพท์และแล็ปท็อป

GPU

วันที่ GPU
รูปที่ 2: แกน GPU จำนวนมากที่มีเครื่องมือแนะนำให้จัดการงานที่จำกัด

กราฟิกาก - หรือ GPU คืออีกส่วนหนึ่งของคอมพิวเตอร์ สิ่งที่ต่างจาก CPU GPU สามารถจัดการงานง่ายๆ ได้ดี แต่ทำงานในหลายแกนพร้อมกันได้ เป็นชื่อ กล่าวไว้ว่า มันเกิดขึ้นครั้งแรกเพื่อจัดการกับกราฟิก นั่นเป็นเพราะเหตุใดในบริบทของกราฟิก "การใช้ GPU" หรือ "GPU-back" การแสดงผลที่รวดเร็วและการโต้ตอบที่ราบรื่น ในช่วงไม่กี่ปีที่ผ่านมา การประมวลผลที่เร่งผ่าน GPU ทำให้มีการประมวลผล เพิ่มขึ้นเรื่อยๆ ใน GPU เพียงอย่างเดียว

เมื่อคุณเริ่มแอปพลิเคชันในคอมพิวเตอร์หรือโทรศัพท์ CPU และ GPU เป็นตัวขับเคลื่อน แอปพลิเคชัน โดยปกติแล้ว แอปพลิเคชันจะทำงานบน CPU และ GPU โดยใช้กลไกที่ผู้ดูแลระบบกำหนด ระบบปฏิบัติการ

วันที่ ฮาร์ดแวร์ ระบบปฏิบัติการ แอปพลิเคชัน
รูปที่ 3: สถาปัตยกรรมคอมพิวเตอร์ 3 ชั้น ฮาร์ดแวร์ของเครื่องทำงานที่ด้านล่าง ระบบอยู่ตรงกลาง และแอปพลิเคชันจะอยู่อยู่ด้านบน

ดำเนินโปรแกรมเกี่ยวกับ Process และ Thread

วันที่ กระบวนการและชุดข้อความ
รูปที่ 4: กระบวนการที่เป็นกรอบล้อมรอบ เส้นด้ายเป็นรูปปลาที่ว่ายอยู่ในกระบวนการ

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

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

วันที่ กระบวนการและหน่วยความจำ
รูปที่ 5: แผนภาพกระบวนการที่ใช้พื้นที่หน่วยความจำและการจัดเก็บข้อมูลแอปพลิเคชัน

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

วันที่ กระบวนการของพนักงานและ IPC
รูปที่ 6: แผนภาพของกระบวนการที่แยกกันซึ่งสื่อสารผ่าน IPC

สถาปัตยกรรมของเบราว์เซอร์

แล้วเว็บเบราว์เซอร์สร้างขึ้นโดยใช้กระบวนการและเทรดได้อย่างไร นั่นอาจเป็นหนึ่งกระบวนการที่มี เทรดที่ต่างกัน หรือกระบวนการต่างๆ มากมาย โดยมีเธรด 2-3 อันสื่อสารผ่าน IPC

วันที่ สถาปัตยกรรมเบราว์เซอร์
รูปที่ 7: สถาปัตยกรรมเบราว์เซอร์ต่างๆ ในกระบวนการ / แผนภาพชุดข้อความ

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

เพื่อประโยชน์ของบล็อกนี้ เราใช้สถาปัตยกรรมล่าสุดของ Chrome ตามที่อธิบายไว้ในรูปที่ 8

ทางด้านบนจะเป็นกระบวนการของเบราว์เซอร์ที่ประสานกับกระบวนการอื่นๆ ที่จัดการความแตกต่าง ของแอปพลิเคชัน สำหรับกระบวนการแสดงผล จะมีการสร้างและมอบหมายหลายกระบวนการให้กับ แต่ละแท็บ เมื่อไม่นานมานี้ Chrome ได้ให้แต่ละแท็บดำเนินการเมื่อทำได้ แต่จะพยายามให้ กระบวนการของแต่ละเว็บไซต์ รวมถึง iframe (ดูการแยกเว็บไซต์)

วันที่ สถาปัตยกรรมเบราว์เซอร์
รูปที่ 8: แผนภาพสถาปัตยกรรมแบบหลายกระบวนการของ Chrome มีเลเยอร์มากมายแสดงอยู่บน กระบวนการแสดงผล เพื่อแสดงถึง Chrome ที่กำลังเรียกใช้โปรเซสโหมดแสดงภาพหลายกระบวนการสำหรับแต่ละแท็บ

กระบวนการใดที่ควบคุมสิ่งนั้น

ตารางต่อไปนี้อธิบายกระบวนการของ Chrome แต่ละรายการและสิ่งที่ Chrome ควบคุม

กระบวนการและสิ่งที่ควบคุม
เบราว์เซอร์ ควบคุม "chrome" ในแอปพลิเคชัน รวมถึงแถบที่อยู่ บุ๊กมาร์ก กลับและ ปุ่มไปข้างหน้า
ยังจัดการส่วนที่มองไม่เห็นซึ่งเป็นสิทธิ์เฉพาะบุคคลของเว็บเบราว์เซอร์ เช่น คำขอเครือข่ายและการเข้าถึงไฟล์
โปรแกรมร่างภาพ ควบคุมทุกอย่างภายในแท็บที่แสดงเว็บไซต์
ปลั๊กอิน ควบคุมปลั๊กอินที่เว็บไซต์ใช้ เช่น Flash
GPU จัดการงาน GPU แบบแยกออกจากกระบวนการอื่นๆ แยกเป็นอีกกระบวนการหนึ่ง เนื่องจาก GPU จัดการคำขอจากหลายแอปและวาดลงในพื้นผิวเดียวกัน
วันที่ กระบวนการของ Chrome
รูปที่ 9: กระบวนการต่างๆ ที่ชี้ไปยังส่วนต่างๆ ของ UI ของเบราว์เซอร์

มีกระบวนการอื่นๆ เช่น กระบวนการส่วนขยายและกระบวนการยูทิลิตี หากคุณต้องการดู จำนวนกระบวนการที่ทำงานอยู่ใน Chrome คลิกไอคอนเมนูตัวเลือก ที่มุมขวาบน ให้เลือกเครื่องมือเพิ่มเติม จากนั้นเลือก เลือกตัวจัดการงาน การดำเนินการนี้จะเปิดหน้าต่างที่มีรายการกระบวนการที่ทำงานอยู่ในปัจจุบัน และปริมาณ CPU/หน่วยความจำที่ใช้

ประโยชน์ของสถาปัตยกรรมแบบหลายกระบวนการใน Chrome

ก่อนหน้านี้ ฉันบอกว่า Chrome ใช้กระบวนการแสดงผลหลายตัว ในกรณีที่ง่ายที่สุด คุณสามารถ สมมติว่าแต่ละแท็บมีกระบวนการของโหมดแสดงภาพของตัวเอง สมมติว่าคุณมีแท็บเปิดอยู่ 3 แท็บและแต่ละแท็บทำงานอยู่ ด้วยกระบวนการแสดงผล อิสระ

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

วันที่ โหมดแสดงภาพหลายหน้าจอสำหรับแท็บ
รูปที่ 10: แผนภาพแสดงกระบวนการหลายรายการที่ทำงานอยู่แต่ละแท็บ

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

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

ประหยัดหน่วยความจำมากขึ้น - การให้บริการใน Chrome

เราใช้วิธีการเดียวกันนี้กับกระบวนการของเบราว์เซอร์ Chrome กำลังอยู่ระหว่างการเปลี่ยนแปลงสถาปัตยกรรมเป็น เรียกใช้แต่ละส่วนของโปรแกรมเบราว์เซอร์เป็นบริการที่สามารถแบ่งออกเป็นกระบวนการที่แตกต่างกัน หรือรวมกันเป็นรายการเดียว

แนวคิดทั่วไปคือเมื่อ Chrome ทำงานบนฮาร์ดแวร์ที่มีประสิทธิภาพ จะแยกบริการแต่ละอย่างออกเป็น กระบวนการต่างๆ ทำให้มีความเสถียรมากกว่า แต่หากใช้งานบนอุปกรณ์ที่มีข้อจำกัดด้านทรัพยากร Chrome รวมบริการต่างๆ ไว้ในกระบวนการเดียวเพื่อประหยัดพื้นที่หน่วยความจำ มีการรวมแนวทางที่คล้ายกัน กระบวนการที่ใช้หน่วยความจำน้อยลงถูกใช้งานบนแพลตฟอร์มอย่าง Android ก่อนที่จะมีการเปลี่ยนแปลงนี้

วันที่ บริการของ Chrome
รูปที่ 11: แผนภาพแสดงบริการของ Chrome ซึ่งย้ายบริการต่างๆ ไปยังหลายกระบวนการ และกระบวนการของเบราว์เซอร์เดียว

กระบวนการแสดงผลต่อเฟรม - การแยกเว็บไซต์

การแยกเว็บไซต์คือ แนะนำใน Chrome ซึ่งเรียกใช้กระบวนการแสดงผลแยกต่างหากสำหรับ iframe แบบข้ามเว็บไซต์แต่ละรายการ เรากำลังพูดถึงกระบวนการแสดงผล 1 รายการต่อรูปแบบแท็บ ซึ่งช่วยให้สามารถ iframe จะทำงานในกระบวนการของโหมดแสดงภาพเดียวที่มีการแชร์พื้นที่หน่วยความจำระหว่างหลายๆ เว็บไซต์ การเรียกใช้ a.com และ b.com ในกระบวนการแสดงผลเดียวกันอาจดูไม่มีปัญหา นโยบายต้นทางเดียวกัน เป็นรูปแบบความปลอดภัยหลักของเว็บ ช่วยให้มั่นใจว่าเว็บไซต์หนึ่งจะเข้าถึงข้อมูลจากเว็บไซต์อื่นๆ ไม่ได้ โดยไม่ได้รับความยินยอม การหลบเลี่ยงนโยบายนี้เป็นเป้าหมายหลักของการโจมตีด้านความปลอดภัย การแยกกระบวนการเป็นวิธีที่มีประสิทธิภาพที่สุดในการแยกเว็บไซต์ ด้วย Meltdown และ Spectre ก็ยิ่งชัดเจนมากขึ้นว่าเราจำเป็นต้องแยกเว็บไซต์โดยใช้กระบวนการ เมื่อเปิดใช้การแยกเว็บไซต์บนเดสก์ท็อปโดยค่าเริ่มต้นตั้งแต่ Chrome 67 เป็นต้นไป iframe แบบข้ามเว็บไซต์แต่ละรายการในแท็บ ก็จะมีขั้นตอนของโหมดแสดงภาพแยกต่างหาก

วันที่ การแยกเว็บไซต์
รูปที่ 12: แผนภาพการแยกเว็บไซต์ กระบวนการแสดงผลหลายแบบที่ชี้ไปยัง iframe ภายในเว็บไซต์

การเปิดใช้การแยกเว็บไซต์ใช้ความพยายามด้านวิศวกรรมมาหลายปี การแยกเว็บไซต์ไม่ใช่เรื่องง่าย การกำหนดกระบวนการแสดงผลที่แตกต่างกัน โดยจะเปลี่ยนวิธีการสื่อสารของ iframe โดยพื้นฐาน อื่นๆ การเปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าที่มี iframe ที่ทำงานอยู่ในกระบวนการที่แตกต่างกันหมายความว่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ต้อง ใช้งานเบื้องหลังเพื่อทำให้งานดูราบรื่น แม้กระทั่งการใช้ Ctrl+F อย่างง่าย เพื่อค้นหา คำในหน้าเว็บหมายถึงการค้นหาผ่านขั้นตอนของโหมดแสดงภาพต่างๆ คุณดูสาเหตุที่ วิศวกรเบราว์เซอร์พูดถึงการเปิดตัวการแยกเว็บไซต์ในฐานะเป้าหมายสำคัญ

สรุป

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

คุณชอบโพสต์นี้ไหม หากคุณมีคำถามหรือข้อเสนอแนะเกี่ยวกับโพสต์ในอนาคต โปรด ฟังคำตอบจากคุณได้ที่ @kosamari ทาง Twitter

ถัดไป: จะเกิดอะไรขึ้นในการนำทาง