ホーム / JavaScript /

フロントエンド技術を学ぼう 2-3.Webブラウザについて学ぶ

2020年7月23日木曜日

Front-end Developer Handbook HTML JavaScript

t f B! P L

Front-end Developer Handbookを教科書にフロントエンド周りの技術を習得する連載。

Webブラウザについて学ぶの説明です。


Webブラウザについて学ぶ

ウェブブラウザ（一般的にはブラウザと呼ばれる）は、ワールドワイドウェブ上の情報リソースを検索し、表示し、横断するためのソフトウェアアプリケーションです。

情報リソースとは、Uniform Resource Identifier(URI/URL)によって識別される、Webページ、画像、ビデオ、その他コンテンツです。リソースに上に存在するハイパーリンクによって、ユーザはブラウザーを使って関連リソースに簡単に移動できます。

ブラウザはワールドワイドウェブを使用することを主目的としていますが、プライベートネットワーク上のWebサーバの情報やファイルシステムにアクセスするためにも使用できます。

参照元：英語版Wikipedia


一般的に使用されるブラウザ

以下のページにも書かれているとおり、2020年現在Chromeブラウザがユーザーシェアのトップを走り続けています。


Source: StatCounter Global Stats - Browser Market Share


Chromeを含む、よく使用されるブラウザを纏めました。


ブラウザ名レンダリングエンジンJavaScriptエンジン開発元
ChromeBlinkV8Google Inc.
FirefoxGeckoSpiderMonkeyMozilla Foundation, Mozilla Corporation, コミュニティ
Internet ExplorerTridentChakraMicrosoft Corporation
Microsoft EdgeBlinkV8Microsoft Corporation
SafariWebkitSquirrelFish ExtremeApple Inc.


日本国内でのブラウザシェア

Source: StatCounter Global Stats - Browser Market Share



ブラウザとWeb技術(APIなど)の進化

以下はブラウザやWebの技術がどのように進歩してきたか、分かりやすく図解してあるページです。


一般的に使用されるヘッドレスブラウザ

ヘッドレスブラウザとはChromeやFirefoxなどの様なGUIのアプリケーションとは違い、CUIでWebページを閲覧・操作するブラウザです。その為プログラムでWebページの操作が可能になり、主にテストやスクレイピングに利用されます。


ブラウザ名レンダリングエンジンJavaScriptエンジン
Headless ChromiumBlinkV8
SlimerJSGeckoSpiderMonkey


ブラウザの仕組み

一般的なブラウザは以下の様な仕組みで動いています。

Image source: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/


主な構成要素概要
User Interface
(ユーザーインターフェース)		アドレスバー、戻る/進むボタン、ブックマークメニューなど、Webページが表示されるメイン ウィンドウを除くすべての部分。
Browser engine
(ブラウザ エンジン)		UIとレンダリング エンジンの間の処理を整理する。
Rendering engine
(レンダリング エンジン)		主にHTMLとCSSを解析し、コンテンツを画面に表示する。
Networking
(ネットワーキング)		HTTPリクエストなどのネットワークの呼び出しを行う。
UI Backend
(UI バックエンド)		コンボボックスやウィンドウなどの基本的なウィジェットの描画を行う。裏でOSのUIメソッドを使用している。
JavaScript Interpreter
(JavaScript インタープリタ)		JavaScript コードの解析と実行を行う。
Data Persistence
(データストレージ)		永続的なレイヤ。Cookieなどのデータをハードディスクに保存する。

レンダリングの仕組み

ブラウザがレンダリングを行う際のステップです。
また、スクリプトによる変更など、ページ構造が変わる際には以下のステップのいくつかを繰り返す場合があります。

  1. サーバから受信したHTMLから、DOM(Document Object Model)が形成されます。
  2. スタイルがロード＆パースされ、CSSOM(CSS Object Model)が形成されます。
  3. DomとCSSOMの上にレンダリングツリーが作成されます。
  4. レイアウトと呼ばれる、各レンダリングツリー要素の座標計算がされます。
  5. 最後にペインティングと呼ばれるブラウザ画面に実際に表示させるプロセスがあります。

レンダリングツリーとは

Webkitでは“renderer”または“render object”、Geckoでは“frame”と呼ばれ、目に見えない要素(<head>タグやdisplay:none;要素)以外のDOM構造が反映されたものです。
各レンダリングオブジェクトには、対応するDOMオブジェクトと計算されたスタイルが含まれます。

レンダリングツリーは、DOMの視覚的表現を記述します。


Repaintとは

background-color、border-color、visibilityなどのページ上の要素の位置に影響を与えないスタイルの変更の場合、ブラウザは新しいスタイルの再適用のみを行います。


Reflowとは

ドキュメントの内容や構造、要素の位置に影響を与える変更があった場合、Reflowが発生します。この際、通常以下の順に実行されます。

  1. DOM操作(要素の追加、削除、変更)
  2. formフィールドの変更
  3. CSSプロパティの計算または変更
  4. スタイルシートの追加または削除
  5. “class"属性の変更
  6. ブラウザのウィンドウ操作(サイズ変更、スクロール)
  7. 疑似クラス活性化(:hover)

参照元


ブラウザ用に最適化する


ブラウザの比較


ブラウザハック

一般的なブラウザのCSSとJavaScriptのHackが一覧で見れるサイトです。


ブラウザ向けの開発

以前は、フロントエンドの開発者は様々なブラウザでコードを動作させるために、多くの時間を費やしていました。これはかつて、大きな問題でした。

今日、抽象化技術(jQuery、React、Post-CSS、Babelなど)と最新のブラウザを組み合わせることで、ブラウザへの開発はかなり簡単になります。
新たな課題は、ユーザーが使用するブラウザではなく、ブラウザを実行するデバイスです。


エバーグリーンブラウザ

殆どのモダンブラウザの最新バージョンはエバーグリーンブラウザだと考えられます。
これはユーザーに尋ねることなく自動的に更新する機能を内包したブラウザという意味です。この自動更新ブラウザ化の動きは、自動更新しない古いブラウザを徐々に削除していくでしょう。


ブラウザの選択

現在、殆どのフロントエンドの開発者は、Chromeと「Chromeデベロッパー・ツール」を使用してフロントエンドコードを開発しています。

しかし、よく使われているモダンブラウザはすべて、開発者向けのツールを提供しています。開発に使うものを選ぶのは好みの問題です。重要なことは、どのブラウザやデバイスをサポートし、適切にテストしなけれならないかを知ることです。

私はChromeを使用することをおすすめします。なぜならデベロッパーツールが一貫して改善され続けており、現時点で最も堅牢な機能が含まれているからです。


QooQ