什麼是 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

為了剖析及執行 JavaScript 和 WebAssembly 程式碼，Blink 會使用 V8，這是由 Chromium 專案開發的開放原始碼引擎。

V8 可讓開發人員使用 JavaScript 或 WebAssembly 程式碼存取底層瀏覽器的功能。例如：用於操作Document Object Model，這是 Blink 從 HTML 程式碼建構的文件內部表示法。

V8 會根據 JavaScript 標準 (稱為 ECMAScript) 處理 JavaScript。

依標準算繪

V8 會依據 JavaScript 標準 (稱為 ECMAScript) 處理 JavaScript。Blink 等轉譯引擎的設計目的，是為了以互通方式實作網路標準。無論使用哪種瀏覽器，開發人員和使用者都能確保網頁運作良好，這要歸功於網路標準。

Blink 遵循網路標準中定義的瀏覽器和語言功能規格，包括 HTML、CSS 和 DOM。

HTML 和 DOM

HTML 標準定義了瀏覽器工程師應如何實作 HTML 元素。每個 HTML 元素的規格都包含一個章節，定義該元素的 DOM 介面。這項功能會詳細說明瀏覽器應如何實作 JavaScript，以便以跨裝置和平台的標準化方式與元素互動。

介面規格是以 WebIDL 編寫：Web 介面定義語言。以下 WebIDL 是 HTML 標準中 HTMLImageElement 的定義。

[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 可用於算繪互動式 2D 和 3D 圖形。

WebGL 等程式庫經過高度最佳化及仔細測試。讓 Blink 可以存取重要功能，而無需重新發明輪子。WebGL IDL 已定義，Blink 工程師將該網頁介面連結至後端的程式碼和程式庫，用於轉譯許多不同的元素。

如要查看 WebGL 的實際運作情形，請試試使用 WebGL 的 Fractious 分形算繪應用程式。

跨平台轉譯

您可能會想知道，Chrome 是否會在所有作業系統和裝置上使用 Blink？

在 iOS 和 iPadOS 上，Chrome 會使用 WebKit 做為轉譯引擎。WebKit 其實是另一個專案的衍生版本，也就是 KDE，這個專案可追溯至 1998 年。事實上，Safari 和 Chromium 最初都是以 WebKit 為基礎。根據 Apple 的App Store 規定，目前 Safari 和 Apple 生態系統中的所有瀏覽器都使用 WebKit。

隨著時間過去，Chromium 專案開發出不同的多程序軟體架構，因為在一個程式碼集中維護兩個獨立的架構會造成問題。

此外，Chromium 希望使用 WebKit 中未建構的功能。因此，從 28 版開始，Chromium 工程師決定開始著手開發自己的轉譯引擎。他們從 WebKit 分支程式碼，並將其命名為 Blink。據傳，Blink 的名稱源自 Netscape Navigator 瀏覽器中可用於讓文字閃爍的 (不太受歡迎的) <blink> 標記。

總結來說：Chrome、Microsoft Edge、Opera、Vivaldi、Arc、Brave 和其他採用 Chromium 的瀏覽器和架構都使用 Blink。Safari 和其他一些瀏覽器都會使用 WebKit，包括 iOS 和 iPadOS 上的所有瀏覽器 (包括 Chrome)。Firefox 使用名為 Gecko 的轉譯引擎。

後續步驟

請參閱「什麼是 Blink 意圖？」一文。