สถาปัตยกรรม CPU, GPU, หน่วยความจำ และการประมวลผลแบบหลายกระบวนการ
ในบล็อกซีรีส์ 4 ตอนนี้ เราจะมาดูภายในเบราว์เซอร์ Chrome ตั้งแต่สถาปัตยกรรมระดับสูงไปจนถึง ข้อมูลจำเพาะของไปป์ไลน์การแสดงผล หากคุณเคยสงสัยว่าเบราว์เซอร์เปลี่ยนโค้ดของคุณให้เป็น เว็บไซต์ที่ใช้งานได้ หรือคุณไม่แน่ใจว่าเหตุใดจึงแนะนำเทคนิคเฉพาะเพื่อประสิทธิภาพ วิดีโอชุดนี้เหมาะสำหรับคุณ
ในส่วนของหัวข้อ 1 ในซีรีส์นี้ เราจะมาดูคำศัพท์หลักๆ ด้านคอมพิวเตอร์และ แบบหลายกระบวนการ
แกนหลักของคอมพิวเตอร์คือ CPU และ GPU
เพื่อให้เข้าใจสภาพแวดล้อมที่เบราว์เซอร์กำลังทำงานอยู่ เราต้องทำความเข้าใจ ชิ้นส่วนคอมพิวเตอร์และสิ่งที่พวกเขาทำ
CPU
![CPU](https://developer.chrome.com/static/blog/inside-browser-part1/image/cpu-fc96f4ee3715f.png?authuser=5&hl=th)
ขั้นตอนแรกคือการเสนอราคาส่วนกลาง หรือ CPU CPU อาจได้รับการพิจารณา สมองคอมพิวเตอร์ CPU Core ตามที่แสดงในรูปนี้เป็นพนักงานออฟฟิศ สามารถจัดการงานต่างๆ ได้มากมาย ทีละอย่างเมื่อมีข้อมูลเข้ามา ช่วยจัดการสิ่งต่างๆ ได้ทุกอย่างตั้งแต่คณิตศาสตร์ไปจนถึงศิลปะ ทั้งยังรู้ว่าควรตอบกลับอย่างไร ถึงการโทรหาลูกค้า ที่ผ่านมา CPU ส่วนใหญ่จะใช้ชิปเดี่ยว แกนกลางก็เหมือนกับ CPU อีกตัวหนึ่งที่อาศัยอยู่ในแอป ชิปเดียวกัน ในฮาร์ดแวร์สมัยใหม่ คุณมักจะได้รับแกนประมวลผลมากกว่า 1 แกน ซึ่งให้พลังในการประมวลผลที่มากกว่า ลงในโทรศัพท์และแล็ปท็อป
GPU
![GPU](https://developer.chrome.com/static/blog/inside-browser-part1/image/gpu-ff4b6081ab9b1.png?authuser=5&hl=th)
กราฟิกหาก - หรือ GPU คืออีกส่วนหนึ่งของคอมพิวเตอร์ สิ่งที่ต่างจาก CPU GPU สามารถจัดการงานง่ายๆ ได้ดี แต่ทำงานในหลายแกนพร้อมกันได้ เป็นชื่อ กล่าวไว้ว่า มันเกิดขึ้นครั้งแรกเพื่อจัดการกับกราฟิก นั่นเป็นเพราะเหตุใดในบริบทของกราฟิก "การใช้ GPU" หรือ "GPU-back" การแสดงผลที่รวดเร็วและการโต้ตอบที่ราบรื่น ในช่วงไม่กี่ปีที่ผ่านมา การประมวลผลที่เร่งผ่าน GPU ทำให้มีการประมวลผล เพิ่มขึ้นเรื่อยๆ ใน GPU เพียงอย่างเดียว
เมื่อคุณเริ่มแอปพลิเคชันในคอมพิวเตอร์หรือโทรศัพท์ CPU และ GPU เป็นตัวขับเคลื่อน แอปพลิเคชัน โดยปกติแล้ว แอปพลิเคชันจะทำงานบน CPU และ GPU โดยใช้กลไกที่ผู้ดูแลระบบกำหนด ระบบปฏิบัติการ
![ฮาร์ดแวร์ ระบบปฏิบัติการ แอปพลิเคชัน](https://developer.chrome.com/static/blog/inside-browser-part1/image/hardware-os-application-d4c78524d5558.png?authuser=5&hl=th)
ดำเนินโปรแกรมเกี่ยวกับ Process และ Thread
![กระบวนการและชุดข้อความ](https://developer.chrome.com/static/blog/inside-browser-part1/image/process-threads-6fe2ce3d7b3e2.png?authuser=5&hl=th)
อีกแนวคิดหนึ่งที่ควรทำความเข้าใจก่อนเข้าสู่สถาปัตยกรรมเบราว์เซอร์คือการประมวลผลและเทรด กระบวนการอาจหมายถึงโปรแกรมปฏิบัติการของแอปพลิเคชัน ชุดข้อความคือเรื่องราวที่ ภายในกระบวนการและดำเนินการส่วนหนึ่งในโปรแกรมของกระบวนการ
ระบบจะสร้างกระบวนการเมื่อคุณเริ่มต้นการสมัคร โปรแกรมอาจสร้างชุดข้อความเพื่อช่วยเหลือ ที่ใช้ได้ผล แต่ก็เป็นขั้นตอนที่ไม่บังคับ ระบบปฏิบัติการจะให้ "แผ่นพื้น" ของกระบวนการ ของหน่วยความจำในการทำงาน และสถานะแอปพลิเคชันทั้งหมดจะถูกเก็บไว้ในพื้นที่หน่วยความจำส่วนตัวนั้น เมื่อคุณปิด กับแอปพลิเคชัน กระบวนการดังกล่าวจะหายไปและระบบปฏิบัติการจะเพิ่มหน่วยความจำให้
กระบวนการจะขอให้ระบบปฏิบัติการเริ่มขั้นตอนอื่นเพื่อเรียกใช้งานอื่น เมื่อใด ระบบจะจัดสรรหน่วยความจำส่วนต่างๆ ให้กับกระบวนการใหม่ หากมีสองขั้นตอนที่จำเป็น สามารถทำได้โดยใช้การเข้าถึง) แอปพลิเคชันจำนวนมาก ได้รับการออกแบบมาให้ทำงานในลักษณะนี้ เพื่อที่ว่ากระบวนการของพนักงานไม่ตอบสนองสามารถเริ่มทำงานใหม่ได้ โดยไม่หยุดกระบวนการอื่นๆ ที่ทำงานอยู่ในส่วนต่างๆ ของแอปพลิเคชัน
สถาปัตยกรรมของเบราว์เซอร์
แล้วเว็บเบราว์เซอร์สร้างขึ้นโดยใช้กระบวนการและเทรดได้อย่างไร นั่นอาจเป็นหนึ่งกระบวนการที่มี เทรดที่ต่างกัน หรือกระบวนการต่างๆ มากมาย โดยมีเธรด 2-3 อันสื่อสารผ่าน IPC
![สถาปัตยกรรมเบราว์เซอร์](https://developer.chrome.com/static/blog/inside-browser-part1/image/browser-architecture-9d143004c2a63.png?authuser=5&hl=th)
สิ่งสำคัญที่ควรทราบก็คือสถาปัตยกรรมที่แตกต่างกันเหล่านี้คือรายละเอียดการใช้งาน ไม่มีข้อกำหนดมาตรฐานเกี่ยวกับวิธีการสร้างเว็บเบราว์เซอร์ การทำงานของเบราว์เซอร์อย่างหนึ่งอาจ แตกต่างจากอีกรายการอย่างสิ้นเชิง
เพื่อประโยชน์ของบล็อกนี้ เราใช้สถาปัตยกรรมล่าสุดของ Chrome ตามที่อธิบายไว้ในรูปที่ 8
ทางด้านบนจะเป็นกระบวนการของเบราว์เซอร์ที่ประสานกับกระบวนการอื่นๆ ที่จัดการความแตกต่าง ของแอปพลิเคชัน สำหรับกระบวนการแสดงผล จะมีการสร้างและมอบหมายหลายกระบวนการให้กับ แต่ละแท็บ เมื่อไม่นานมานี้ Chrome ได้ให้แต่ละแท็บดำเนินการเมื่อทำได้ แต่จะพยายามให้ กระบวนการของแต่ละเว็บไซต์ รวมถึง iframe (ดูการแยกเว็บไซต์)
![สถาปัตยกรรมเบราว์เซอร์](https://developer.chrome.com/static/blog/inside-browser-part1/image/browser-architecture-998609758999a.png?authuser=5&hl=th)
กระบวนการใดที่ควบคุมสิ่งนั้น
ตารางต่อไปนี้อธิบายกระบวนการของ Chrome แต่ละรายการและสิ่งที่ Chrome ควบคุม
กระบวนการและสิ่งที่ควบคุม | |
---|---|
เบราว์เซอร์ |
ควบคุม "chrome" ในแอปพลิเคชัน รวมถึงแถบที่อยู่ บุ๊กมาร์ก กลับและ
ปุ่มไปข้างหน้า ยังจัดการส่วนที่มองไม่เห็นซึ่งเป็นสิทธิ์เฉพาะบุคคลของเว็บเบราว์เซอร์ เช่น คำขอเครือข่ายและการเข้าถึงไฟล์ |
โปรแกรมร่างภาพ | ควบคุมทุกอย่างภายในแท็บที่แสดงเว็บไซต์ |
ปลั๊กอิน | ควบคุมปลั๊กอินที่เว็บไซต์ใช้ เช่น Flash |
GPU | จัดการงาน GPU แบบแยกออกจากกระบวนการอื่นๆ แยกเป็นอีกกระบวนการหนึ่ง เนื่องจาก GPU จัดการคำขอจากหลายแอปและวาดลงในพื้นผิวเดียวกัน |
![กระบวนการของ Chrome](https://developer.chrome.com/static/blog/inside-browser-part1/image/chrome-processes-79aaecca78d23.png?authuser=5&hl=th)
มีกระบวนการอื่นๆ เช่น กระบวนการส่วนขยายและกระบวนการยูทิลิตี หากคุณต้องการดู จำนวนกระบวนการที่ทำงานอยู่ใน Chrome คลิกไอคอนเมนูตัวเลือก
ที่มุมขวาบน ให้เลือกเครื่องมือเพิ่มเติม จากนั้นเลือก เลือกตัวจัดการงาน การดำเนินการนี้จะเปิดหน้าต่างที่มีรายการกระบวนการที่ทำงานอยู่ในปัจจุบัน และปริมาณ CPU/หน่วยความจำที่ใช้ประโยชน์ของสถาปัตยกรรมแบบหลายกระบวนการใน Chrome
ก่อนหน้านี้ ฉันบอกว่า Chrome ใช้กระบวนการแสดงผลหลายตัว ในกรณีที่ง่ายที่สุด คุณสามารถ สมมติว่าแต่ละแท็บมีกระบวนการของโหมดแสดงภาพของตัวเอง สมมติว่าคุณมีแท็บเปิดอยู่ 3 แท็บและแต่ละแท็บทำงานอยู่ ด้วยกระบวนการแสดงผล อิสระ
หากมีแท็บใดแท็บหนึ่งไม่ตอบสนอง คุณสามารถปิดแท็บที่ไม่ตอบสนองและย้ายไปตำแหน่งอื่นขณะคงสถานะดังกล่าวไว้ แท็บอื่นๆ ที่ใช้งานอยู่ หากแท็บทั้งหมดทํางานอยู่ในกระบวนการเดียว เมื่อแท็บหนึ่งไม่ตอบสนอง แท็บต่างๆ ไม่ตอบสนอง เศร้าจัง
![โหมดแสดงภาพหลายหน้าจอสำหรับแท็บ](https://developer.chrome.com/static/blog/inside-browser-part1/image/multiple-renderer-tabs-c29a1fd34d4d.png?authuser=5&hl=th)
ข้อดีอีกอย่างหนึ่งของการแยกงานของเบราว์เซอร์ออกเป็นหลายๆ กระบวนการคือการรักษาความปลอดภัยและ แซนด์บ็อกซ์ เนื่องจากระบบปฏิบัติการมีช่องทางในการจำกัดกระบวนการ สิทธิ์ต่างๆ เบราว์เซอร์ สามารถแซนด์บ็อกซ์กระบวนการบางอย่างจากบางฟีเจอร์ได้ เช่น เบราว์เซอร์ Chrome จะจำกัด การเข้าถึงไฟล์ที่กำหนดเองสำหรับกระบวนการต่างๆ ที่จัดการอินพุตของผู้ใช้ที่กำหนดเอง เช่น กระบวนการแสดงผล
เนื่องจากกระบวนการต่างๆ มีพื้นที่หน่วยความจำส่วนตัวของตัวเอง จึงมักจะมีสำเนาของสิ่งร่วม (เช่น V8 ซึ่งเป็นเครื่องมือ JavaScript ของ Chrome) ซึ่งหมายความว่าจะใช้หน่วยความจำมากขึ้นเนื่องจาก และไม่สามารถแชร์ในลักษณะเดียวกับที่แท็กเหล่านั้นเป็นชุดข้อความภายในกระบวนการเดียวกัน เพื่อประหยัดหน่วยความจำ Chrome จะจำกัดจำนวนกระบวนการที่สามารถสร้างหน่วยความจำได้ ขีดจำกัดจะแตกต่างกันไปตามหน่วยความจำและพลังงานของ CPU ที่อุปกรณ์มี แต่การใช้งาน Chrome ถึงขีดจำกัด ขีดจำกัดสูงสุด แท็บจะเริ่มเรียกใช้หลายแท็บจากเว็บไซต์เดียวกันในขั้นตอนเดียว
ประหยัดหน่วยความจำมากขึ้น - การให้บริการใน Chrome
เราใช้วิธีการเดียวกันนี้กับกระบวนการของเบราว์เซอร์ Chrome กำลังอยู่ระหว่างการเปลี่ยนแปลงสถาปัตยกรรมเป็น เรียกใช้แต่ละส่วนของโปรแกรมเบราว์เซอร์เป็นบริการที่สามารถแบ่งออกเป็นกระบวนการที่แตกต่างกัน หรือรวมกันเป็นรายการเดียว
แนวคิดทั่วไปคือเมื่อ Chrome ทำงานบนฮาร์ดแวร์ที่มีประสิทธิภาพ จะแยกบริการแต่ละอย่างออกเป็น กระบวนการต่างๆ ทำให้มีความเสถียรมากกว่า แต่หากใช้งานบนอุปกรณ์ที่มีข้อจำกัดด้านทรัพยากร Chrome รวมบริการต่างๆ ไว้ในกระบวนการเดียวเพื่อประหยัดพื้นที่หน่วยความจำ มีการรวมแนวทางที่คล้ายกัน กระบวนการที่ใช้หน่วยความจำน้อยลงถูกใช้งานบนแพลตฟอร์มอย่าง Android ก่อนที่จะมีการเปลี่ยนแปลงนี้
กระบวนการแสดงผลต่อเฟรม - การแยกเว็บไซต์
การแยกเว็บไซต์คือ แนะนำใน Chrome ซึ่งเรียกใช้กระบวนการแสดงผลแยกต่างหากสำหรับ iframe แบบข้ามเว็บไซต์แต่ละรายการ เรากำลังพูดถึงกระบวนการแสดงผล 1 รายการต่อรูปแบบแท็บ ซึ่งช่วยให้สามารถ iframe จะทำงานในกระบวนการของโหมดแสดงภาพเดียวที่มีการแชร์พื้นที่หน่วยความจำระหว่างหลายๆ เว็บไซต์ การเรียกใช้ a.com และ b.com ในกระบวนการแสดงผลเดียวกันอาจดูไม่มีปัญหา นโยบายต้นทางเดียวกัน เป็นรูปแบบความปลอดภัยหลักของเว็บ ช่วยให้มั่นใจว่าเว็บไซต์หนึ่งจะเข้าถึงข้อมูลจากเว็บไซต์อื่นๆ ไม่ได้ โดยไม่ได้รับความยินยอม การหลบเลี่ยงนโยบายนี้เป็นเป้าหมายหลักของการโจมตีด้านความปลอดภัย การแยกกระบวนการเป็นวิธีที่มีประสิทธิภาพที่สุดในการแยกเว็บไซต์ ด้วย Meltdown และ Spectre ก็ยิ่งชัดเจนมากขึ้นว่าเราจำเป็นต้องแยกเว็บไซต์โดยใช้กระบวนการ เมื่อเปิดใช้การแยกเว็บไซต์บนเดสก์ท็อปโดยค่าเริ่มต้นตั้งแต่ Chrome 67 เป็นต้นไป iframe แบบข้ามเว็บไซต์แต่ละรายการในแท็บ ก็จะมีขั้นตอนของโหมดแสดงภาพแยกต่างหาก
![การแยกเว็บไซต์](https://developer.chrome.com/static/blog/inside-browser-part1/image/site-isolation-2521dc96bb823.png?authuser=5&hl=th)
การเปิดใช้การแยกเว็บไซต์ใช้ความพยายามด้านวิศวกรรมมาหลายปี การแยกเว็บไซต์ไม่ใช่เรื่องง่าย การกำหนดกระบวนการแสดงผลที่แตกต่างกัน โดยจะเปลี่ยนวิธีการสื่อสารของ iframe โดยพื้นฐาน อื่นๆ การเปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าที่มี iframe ที่ทำงานอยู่ในกระบวนการที่แตกต่างกันหมายความว่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ต้อง ใช้งานเบื้องหลังเพื่อทำให้งานดูราบรื่น แม้กระทั่งการใช้ Ctrl+F อย่างง่าย เพื่อค้นหา คำในหน้าเว็บหมายถึงการค้นหาผ่านขั้นตอนของโหมดแสดงภาพต่างๆ คุณดูสาเหตุที่ วิศวกรเบราว์เซอร์พูดถึงการเปิดตัวการแยกเว็บไซต์ในฐานะเป้าหมายสำคัญ
สรุป
ในโพสต์นี้ เราได้พูดถึงมุมมองระดับสูงของสถาปัตยกรรมเบราว์เซอร์และพูดถึงประโยชน์ของ แบบหลายกระบวนการ เรายังครอบคลุมถึงการให้บริการและการแยกเว็บไซต์ใน Chrome ที่ เกี่ยวข้องอย่างลึกซึ้งกับสถาปัตยกรรมแบบหลายกระบวนการ ในโพสต์ถัดไป เราจะเริ่มเจาะลึกถึง จะเกิดขึ้นระหว่างกระบวนการเหล่านี้และชุดข้อความเพื่อแสดงเว็บไซต์
คุณชอบโพสต์นี้ไหม หากคุณมีคำถามหรือข้อเสนอแนะเกี่ยวกับโพสต์ในอนาคต โปรด ฟังคำตอบจากคุณได้ที่ @kosamari ทาง Twitter