😸

レンダリングエンジンの役割

2023/06/04に公開

CSS

はじめに

エンジニアに向けて学習しているしょみーと申します！
今回はブラウザの心臓部分であるレンダリングエンジンについて説明していきます。
レンダリングエンジンを理解するにはブラウザの仕組みの理解が必要になるので、まずそちらから説明していきます！
レンダリングエンジンを理解して、ブラウザについての理解をしていきましょう！

ブラウザの仕組み

Webブラウザとは

そんなもん知ってるよ！っという方が大半だと思いますが、一応説明します。
Webブラウザ(browser)とはインターネット上にあるウェブサイトを閲覧するためのソフトウェアのことです。
それはHTML、CSS、JavaScriptなどのウェブ技術を解釈して、ウェブページを読み込み、解釈し、それを視覚的に表現する役割を担っています。例えば、Googleのホームページを開くとき、ブラウザはGoogleのサーバーからHTML, CSS, JavaScriptのコードを取得し、それらを解釈・実行してあなたが見ているページを表示します。
ちなみに英語で「browse」には様々な意味があります。

本、雑誌など見る。拾い読みをする
かじる、食い散らかす
ここでは、1の意味から語尾にrをつけてWebブラウザがきています。
このように英語から読み解くと理解しやすいので説明させていただきました。
現在のWebブラウザには、みなさんお馴染みのようにCromeやSafari、Firefoxといったものがあります。

ブラウザの主な機能

ブラウザには以下のような主な機能があります。

ウェブページ表示
ウェブページのHTML, CSS, JavaScriptを解釈し、利用者が理解できる形に表示します。たとえば、あなたがWikipediaのページを見ているとき、ブラウザはそのページのHTML（文章やリンクの構造）、CSS（色やレイアウト）、JavaScript（インタラクティブな機能）を読み込んで表示しています。
ブックマーク
利用者が後で参照できるように、特定のウェブページを保存します。例えば、よく訪れるニュースサイトやお気に入りのブログをブックマークしておけば、アドレスを打つ手間が省けます。
履歴
過去に訪れたウェブページのリストを管理します。これにより、何日前に見たあの記事をすぐに見つけることができます。
ダウンロード管理
利用者がインターネットからダウンロードしたファイルを管理します。ダウンロードしたPDFや画像を見つけるのに役立ちます。
拡張機能
利用者がブラウザの機能をカスタマイズできるように、プラグインやアドオンを追加します。これにより、ブラウザは単なるウェブページのビューアーから、機能的なツールへと進化します。例えば、広告ブロックや翻訳ツールなどの拡張機能があります。

ブラウザの構造

それでは、ブラウザがどのような構造で動いているのか見ていきましょう。ブラウザの主なコンポーネントには以下のものがあります。

ユーザインターフェイス
アドレスバーや戻る/進むボタン、ブックマークメニューなど、ユーザーと直接対話する部分です。これは、あなたがブラウザにURLを入力したり、ページをスクロールしたりするときに使っている部分です。
ブラウザエンジン
ユーザインターフェイスとレンダリングエンジンの間のアクションを制御します。例えば、あなたがアドレスバーにURLを入力しエンターキーを押すと、このブラウザエンジンがレンダリングエンジンに対して「このURLのページを取得して表示して」という指示を出します。
レンダリングエンジン
要求されたウェブページを表示します。HTMLとCSSを解析し、表示されるウェブページのコンテンツを構築します。例えば、取得したHTMLとCSSのコードから「この部分は大見出しで、赤色にする」といった情報を読み取り、それを実際に画面に描画します。
ネットワーキング
HTTPリクエストのようなネットワーク呼び出しに使用されます。これにはキャッシュやその他のHTTPリクエストを処理する機能も含まれます。ウェブページを取得するためにサーバーと通信を行う部分です。
JavaScriptインタプリタ
JavaScriptコードを解析して実行します。ウェブページに動きをつけるためには、この部分が欠かせません。
UIバックエンド
基本的なウィジェットの描画に使用されます。例えば、ウィンドウやボックスの描画です。これはプラットフォーム独立のインターフェイスで、実際のUI環境によって下層で描画します。
データストレージ
ブラウザはさまざまな種類のローカルストレージを提供します。例えば、クッキーやIndexedDB、WebSQL、localStorageなどです。これらは、ウェブサイトがユーザーの設定やログイン情報などを保存するために使用します。

