ブラウザはどう動作するか?
ブラウザとは？
ウェブブラウザは同期(Synchronous)的に(HTML+CSS)、Javascript言語を解釈して画面に表示する応用ソフトウェアです。
ブラウザ動作プロセス
- ブラウザはhtml、css、javascrip、img、fontファイルなどレンダリングに必要なリソースをレクエストし、サーバーから応答を受けます。
- ブラウザのレンダリングエンジンは、サーバーから応答されたhtml、cssをparsingしてdomとcssomを生成し結合してレンダーツリーを生成します。
- ブラウザのjavscriptエンジンは、サーバーから応答されたjsをパーシングしてツリーを生成し、バイトコードに変換します、
- レンタツリーに基づいてhtml要素のレイアウトを計算し、ブラウザにペインティングします。
HTMLパーシングとDOM生成
ブラウザのリクエストによりサーバーが応答したHTMLドキュメントは、文字列からなる純粋なテキストです。
このドキュメントをピクセルにレンダリングするには、ブラウザが理解できるデータ構造に変換してメモリに保存する必要があります。
ブラウザレンダリングエンジンはHTML文書をパーシングし、ブラウザが理解できる資料構造であるDOMを生成します。
DOM生成過程
- htmlファイルがブラウザ要求によって応答されます。 サーバーはhtmlファイルを読み込んでメモリに保存し、メモリに保存されたバイトをネット経由で応答します。
- ブラウザは、サーバーが応答したhtml文書をバイトの形で応答します。バイト形態のhtml文書は、metaタグのエンコード方式に基づいて変換されます。
- 文字列に変換されたhtml文書を読み込み、文法的意味を持つコードの最小単位であるトークンに分解します。
- トークンをオブジェクトに変換してノードを生成します。
- html文書はhtml要素の集合からなり、html要素は重畳関係になります。この重畳関係によって親子関係が形成されます。 html要素の親子関係を反映して、すべてのノードをツリー資料構造で構成します。
- DOMツリー完成！
CSSパーシングとCSSOM生成
レンダリングエンジンはDOMを生成していく途中、CSSをロードするlinkタグやstyleタグに遭遇するとDOM生成を一時中断します。
CSSはhtmlと同じパーシング過程(バイト→文字→トークン→ノード→CSSOM)を経て解釈し、CSSOMを生成します。
CSS パーシングを完了すると、HTML パーシングが中断された地点から再びhtmlをパーシングし始め、DOM生成を再開する。
レンダーツリー作成
レンダリングエンジンはサーバーから応答されたHTMLとCSSパーシングしてそれぞれDOMとCSSOMを生成します。
DOMとCSSOMはレンダリングのためにレンダーツリーで結合されます。
レンダーツリーは、レンダリングのためのツリー構造のデータ構造です。ブラウザ画面にレンダリングされないノードとCSSによって表示されないノードは含まれません。
後、レンダーツリーはhtml要素のレイアウトを計算するのに使用され、ブラウザ画面にピクセルをレンダリングするpainting処理に入力されます。
ブラウザレンダリングプロセスは繰り返し実行されます。
- JavaScriptによるノードの追加または削除
- ブラウザのリサイジングによるビューポートの変更
- html要素のレイアウトに変更を発生させるwidth/heightなど..
リレンダリングは性能に悪影響を与える作業なので、頻繁に発生しないよう注意しましょう!
JavaScriptのパーシングと実行
html文書をパーシングした結果のDOMは、html文書構造とhtml要素やスタイルを変更できるDOM APIを提供します。
javascriptコードでDOM APIを使用すると、DOMを動的に操作できます。
CSS パーシング過程と同にレンダリングエンジンはhtmlを一行ずつ順次パーシングしてDOMを生成し、scriptタグに出会ったらDOM生成を中断し、script内のJavascriptをパーシングするためにJavascriptエンジンに制御権を渡し、parsingと実行が終了するとレンダリングエンジンに制御権を渡します。
javascriptエンジンは、コードをパーシングし、CPUが理解できる言語に変換して実行すます。
リフローとリペイント
DOMやCSOMを変更するDOM APIが使用された場合、DOMやCSOMが変更されます。
変更されると、DOMとCSSOMは再びレンダーツリーに結合され、レンダリングされます。
これをリフロー、リペイントといいます。
-
リフローはレイアウト計算をやり直すことです。
ノードの追加削除、要素サイズの位置変更などレイアウトに影響を与えるものがあるときに実行されます。 -
リペイントは、再結合されたレンダーツリーに基づいて再びペイントすることです。
Discussion