1. เอนจินการเรนเดอร์ Blink คืออะไร
Blink คือเอนจินการเรนเดอร์เบราว์เซอร์โอเพนซอร์สที่ Google พัฒนาขึ้นโดยแยกจาก WebKit ในปี 2013 ในฐานะเอนจินการจัดวางหลักของ Chrome มีหน้าที่รับผิดชอบในสิ่งต่อไปนี้:
- การประมวลผล DOM: การสร้าง Document Object Model จาก HTML
- การคำนวณสไตล์: การแปลง CSS เป็น CSS Object Model
- การจัดวาง: การกำหนดตำแหน่งและขนาดขององค์ประกอบ
- การระบายสี: การแปลงการจัดวางเป็นพิกเซลจริง
- การรวมองค์ประกอบ: การปรับปรุงการเรนเดอร์ให้เหมาะสมผ่านการจัดการเลเยอร์
ส่วนประกอบทางสถาปัตยกรรมหลัก:
- สถาปัตยกรรมแบบหลายกระบวนการ (กระบวนการเรนเดอร์)
- การเรนเดอร์ iframe นอกกระบวนการ
- การแยกอินสแตนซ์ของเว็บไซต์ที่แตกต่างกัน
2. Blink เทียบกับเอนจินการเรนเดอร์อื่นๆ
เอนจินการเรนเดอร์หลักของเว็บมีความแตกต่างกันในด้านสถาปัตยกรรมและวิธีการทำงาน:
| คุณสมบัติ | Blink | WebKit | Gecko | Servo |
|---|---|---|---|---|
| ผู้พัฒนา | Apple | Mozilla | Mozilla | |
| ภาษา | C++ | C++ | C++ | Rust |
| โมเดลเธรด | Multi-process | Multi-thread | Multi-process | Multi-thread |
| การรองรับ CSS | Experimental | Stable | Complete | Experimental |
| JavaScript | V8 | JavaScriptCore | SpiderMonkey | SpiderMonkey |
| การใช้งาน GPU | Advanced | Moderate | Basic | Experimental |
ต่างจาก WebKit ที่จัดการพอร์ตแพลตฟอร์มทั้งหมดแบบรวมศูนย์ Blink จะมอบหมายโค้ดเฉพาะแพลตฟอร์มให้กับผู้จำหน่ายแต่ละราย
3. โมดูลการทำงานของ Blink
Blink ประกอบด้วยระบบย่อยที่สำคัญหลายส่วน:
การโหลดเอกสาร
- ตัวแยกวิเคราะห์ HTML
- ตัวสแกนการโหลดล่วงหน้า
- ตัวดึงทรัพยากร
สไตล์และการจัดวาง
- เอนจินสไตล์ (ตัวสร้าง CSSOM)
- การสร้างโครงสร้างการจัดวาง
- การประมาณค่าคุณสมบัติ CSS
ไปป์ไลน์กราฟิก
- โครงสร้างเลเยอร์การระบายสี
- การรวมองค์ประกอบที่เร่งด้วย GPU
- การแรสเตอร์ (Skia)
การรวม JavaScript
- การผูก DOM
- ระบบเหตุการณ์
- เลเยอร์การโต้ตอบ V8
ส่วนประกอบเว็บ
- Shadow DOM
- Custom Elements
- HTML Templates
4. บทบาทของ Blink ในสถาปัตยกรรมเบราว์เซอร์
ในฐานะแกนหลักของการเรนเดอร์ในเบราว์เซอร์ที่ใช้ Chromium (Chrome, Edge, Opera):
- ขอบเขตความปลอดภัย: ทำงานในกระบวนการเรนเดอร์ที่แยกต่างหากพร้อมกับการแซนด์บ็อกซ์
- ศูนย์กลางประสิทธิภาพ: จัดการการเพิ่มประสิทธิภาพเส้นทางการเรนเดอร์ที่สำคัญ
- การนำมาตรฐานไปใช้: ใช้ข้อกำหนดแพลตฟอร์มเว็บมากกว่า 1,000 รายการ
- การจัดการหน่วยความจำ: ใช้ partition alloc เพื่อประสิทธิภาพ
- คุณสมบัติทดลอง: มาพร้อมกับ Origin Trials สำหรับ API ใหม่
สถาปัตยกรรมของ Blink ช่วยให้ Chrome รองรับการทดสอบ CSS พร้อมกันได้มากกว่า 20,000 รายการ ในขณะที่ยังคงประสิทธิภาพการเรนเดอร์ 60fps ไว้ได้
คุณอาจชอบ
