ブラウザについて
UIを作成してみたものの、ブラウザの互換性問題により表示がおかしくなる現象(スタイル崩れ)が発生したので今回はブラウザについて勉強してみたいと思う。
とりあえず、一般的なブラウザの知識だけでも頭に入れておきたい。
はじめに
ブラウザとはネットワークを通じてサーバ等にある情報にアクセスできるようにするソフトウェアプログラムです。
ブラウザを使用するとインターネットで利用できるすべてのプラットフォームにアクセスでき、世界中のテキスト、画像、ビデオを表示できます。
検索エンジンにURLを入力することにより、URLと紐づいているサーバにアクセスし要求する情報をフェッチしてWebページとして表示します。
下記に有名どころのブラウザを記載するが、時代ごとにシェア率がかなり変化するので先行きの予測をした上でターゲットになるブラウザを決めるべきだと思っています。(このあたりに記載されていないコアなブラウザに対応すると情報がなさ過ぎて辛い、、、)
■有名どころのブラウザリスト
ブラウザ | 企業 | 対応OS |
---|---|---|
Safari | Apple | MacOS, iOS |
Firefox | Mozilla | MacOS, iOS,Windows,Linux,Android |
Chrome | MacOS, iOS,Windows,Linux,Android | |
Edge | Microsoft | MacOS, iOS,Windows,Linux,Android |
Opera | Opera Software | MacOS, iOS,Windows,Linux,Android |
各ブラウザごとにどんな機能を対応しているのか調べるためには"Can I use"というサイトがあるようなので、事前に確認しておきたい。(ここに載ってこないものはどうすればいいんだ?教えてください)
ブラウザの仕組み
開発者に求められることはユーザエクスペリエンスの低下を防ぐために”読み込み時間”、”操作の快適性”が挙げられます。
これらの要求に応えるためにはブラウザがどのような仕組みで動いているのか理解する必要があります。
ブラウザは主に下記のような流れで処理を行うようです。
それぞれのプロセスについて記載していきます。
・解析(Parsing)
ブラウザがチャンクデータを受信した後、情報の解析から始まります。
このことを解析(Parsing)と呼びます。
ブラウザはDOM(Document Object Model)及びCSSOM(CSS Object Model)と呼ばれる構造をツリー形式で表現したものを構築します。
DOMの場合、HTMLの各要素をノードとしてツリー上のデータ構造を作ります。
DOMはJavaScriptで操作することにより、ウェブページの内容を変更したり、要素の追加/削除を行うことができます。
ウェブページのテキスト等を動的に変更するためにはJavaScriptでDOM操作を行う必要があるということですね。
CSSOMの場合、CSSのスタイル情報をツリー上のデータ構造を作ります。
こちらの場合もJavaScriptでCSSOMを操作することで、CSSにかかわるスタイル情報(文字色やテキストサイズ等)を変更することができます。
・レンダリングツリー構築(DOMとCSSOMの統合)
上記で構築したDOMやCSSOMを統合し、描画の為のデータ構造を作成したものがレンダリングツリーとなります。
レンダリングツリーは、最終的にレイアウト計算や描画を行うための基盤となります。
レイアウト計算では各要素の位置やサイズを決定し、描画ではピクセルとして画面に描画を行います。
・JavaScriptExecution
ブラウザがJavaScriptコードを解析して、実行するプロセスのことです。
ブラウザはJavaScriptエンジン(V8, SpiserMonkey, JavaScriptCore等)を使用して、コードを実行しDOMを変更したり、ネットワーク通信を行ったり、アニメーションを処理したりします。
JavaScriptの実行は以下のようなプロセスがあります。
- パース
JavaScriptコードを抽象構文木(AST:Abstract Syntax Tree)に変換します。 - コンパイル(JIT:Just-In-Time Compilation)
JITコンパイラにより機械語に変換されます。
プリコンパイルと呼ばれる事前のコンパイルを実行することで処理が速くなったりします。
手法としては、SSR(Server Side Rendering)やビルドツールでのトランスパイル等が挙げられますが、最初のページ読み込みに時間がかかったりメリデメがありそうです。
このあたりは製品の特性を理解したうえで選択したほうがいいと感じました。 - 実行(Execution)
コンパイルされたコードがCPUで実行されます。 - 最適化(Optimization)
JavaScriptエンジンは実行時に不要なコードを削除したり、処理を高速化します。
まとめ
ブラウザの基本的な理解
ブラウザは、インターネット上の情報にアクセスし、ユーザーにコンテンツを表示するソフトウェアです。ユーザーがURLを入力することで、ブラウザはサーバーにリクエストを送信し、取得した情報を画面に描画します。
主要なブラウザ
現在、主に使用されているブラウザには Safari、Firefox、Chrome、Edge、Opera などがあります。それぞれ異なるOSに対応し、特定の機能がサポートされていますが、ブラウザ間での互換性問題が発生することもあるため、ターゲットとするブラウザを選ぶ際には、利用者層やシェア率、サポートされる機能を考慮することが大切です。
リクエスト送信: ユーザーが URL を入力すると、サーバーにリクエストを送信。
受信と解析: サーバーから HTML と CSS を受け取り、ブラウザは DOM と CSSOM を作成。
レンダリングツリーの構築: DOM と CSSOM を統合し、最終的なレンダリングツリーを作成。これに基づいて、ページのレイアウトを計算し、ピクセル単位で描画します。
JavaScript の実行: JavaScript エンジンがコードを解析し実行します。これにより、DOM を動的に変更したり、アニメーションを処理したりします。
パフォーマンスと最適化
読み込み時間や操作の快適性はブラウザの性能に大きく影響します。ブラウザがどのようにリソースを処理し、描画するのかを理解することで、より高速なページ表示やスムーズな操作性を実現できます。
最適化の方法として、JavaScript の事前コンパイル(プリコンパイル)や SSR(サーバーサイドレンダリング)、ビルドツールによる最適化が効果的です。選択肢に応じてメリットとデメリットを理解し、プロジェクトに最適な方法を選ぶことが重要です。
Discussion