什麼是 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 算繪管道，箭頭表示各階段的進度。 — Blink 算繪管道具有資源載入器、指令碼 API 和 HTML/CSS 剖析功能。這個程序會經歷多個階段，最終在畫面上繪製像素。

算繪圖像

Blink 會使用開放原始碼的 Skia 圖形引擎，與電腦或行動裝置的底層圖形硬體互動。

Skia 提供可在各種硬體和軟體平台上運作的通用 API。Skia 是 Google Chrome 和許多其他產品的圖形引擎。

Skia 不會嘗試支援不同作業系統和裝置，同時跟上平台變化，而是使用圖形程式庫，包括 OpenGL、Vulkan 和 DirectX。Skia 使用的程式庫取決於執行的平台，例如行動裝置上的 Android 或桌機上的 Windows。

剖析及執行 JavaScript

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

開發人員可透過 V8 使用 JavaScript 或 WebAssembly 程式碼，存取基礎瀏覽器的功能。舉例來說，您可以操控文件物件模型，這是 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。

Fractious 是以 WebGL 為基礎的 Mandelbrot 集檢視器。 — 前往 Fractious 示範。

跨平台轉譯

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

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

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

此外，Chromium 想使用的功能並未建構到 WebKit 中。因此，Chromium 工程師決定從第 28 版開始，著手開發自己的算繪引擎。他們從 WebKit 分叉出程式碼，並命名為 Blink。據說 Blink 的命名由來是 Netscape Navigator 瀏覽器中 (不怎麼) 受歡迎的 <blink> 標記，這個標記可讓文字閃爍。

總而言之，Chrome、Microsoft Edge、Opera、Vivaldi、Arc、Brave 和其他採用 Chromium 的瀏覽器和架構都使用 Blink。Safari 和其他部分瀏覽器使用 WebKit，iOS 和 iPadOS 上的所有瀏覽器 (包括 Chrome) 也是如此。Firefox 使用名為 Gecko 的算繪引擎。

Chrome 和 Chromium

Blink 意圖