ブラウザのレンダリングエンジンとJavaScriptエンジン

みんな使っているWebブラウザ。特にブログをやっている人やサイトを運営している人であればその仕組を知っておくことで、レバレッジをかけられると思いませんか？

当然Webサイトは速く表示されるとユーザーとしてもストレスが無いため、ユーザー体験としてはベストです。

ということは、

回遊してもらえる→記事を見てもらえる→ユーザーが増える→サイトが成長する

という流れが作れるようになります。

TomoOne

もちろん、コンテンツがしっかりしていることが大大大前提です！

Contents is KINGです！

そんなブラウザの仕組みを見ていこうと思います。

といっても、ブラウザはGoogle ChromeやFirefox、Safari、Microsoft Edgeなど様々なものがあり、仕組みも複雑です。

なのでまずは、最初の概要や描画（レンダリング）の流れについて書いてみます。

レンダリングエンジン
1. レンダリングエンジンと、JavaScriptエンジン
  1. レンダリングエンジン
  2. JavaScriptエンジン
レンダリングの流れ
参考

レンダリングエンジン

現在使われているたくさんあるブラウザの中で処理されるHTML、CSS、JavaScriptはW3CやWHATWG、Ecma Internationalなどの標準化団体によって

「こういう共通ルールでやっていきましょう！」

というのがあります。

ただ、明文化されていない部分を処理するのは、各ブラウザによって異なってきます。

TomoOne

だから紛らわしいんだよね。。。

World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）は、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体。略称はW3C（ダブリュースリーシー）。
ティム・バーナーズ＝リーが創設し、率いている^[3]。このコンソーシアムには企業や団体が会員として加入し、専任スタッフと共にWorld Wide Webの標準策定を行っている。2014年1月26日現在、388の組織が会員として加入している^[2]。
W3Cはまた教育活動も行っており、ソフトウェアを開発してWebに関するオープンな議論の場を提供している。
HTML、XML、MathML、DOM等の規格を勧告。HTMLは、従来IETFでRFCとして標準化されていたが、HTML 3.2以降はW3Cへと引き継がれた。
XHTMLの規格に不満を持った企業等はW3Cに対抗するWHATWGという対抗団体を立ち上げているが、両団体はHTML5の策定にあたって協力関係にあり、WHATWGによって2004年に定められたWeb Applications 1.0にWeb Forms 2.0を取り入れたものがW3Cの専門委員会に採用され、W3Cより2008年1月22日にドラフト（草案）が発表された。
慶應義塾大学SFC研究所が中国を除くアジア圏を担当している。
Wikipedia

Web Hypertext Application Technology Working Group（WHATWG、ワットワーキンググループ、ワットダブルジー）は、HTMLと関連技術の開発をするためのコミュニティである。W3Cが策定したXHTMLや、W3Cがウェブ開発者の要望を軽視していることなどを不満に思ったApple、Mozilla、Operaの開発者たちによって2004年に結成された^[1]。2017年末にはMicrosoftも参加している。
W3Cの対抗組織として始まったWHATWGだが、徐々に影響力を強め、HTML5はWHATWGが提唱したものを元にW3Cが策定した^[2]。最終的には、W3CがHTMLとDOMの策定をやめ、WHATWGに協力を表明するにまで至っている^[3]。
Wikipedia

Ecmaインターナショナル（エクマ・インターナショナル、英: Ecma International）は情報通信システムの分野における国際的な標準化団体。以前は欧州電子計算機工業会^[1]という名称であったが、1994年にその国際的な立場を反映してこの名称に改められた。この名称はもはや略語ではなく、大文字にせずに「Ecma International」と表記する。
1961年にヨーロッパにおける計算機システムを標準化するために設立された。本部はジュネーヴにある。
Wikipedia

TomoOne

JavaScriptは、ECMAScriptという

標準化されたものがありますね！

主要なブラウザ（PC）とレンダリングエンジンはこの様になっています。ブラウザは知っているけど、レンダリングエンジンまでは知らないですよね笑。

Google Chrome, Microsoft Edge(Chromium版), Opera, Vivaldi・・・Blink
Firefox・・・Gecko
Safari・・・WebKit
Internet Explorer・・・Trident

この中で、Blink, Webkit, Geckoはオープンソースのレンダリングエンジンとなります。（BlinkはWebkitのフォーク）

そのため、BlinkとWebkitをまとめてWebkit系と呼ぶそうです。

Webブラウザ、レンダリングエンジン、JavaScriptエンジンの整理&図視化 - Qiita

最近、次世代のMicrosoft EdgeがChromiumをベースにするという記事を読んだことがきっかけでブラウザの中身が気になって調べたので、その備忘録として記事にしたいと思います。※2020…

レンダリングエンジンと、JavaScriptエンジン

レンダリングエンジン

レンダリングエンジンは、ブラウザ内部で利用される、HTMLの描画エンジンになります。

ウェブページの描画担当です。

HTMLや画像ファイルやCSSやJavaScriptといった各種リソースを読み取り、それを画面上の実際のピクセルとして描画させる働きをします。

基本はブラウザの内部で描画担当なのですが、他にも身近なところとしては、

アプリ内でのブラウザ表示があります。

例えば、Facebookのアプリでタイムラインに流れてきたなにかの記事をタップすると、ブラウザのアプリに飛ばずにFacebook内で「ピュッと」ブラウザ画面が表示されます。

この仕組はWebViewと言って、ブラウザと違い、アドレスバーなどのユーザーインターフェースを持っておらず表示だけを行う役割になります。

手軽に導入できるということで、よく使われています。

教えて！Webviewって何？ネイティブと何が違うの？ - MGRe（メグリ）

Webviewとネイティブどちらを選ぶべき？ざっくり言ってしまうと、以下の視点で選択ということになります。コストで考えるならWebview、UX重視ならネイティブ。ただ、弊社がご支援する小売業向けのアプリ開発ではWebviewで開発することが多いです。

JavaScriptエンジン

これは、JavaScriptの実行環境を提供するソフトウェアコンポーネントです。レンダリングエンジンと一緒に使われる場合は、DOMツリーやCSSOMツリーなどの内部オブジェクトやAPIに対して、JavaScriptからアクセスできるようにするバインディングが提供されます。

Google Chrome, Microsoft Edge(Chromium版)・・・V8
Internet Explorer・・・Chakra
Firefox・・・SpiderMonkey
Safari・・・Nitro

Google ChromeやFirefoxでは、ブラウザの拡張機能を実行するのにも使われます。

また、

JavaScriptエンジンは、ブラウザ内だけでなく単独の言語処理系としても利用され、

Google Chromeで使われているV8は、JITコンパイルを持っているとても高速なエンジンになっています。

まずはここ

V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス | POSTD

数週間前に、JavaScriptが実際どのように動いているかを掘り下げて紹介する記事の連載を始めました。JavaScriptがどのような機能で構成されていてそれらがどのように組み合わさって機能してい…

少し専門的な説明

JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説

Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀&

レンダリングの流れ

その中を詳細に見ると、こうなります。

Loadingとは、リソースの読み込みを行う部分です。

Scriptingは、JavaScriptの実行フェーズです。

Renderingは、レイアウトツリーの構築フェーズです。

Paintingで、最後に描画を行います。

次からは、この流れにフォーカスして見ていきます。

参考

Webフロントエンドハイパフォーマンスチューニング (日本語) 単行本（ソフトカバー）

超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus) (日本語) 単行本