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

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

www.mojage.club

第13回はPart II: Learning Front-End Devから、
3項の Learn Web Browsersを紹介します。

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

Sponsored Link

Webブラウザについて学ぶ

ウェブブラウザ(一般的にはブラウザと呼ばれる)は、ワールドワイドウェブ上の情報リソースを検索し、表示し、横断するためのソフトウェアアプリケーションです。 情報リソースとは、Uniform Resource Identifier(URI/URL)によって識別される、Webページ、画像、ビデオ、その他コンテンツです。 リソースに上に存在するハイパーリンクによって、ユーザはブラウザーを使って関連リソースに簡単に移動できます。 ブラウザはワールドワイドウェブを使用することを主目的としていますが、プライベートネットワーク上のWebサーバの情報やファイルシステムにアクセスするためにも使用できます。

参照元:英語版Wikipedia

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

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

www.sitepoint.com

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

ブラウザ名 レンダリングエンジン JavaScriptエンジン 開発元
Chrome Blink V8 Google Inc.
Firefox Gecko SpiderMonkey Mozilla Foundation, Mozilla Corporation, コミュニティ
Internet Explorer Trident Chakra Microsoft Corporation
Safari Webkit SquirrelFish Apple Inc.

Image source: http://gs.statcounter.com/#all-browser_version_partially_combined-ww-monthly-201501-201601-bar

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

以下の過去記事参照: www.mojage.club

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

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

エバーグリーンブラウザ

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

ブラウザの比較
ブラウザの選択

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

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

ブラウザ向けの開発

以前は、フロントエンドの開発者は様々なブラウザでコードを動作させるために、多くの時間を費やしていました。 これはかつて、大きな問題でした。
今日、抽象化技術(jQuery、React、Post-CSS、Babelなど)と最新のブラウザを組み合わせることで、ブラウザへの開発はかなり簡単になります。 新たな課題は、ユーザーが使用するブラウザではなく、ブラウザを実行するデバイスです。

ブラウザの仕組み

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

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-colorborder-colorvisibilityなどのページ上の要素の位置に影響を与えないスタイルの変更の場合、ブラウザは新しいスタイルの再適用のみを行います。

Reflowとは

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

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

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

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

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

ブラウザ名 レンダリングエンジン JavaScriptエンジン 開発者
PhantomJS Webkit SquirrelFish Ariya Hidayat
SlimerJS Gecko SpiderMonkey Laurent Jouanneau
TrifleJS Trident Chakra Steven de Salas