ブラウザの基礎知識のアウトプットとして記事を書かせていただきます。
ブラウザとは
インターネット上のWEBページを閲覧するためのソフトウェア
ブラウザの種類
・Google Chrome
・Firefox
・Safari
・Microsoft Edge
ブラウザからHTTPの仕組み
ブラウザからHTTPを使用することでWebサーバーと通信を行いWebページやコンテンツを取得したり送信することができる。ブラウザはHTTPを使用してURLを入力したり、リンクをクリックすることでHTTPリクエストをWebサーバーに送信し、Webサーバーはそれに対してレスポンスを返す。
またログインや検索フォームもHTTPを介して行われる。
ブラウザからHTPPレスポンスでWebページが返してきた後に処理順番とは
1 HTTPレスポンスが帰ってくる
↓
2 HTMLが読み込まれる
↓
3 HTMLの解釈してDOMという内部表現に変換します。DOMはHTMLの文章要素(div,h1)タグなどを階層的に表示にする
例
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
↓変換される
Document
- html
- head
- title (テキストコンテンツ: "My Web Page")
- body
- h1 (テキストコンテンツ: "Hello, World!")
- p (テキストコンテンツ: "This is a paragraph.")
4 CSSが読み込まれる
HTML内にlinkやstyleなどを使用してCSSを参照している場合,CSSを再度、Webサーバーにリクエストをする
↓
例
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
//↓ここ
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
ではHTMLにCSSを直書きした方がいいのでは？
HTMLにCSSを直書きするメリット
・HTMLを読み込む時にリクエストが減るのでページの読み込み速度は早くなる
HTMLにCSSを直書きするデメリット
メンテナンスが大変になる
CSSを外部ファイルにするとして参照するメリット
メンテナンスが楽
CSSを外部ファイルにするとして参照するデメリット
HTMLとCSSで読み込みに時間がかかる
5 CSSの解釈
ブラウザはCSSファイルを解釈して,CSSオブジェクトモデル(CSSOM)と呼ばれる内部表現に変換する。CSSOMはHTML文章の要素に適応されるスタイルの情報に表示される
↓
例
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #007bff;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.6;
}
↓に変換される
- CSSOM
- Rule1 (body)
- Property (font-family: "Arial, sans-serif")
- Property (background-color: #f0f0f0)
- Rule2 (h1)
- Property (color: #007bff)
- Property (text-align: center)
- Rule3 (p)
- Property (font-size: 16px)
- Property (line-height: 1.6)
6 JavaScriptの読み込み
HTML内のscriptで外部JavaScriptのファイルを読み込んでいる際は再度、Webサーバーにリクエストする
↓
7 JavaScriptの解析
JavaScirptファイルを解析(コードをトークンに分割して意味を理解しやすいコードに変換)する
8 抽象構文木(AST)の作成(JavaScriptエンジン中で行われる)
JavaScriptではコードは抽象構文木(AST)と呼ばれる、内部表現に変換される。ASTはコードの構造を木構造で表現してそれぞれのノードが意味を持つ。JSOMを作成する。
例
function add(a, b) {
return a + b;
}
const x = 5;
const y = 10;
const result = add(x, y);
console.log(result);
↓に変換
Program
├── FunctionDeclaration (name: "add")
│ ├── Identifier (name: "a")
│ ├── Identifier (name: "b")
│ └── BlockStatement
│ └── ReturnStatement
│ └── BinaryExpression (operator: "+")
│ ├── Identifier (name: "a")
│ └── Identifier (name: "b")
├── VariableDeclaration (kind: "const")
│ ├── VariableDeclarator (id: Identifier (name: "x"), init: NumericLiteral (value: 5))
│ └── VariableDeclarator (id: Identifier (name: "y"), init: NumericLiteral (value: 10))
└── ExpressionStatement
└── CallExpression (callee: Identifier (name: "console.log"))
└── Identifier (name: "result")
9 コードを実行
ASTが生成された後にブラウザはASTを元にJavaScriptを実行する。これによりコードが処理され,web上の動的な動作が実現される
↓
10 レンダリング
ブラウザはDOMとCSSOMとJSOMを結合させてHTML文章をスタイリングされたレンダリングツリーに変換する
このレンダリングツリーに基づいて、ブラウザはwebページを表示する
↓
11 Webページの表示
以上がwebブラウザの仕組みです。
ありがとうございました。