Blink คืออะไร

Sam Dutton

ความสามารถพิเศษอย่างหนึ่งของเว็บคือการประกอบ หน้าเว็บมีทรัพยากรที่หลากหลาย ซึ่งอาจมาจากแหล่งที่มาหลายแห่ง

Blink เป็นเครื่องมือแสดงผลสำหรับเบราว์เซอร์ที่ใช้ Chromium ซึ่งรวมถึง Chrome, Android WebView, Microsoft Edge, Opera และ Brave

เครื่องมือแสดงผลคือคอมโพเนนต์ของเว็บเบราว์เซอร์ที่เปลี่ยนโค้ด HTML, CSS และ JavaScript รวมถึงรูปภาพและทรัพยากรอื่นๆ เป็นหน้าเว็บที่คุณดูและโต้ตอบได้

Blink แสดงผลหน้าเว็บอย่างไร

Blink จะเริ่มกระบวนการแสดงผลโดยรวบรวมทรัพยากรที่จำเป็นทั้งหมด เช่น HTML, CSS, JavaScript, วิดีโอ และรูปภาพ Blink จะจัดการการโต้ตอบกับสแต็กเครือข่ายใน Chromium และระบบปฏิบัติการที่เกี่ยวข้องเพื่อดึงข้อมูลเหล่านี้

ทันทีที่โหลด CSS และ HTML แล้ว Blink จะเปลี่ยนรูปแบบโค้ดนั้นจากรูปแบบข้อความให้อยู่ในรูปแบบที่ใช้งานได้ ซึ่งเรียกว่าการแยกวิเคราะห์ นอกจากนี้ ยังต้องแยกวิเคราะห์และประมวลผล JavaScript ด้วย

เมื่อดำเนินการเสร็จแล้ว Blink จะเริ่มจัดวางและแสดงหน้าเว็บที่คุณดูและโต้ตอบได้ กระบวนการนี้เรียกว่าการแสดงผล

แผนภาพต่อไปนี้แสดงขั้นตอนในไปป์ไลน์ของงานการแสดงผล รวมถึงคอมโพเนนต์ กระบวนการ และทรัพยากรที่เกี่ยวข้องในแต่ละขั้นตอน Blink มีงานต้องทำมากมาย

แสดงผลกราฟิก

Blink ใช้เครื่องมือกราฟิก Skia แบบโอเพนซอร์สเพื่อโต้ตอบกับฮาร์ดแวร์กราฟิกพื้นฐานของคอมพิวเตอร์หรืออุปกรณ์เคลื่อนที่

Skia มี API ทั่วไปที่ทำงานร่วมกับแพลตฟอร์มฮาร์ดแวร์และซอฟต์แวร์ต่างๆ ได้ โดยทำหน้าที่เป็นเครื่องมือกราฟิกสำหรับ Google Chrome และผลิตภัณฑ์อื่นๆ อีกมากมาย

Skia ใช้ไลบรารีกราฟิกต่างๆ ซึ่งรวมถึง OpenGL, Vulkan และ DirectX แทนที่จะพยายามรองรับระบบปฏิบัติการและอุปกรณ์ต่างๆ ขณะตามทันการเปลี่ยนแปลงของแพลตฟอร์ม ไลบรารีที่ Skia ใช้จะขึ้นอยู่กับแพลตฟอร์มที่ใช้งาน เช่น Android บนอุปกรณ์เคลื่อนที่หรือ Windows บนเดสก์ท็อป

แยกวิเคราะห์และเรียกใช้ JavaScript

Blink ใช้ V8 ซึ่งเป็นเครื่องมือโอเพนซอร์สที่พัฒนาโดยโปรเจ็กต์ Chromium เพื่อแยกวิเคราะห์และเรียกใช้โค้ด JavaScript และ WebAssembly

V8 ช่วยให้นักพัฒนาซอฟต์แวร์สามารถใช้โค้ด JavaScript หรือ WebAssembly เพื่อเข้าถึงความสามารถของเบราว์เซอร์ที่ใช้งานอยู่ เช่น เพื่อจัดการDocument Object Model ซึ่งเป็นการแสดงเอกสารภายในที่ Blink สร้างขึ้นจากโค้ด HTML

V8 จะประมวลผล JavaScript ตามมาตรฐาน JavaScript หรือที่เรียกว่า ECMAScript

การแสดงผลตามมาตรฐาน

V8 จะประมวลผล JavaScript ตามมาตรฐาน JavaScript หรือที่เรียกว่า ECMAScript เครื่องมือแสดงผลอย่าง Blink ได้รับการออกแบบมาเพื่อใช้งานมาตรฐานเว็บร่วมกันได้ มาตรฐานเว็บช่วยให้นักพัฒนาซอฟต์แวร์และผู้ใช้ปลายทางมั่นใจได้ว่าหน้าเว็บจะทํางานได้ดี ไม่ว่าผู้ใช้จะใช้เบราว์เซอร์ใดก็ตาม

Blink เป็นไปตามข้อกำหนดสำหรับเบราว์เซอร์และฟีเจอร์ภาษาที่ระบุไว้ในมาตรฐานเว็บ ซึ่งรวมถึง HTML, CSS และ DOM

HTML และ DOM

