HTMLレンダリングエンジン

# 目次
* ブラウザとは(ブラウザコンポーネント)
* ブラウザとサーバーの通信
* HTMLレンダリングエンジン
* JavaScriptエンジン
* 日本ブラウザシェア率(2016~)


----

# ブラウザとは
ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ（ブラウザー）と呼んだ場合、多くはウェブブラウザのことを指す。 

> [出典: フリー百科事典『ウィキペディア（Wikipedia）』](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6)

----

## ブラウザコンポーネント
![1_lmbu87mtesvfqqbfmum-ka_m.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13451/c86e813f-b0a1-0749-4b2b-3c3dac28162c.png)

> [出典: ブラウザはどのようにコンテンツをレンダリングしているのか？](https://gigazine.net/news/20180323-rendering-engine/)


----

## 各コンポーネント
* ユーザインターフェース
    * ユーザは操作できる部分：アドレスバー、戻る/進むボタン、メニューなど
* ブラウザ エンジン
    * ユーザインターフェースとレンダリングエンジンの間の情報の受け渡しを担当
* ⭐️HTMLレンダリングエンジン
    * HTMLとCSSを解析し、画面に表示
* ⭐️JavaScriptエンジン
    * JavaScriptを動かしを担当
* ネットワーキング
    * HTTPリクエストなどのネットワーク呼び出しを担当
* UIバックエンド
    * チェックボックスやウィンドウなどのコアウィジェットの描画を担当
* データストレージ
    * Cookieなどのデータの保存を担当

----

# ブラウザとサーバーの通信
![20190413002537.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13451/3cd2b69c-bb7d-9ea0-97aa-8c479b6359c7.jpeg)

1. アドレスバーにアクセス先を入力
2. ネットワーク経由でサーバーへリクエスト
3. リクエスト内容より処理してHTMLを生成
4. CSSとJSファイルなどもクライアントへ返信
5. レンダリングエンジンとJavaScriptエンジンより画面を表示

> [出典: Webフロントエンドとサーバーサイドの技術動向をざっくり整理する](https://arakan-pgm-ai.hatenablog.com/entry/2019/04/18/000000)


----
# HTMLレンダリングエンジン

HTMLレンダリングエンジンとは、ウェブページ記述用言語で書かれたデータを解釈し、実際に画面に表示する文字や画像などの配置を計算するプログラムである。HTMLに加え、CSS、XMLなどを解釈できるものが多い。 

> [出典: フリー百科事典『ウィキペディア（Wikipedia）』](https://ja.wikipedia.org/wiki/HTML%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3)

----

## 主なHTMLレンダリングエンジン
    Trident (Internet Explorer、QQ浏览器) - トライデント
        EdgeHTML (Microsoft Edge) - エッジ
    Gecko (Firefox) - ゲッコー
        Servo - サーボ
    KHTML (Konqueror)
        WebKit (Safari) - ウェブキット
            Blink (Chromium, Chrome, Opera, Microsoft Edge) - ブリンク

> * [補足1：ChromeとChromium、何が違う?](https://news.mynavi.jp/article/20161205-a064/) 


----

## HTMLレンダリングエンジンの歴史

![スクリーンショット 2019-10-27 17.12.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13451/b697bfe3-073e-a5ee-95cb-787c58acf852.png)

> [参照：Browser engine From Wikipedia, the free encyclopedia](https://en.wikipedia.org/wiki/Browser_engine)
> [補足: EdgeブラウザのChromiumベース移行、マイクロソフトが正式発表](https://japanese.engadget.com/2018/12/07/edge-chromium-mac-os/?guccounter=1&guce_referrer=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS91cmw_c2E9dCZyY3Q9aiZxPSZlc3JjPXMmc291cmNlPXdlYiZjZD04JnZlZD0yYWhVS0V3anl4Nmo1OUx2bEFoV013WlFLSGJOaUNYWVFGakFIZWdRSUJ4QUImdXJsPWh0dHBzJTNBJTJGJTJGamFwYW5lc2UuZW5nYWRnZXQuY29tJTJGMjAxOCUyRjEyJTJGMDclMkZlZGdlLWNocm9taXVtLW1hYy1vcyUyRiZ1c2c9QU92VmF3MzQ2b01MVnRaWEFPcWIxOWNZb0EzZQ&guce_referrer_sig=AQAAAKfIvzSgKGRS55TRZNSlMHqSreAvy1V0usdVu8d25m6_zM7Jnn_JJwmi_edJj8QfoFnS2cXpSil0b1Yo4O--RhR5RVoZiQTQjkKJKv_FLSW9BMh3rruu4WcHo75CY_3MhCEsYUepBBTq80a1ipdeT5A9mtJrxj7cgl0Cm12w5Tyd)

----

# JavaScriptエンジン

JavaScriptエンジンとはJavaScriptコードを実行するプログラムまたはインタプリタのことです。

> [出典：V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス](https://postd.cc/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code/)

----

## JavaScriptエンジンの種類

| ブラウザ   | レンダリングエンジン  | JavaScriptエンジン |
|:-----------------:|:------:|:------:|
| IE   | Trident  | [Chakra (Jscript9)](https://ja.wikipedia.org/wiki/Chakra)  |
|Microsoft Edge | EdgeHTML | [Chakara (JavaScript)](https://en.wikipedia.org/wiki/Chakra_(JavaScript_engine)) |
| Firefox  | [Gecko](https://developer.mozilla.org/en-US/docs/Mozilla/Gecko)  | [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) |
| Konqueror | KHTML | [KJS](https://ja.wikipedia.org/wiki/KJS) |
| Safari  | [WebKit](http://www.webkit.org/)  | [JavaScriptCore](https://trac.webkit.org/wiki/JavaScriptCore) |
| Chrome, Opera  | [Blink](http://www.chromium.org/blink)  | [V8](https://developers.google.com/v8/intro) |


> [参照：PhantomJSと各ブラウザのJavascriptエンジンまとめ](https://tsuchikazu.net/phantomjs-browser-javascript-engine/)
> [参照：V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス](https://postd.cc/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code/)

----

# 日本ブラウザシェア率(2016~)

![スクリーンショット 2019-10-27 17.48.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13451/f6f52e4e-bd0e-cbf8-4d10-ee114303c648.png)

> 補足：Desktop、Mobile、Tabletを含む
> [出典：https://gs.statcounter.com]


----

# ご静聴ありがとうございます