LoginSignup
1
3

More than 3 years have passed since last update.

HTMLレンダリングエンジン

Posted at
1 / 13

目次

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

ブラウザとは

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

出典: フリー百科事典『ウィキペディア(Wikipedia)』


ブラウザコンポーネント

1_lmbu87mtesvfqqbfmum-ka_m.png

出典: ブラウザはどのようにコンテンツをレンダリングしているのか?


各コンポーネント

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

ブラウザとサーバーの通信

20190413002537.jpg

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

出典: Webフロントエンドとサーバーサイドの技術動向をざっくり整理する


HTMLレンダリングエンジン

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

出典: フリー百科事典『ウィキペディア(Wikipedia)』


主なHTMLレンダリングエンジン

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

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

スクリーンショット 2019-10-27 17.12.18.png

参照:Browser engine From Wikipedia, the free encyclopedia
補足: EdgeブラウザのChromiumベース移行、マイクロソフトが正式発表


JavaScriptエンジン

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

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


JavaScriptエンジンの種類

ブラウザ レンダリングエンジン JavaScriptエンジン
IE Trident Chakra (Jscript9)
Microsoft Edge EdgeHTML Chakara (JavaScript)
Firefox Gecko SpiderMonkey
Konqueror KHTML KJS
Safari WebKit JavaScriptCore
Chrome, Opera Blink V8

参照:PhantomJSと各ブラウザのJavascriptエンジンまとめ
参照:V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス


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

スクリーンショット 2019-10-27 17.48.36.png

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


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

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3