มาตรฐาน HTML กำหนดวิธีที่วิศวกรเบราว์เซอร์ควรใช้องค์ประกอบ HTML ข้อกําหนดเฉพาะสําหรับองค์ประกอบ HTML แต่ละรายการมีส่วนที่กําหนดอินเทอร์เฟซ DOM สําหรับองค์ประกอบนั้น รายละเอียดนี้อธิบายวิธีที่เบราว์เซอร์ควรใช้ JavaScript เพื่อให้โต้ตอบกับองค์ประกอบในลักษณะที่เป็นมาตรฐานในอุปกรณ์และแพลตฟอร์มต่างๆ

ข้อกําหนดของอินเทอร์เฟซเขียนด้วย WebIDL: ภาษาที่ใช้สื่อสารข้อมูลระหว่างคอมโพเนนต์ของเว็บ (Web Interface Definition Language) WebIDL ต่อไปนี้เป็นส่วนหนึ่งของคำจำกัดความของ HTMLImageElement ในมาตรฐาน HTML

[Exposed=Window,
 LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned
long height)]
interface HTMLImageElement : HTMLElement {
 [HTMLConstructor] constructor();

 [CEReactions] attribute DOMString alt;
 [CEReactions] attribute USVString src;
 [CEReactions] attribute USVString srcset;
 [CEReactions] attribute DOMString sizes;
 [CEReactions] attribute DOMString? crossOrigin;
 [CEReactions] attribute DOMString useMap;
 [CEReactions] attribute boolean isMap;
 [CEReactions] attribute unsigned long width;
 [CEReactions] attribute unsigned long height;
 readonly attribute unsigned long naturalWidth;
 readonly attribute unsigned long naturalHeight;
 readonly attribute boolean complete;
 readonly attribute USVString currentSrc;
 [CEReactions] attribute DOMString referrerPolicy;
 [CEReactions] attribute DOMString decoding;
 [CEReactions] attribute DOMString loading;
 [CEReactions] attribute DOMString fetchPriority;

 Promise<undefined> decode();

 // also has obsolete members
};

WebIDL เป็นวิธีมาตรฐานในการอธิบายอินเทอร์เฟซที่ใช้งานได้ เช่น อินเทอร์เฟซที่ประกอบกันเป็นมาตรฐานเว็บส่วนใหญ่

หากต้องการใช้ฟีเจอร์ วิศวกรจะใส่โค้ด WebIDL นั้นไว้ในไฟล์ และ Blink จะเปลี่ยนรูปแบบโดยอัตโนมัติเพื่อให้อินเทอร์เฟซสำหรับนักพัฒนาแอปสำหรับฟีเจอร์นั้น เมื่อกำหนดอินเทอร์เฟซด้วย WebIDL แล้ว วิศวกรจะสร้างการใช้งานที่ตอบสนองต่อการเรียกอินเทอร์เฟซได้

ไลบรารีของบุคคลที่สาม

Blink ใช้ไลบรารีของบุคคลที่สามหลายรายการ เช่น ใช้ WebGL เพื่อแสดงผลกราฟิก 2 มิติและ 3 มิติแบบอินเทอร์แอกทีฟ

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

หากต้องการดูการทำงานของ WebGL ให้ลองใช้แอปแสดงผลแบบแฟรกทัลอย่าง Fractious ซึ่งใช้ WebGL

การแสดงผลข้ามแพลตฟอร์ม

คุณอาจสงสัยว่า Chrome ใช้ Blink ในทุกที่ในทุกระบบปฏิบัติการและอุปกรณ์ไหม

ใน iOS และ iPadOS นั้น Chrome จะใช้ WebKit เป็นเครื่องมือแสดงผล WebKit เดิมเป็นโปรเจ็กต์ที่แยกมาจากโปรเจ็กต์อื่นอย่าง KDE ซึ่งเริ่มมาตั้งแต่ปี 1998 อันที่จริงแล้ว ทั้ง Safari และ Chromium นั้นพัฒนามาจาก WebKit ทั้งคู่ ปัจจุบัน Safari และเบราว์เซอร์ทั้งหมดในระบบนิเวศของ Apple ใช้ WebKit ตามข้อกําหนดของ App Store ของ Apple

เมื่อเวลาผ่านไป โปรเจ็กต์ Chromium ได้พัฒนาสถาปัตยกรรมซอฟต์แวร์แบบหลายกระบวนการขึ้นมาใหม่ เนื่องจากการดูแลรักษาสถาปัตยกรรม 2 แบบแยกกันในฐานโค้ดเดียวเริ่มมีปัญหา

นอกจากนี้ Chromium ยังต้องการใช้ฟีเจอร์ที่ไม่ได้สร้างไว้ใน WebKit ดังนั้น ตั้งแต่เวอร์ชัน 28 เป็นต้นไป วิศวกร Chromium จึงตัดสินใจเริ่มทํางานกับเครื่องมือแสดงผลของตนเอง โดยแยกโค้ดมาจาก WebKit และตั้งชื่อว่า Blink มีข่าวลือว่า Blink ตั้งชื่อตามแท็ก <blink> (ที่ไม่ค่อยมีคนชอบ) ที่มีอยู่ในเบราว์เซอร์ Netscape Navigator เพื่อทำให้ข้อความกะพริบ

โดยสรุปคือ Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave และเบราว์เซอร์และเฟรมเวิร์กอื่นๆ ที่ใช้ Chromium จะใช้ Blink Safari และเบราว์เซอร์อื่นๆ บางรุ่นใช้ WebKit รวมถึงเบราว์เซอร์ทั้งหมดใน iOS และ iPadOS ซึ่งรวมถึง Chrome Firefox ใช้เครื่องมือแสดงผลที่เรียกว่า Gecko

ขั้นตอนถัดไป

ดูหัวข้อBlink Intent คืออะไร