ウェブの特別な力の一つは、そのコンポーザビリティです。ウェブページには、複数のオリジンから取得されたさまざまなリソースが含まれている場合があります。
Blink は、Chrome、Android WebView、Microsoft Edge、Opera、Brave などの Chromium ベースのブラウザのレンダリング エンジンとして機能します。
レンダリング エンジンは、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 は、JavaScript コードと WebAssembly コードを解析して実行するために、Chromium プロジェクトによって開発されたオープンソース エンジンである V8 を使用します。
V8 を使用すると、デベロッパーは JavaScript または WebAssembly コードを使用して、基盤となるブラウザの機能にアクセスできます。たとえば、Document Object Model を操作します。これは、Blink が HTML コードからビルドするドキュメントの内部表現です。
V8 は、JavaScript 標準（ECMAScript）に従って JavaScript を処理します。
標準へのレンダリング
V8 は、ECMAScript と呼ばれる JavaScript 標準に従って 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 でインターフェースを定義したら、エンジニアはインターフェース呼び出しに応答する実装を構築できます。
Chromium ソースの html_image_element.idlサードパーティ ライブラリ
Blink は複数のサードパーティ ライブラリを使用しています。たとえば、WebGL はインタラクティブな 2D および 3D グラフィックのレンダリングに使用されます。
WebGL などのライブラリは高度に最適化され、慎重にテストされています。これらのライブラリにより、自前で開発しなくても、Blink で重要な機能や機能を利用できます。WebGL IDL が定義され、Blink エンジニアがそのウェブ インターフェースを、さまざまな要素のレンダリングに使用されるバックエンドのコードとライブラリに接続します。
WebGL の動作を確認するには、WebGL を使用するフラクタル レンダリング アプリ Fractious をご覧ください。
クロス プラットフォーム レンダリング
Chrome は、すべてのオペレーティング システムとデバイスで Blink を使用しているのでしょうか？
iOS と iPadOS では、Chrome はレンダリング エンジンとして WebKit を使用します。WebKit は、1998 年にさかのぼる別のプロジェクト KDE のフォークでした。実際、Safari と Chromium はどちらも当初は WebKit をベースにしていました。現在、Safari と Apple エコシステム内のすべてのブラウザは、Apple の App Store 要件に従って WebKit を使用しています。
1 つのコードベースで 2 つの別々のアーキテクチャを維持することが問題になってきたため、Chromium プロジェクトでは、時間の経過とともに別のマルチプロセス ソフトウェア アーキテクチャが開発されました。
また、Chromium では WebKit に組み込まれていない機能を使用したいと考えていました。そこで、バージョン 28 以降、Chromium エンジニアは独自のレンダリング エンジンの開発を開始することにしました。WebKit からコードをフォークし、Blink と名付けました。Blink という名前は、Netscape Navigator ブラウザでテキストの点滅をオン / オフにするために使用されていた（あまり好まれなかった）<blink> タグにちなんで付けられたという噂があります。
まとめると、Chrome、Microsoft Edge、Opera、Vivaldi、Arc、Brave などの Chromium ベースのブラウザとフレームワークは Blink を使用します。Safari やその他の一部のブラウザは WebKit を使用します。また、Chrome を含む iOS と iPadOS のすべてのブラウザも WebKit を使用します。Firefox は Gecko というレンダリング エンジンを使用します。
次のステップ
Blink インテントとはをご覧ください。