webブラウザはそもそもどうやって出来ているのか?
werブラウザは大きく分けて7つの主要コンポーネントによって構成されています。
②ブラウザエンジン
③レンダリングエンジン
④ネットワーキング
⑤UIバックエンド
⑥JavaSvriptインタプリタ
⑦データストレージ
この中でフロントエンドエンジニアの開発で理解が必要とされるのが、③と⑥です。
レンダリングエンジンの役割って何?
簡単に言うと、HTMLのファイル等をブラウザ上に表示することが役割です。難しい言い方をすれば、ブラウザウィンドウにリクエストしたコンテンツを表示すること。
レンダリングエンジンが内部でどういったことが行われているかというと、まずリクエストされたHTML文章を解析(パース)し、タグを「コンテンツツリー」というツリー内のDOM(Document Object Model)ノード(要素)に変換します。
次にCSSデータを解析し、HTMLがどのように表示されるべきか(レイアウト部分)を確定する為に※レンダーツリーを生成します。
※要素(h1、p等)が持つ、色やサイズなどの見た目に関する部分の情報を保有
最後に上記で行ったコトをブラウザに描画します。
レンダリングエンジンはこのプロセスを段階的に処理して、処理が終わったものから順次表示します。webページが読み込み状態なのに画像や文章が表示されるのはこういった仕組みになっているからです。