レンダリングエンジンについて

ブラウザの仕組みについて簡単に説明したところで、ブラウザの構造の一つであるレンダリングエンジンについて詳しく説明していきます。冒頭に述べたように、レンダリングエンジンはブラウザの心臓部分であるように非常に重要です。どのように要求されたウェブページを表示するのか見ていきましょう。

レンダリングエンジンとは

レンダリングエンジンは、ブラウザがウェブページをどのように描画するかを決定する重要なコンポーネントです。それはウェブページのHTMLとCSSを解析し、それを視覚的に表現する形に変換します。ブラウザにより使用されるレンダリングエンジンは異なります。例えば、Google ChromeとOperaではBlinkエンジンを、FirefoxではGeckoエンジンを、そしてSafariではWebKitエンジンを使用しています。

メインフロー

レンダリングエンジンの動作フローを見てみましょう。ここで用いる例としては、ブラウザであるシンプルなウェブページ（例えば、H1タグで作られた大見出しと、パラグラフテキストを含むページ）を開くときのプロセスを考えてみましょう。

HTMLの解析とDOMツリーの構築
レンダリングエンジンが最初に行うことは、HTMLドキュメントを読み込み、各要素（タグ等）を解析し、それらをDOM（Document Object Model）ノードとして扱うことです。これらのノードはDOMツリーと呼ばれる形で組織されます。
例えば、以下のようなHTMLコードがあった場合

cssCopy code
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph.</p>
</body>

このコードは以下のようなDOMツリーに変換されます

cssCopy code
body
├── h1
│   └── "Welcome to My Website"
└── p
    └── "This is a paragraph."

CSSの解析とCSSOMツリーの構築
次に、ブラウザはCSSを解析します。CSSは、HTMLがどのように表示されるべきかを指定します。CSSもまた、CSSOM（CSS Object Model）ツリーという形で解析されます。このCSSOMツリーはDOMツリーと同様に、ウェブページのスタイル情報をツリー構造で保持します。
例えば、次のようなCSSがあった場合

cssCopy code
h1 {
  color: blue;
}
p {
  color: red;
}

このCSSは以下のようなCSSOMツリーに変換されます

cssCopy code
├── h1
│   └── color: blue
└── p
    └── color: red

DOMツリーとCSSOMツリーの結合
解析されたDOMツリーとCSSOMツリーは結合され、レンダリングツリーと呼ばれるものが作成されます。このレンダリングツリーは、ウェブページ上のすべての視覚的な要素を含みます。
レンダリングツリーのレイアウト
次に、ブラウザはレンダリングツリーを使って、各ノードが画面上でどこに配置されるべきかを計算します。このプロセスをレイアウト（またはリフロー）と呼びます。
レンダリングツリーの描画
最後に、各ノードがどのように見えるべきかが描画（またはペインティング）されます。この段階で、h1タグのテキストは青く、pタグのテキストは赤く描画されます。

以上がレンダリングエンジンの基本的な流れです。これは非常に単純化した説明で、実際にはこれらのプロセスはより複雑で、さまざまな最適化が行われますが、これはウェブブラウザがウェブページをどのようにレンダリングするかを理解する上での基本的なフレームワークです。

まとめ

レンダリングエンジンについて説明してきました。ただ、今回はブラウザの仕組みの一部です。理解するにはブラウザの構造にまとめたように他の要素の理解も必要です。