はろ
Roadmapに書いてあった
Browsers and how they work?
ブラウザの構成について
下記のページで詳しく書いてあったので参考にしました。
だいぶ細かく書かれていてまとめきれないので少しずつ書いていこうと思います。
まず、ブラウザっていうのはwebを閲覧するソフトのことです。
chromeやらsafariやらfirefoxやら
ブラウザについてはまあ誰でもご存じですよね
ブラウザの仕組みについて今回は調べてみました。
ブラウザは下記の構成で主に作成されております。
○ユーザー インターフェース
アドレスバー、戻る/進むボタン、ブックマーク メニューなどがあります。ブラウザ画面のうち、要求したページが表示されるメイン ウィンドウを除くすべての部分です。
○ブラウザ エンジン
UI とレンダリング エンジンの間の処理を整理します。
○レンダリング エンジン
要求されたコンテンツの表示を担当します。たとえば、要求されたコンテンツが HTML の場合は、HTML と CSS を解析し、解析されたコンテンツを画面に表示します。
○ネットワーキング
HTTP リクエストなどのネットワークの呼び出しに使用されます。プラットフォームに依存しないインターフェースと、プラットフォームごとの下部の実装を備えています。
○UI バックエンド
コンボ ボックスやウィンドウなどの基本的なウィジェットの描画に使用されます。プラットフォームに依存しない汎用的なインターフェースを公開し、その下ではオペレーティング システムのユーザー インターフェース メソッドを使用しています。
○JavaScript インタープリタ
JavaScript コードの解析と実行に使用されます。
○データ ストレージ
永続的なレイヤです。ブラウザでは Cookie などさまざまなデータをハード ディスクに保存する必要があります。新しい HTML 仕様（HTML5）では、ブラウザ内の完全で軽量なデータベースである「ウェブ データベース」が定義されています。
今回はレンダリングエンジンについて簡単に説明していきます。
レンダリングエンジンが何をするかというと、htmlとかcssで書いたものを解析してブラウザ上で描画するものです。
レンダリングエンジンのフローは以下のような感じです。
まず、自分たちでhtmlとかでプログラムを書きます
↓
そのhtmlを解析してDOMツリーとレンダーツリーを製造します。←以前のブログで書きましたが、DOMっていうのは扱いやすいコードの書き直すようなイメージです。レンダーツリーというのは視覚的な情報をどの順番で描画するかをわかりやすいコードに書き直すようなものです。
↓
そのあとレイアウト処理に入ります、製造したツリーを元に描画座標を決めます。
↓
決めた座標に沿って描画していきます。
ブラウザの一部の構成要素だけでもこんなにいろいろなことをやっています。
htmlの解析ですが。
そのドキュメントが従っている構文ルールに基づいて解析されていきます。
なので、そのルールと違った言葉や間違った文を指定したコードがあると
syntax errorのようなよく見る構文エラーが発生するわけです。
レンダリングエンジンについてはこんな感じです。
んじゃ