# ブラウザーに URL 入力してから画面表示するまでの作業
ブラウザー Chrome Safari IE などの URL 入力窓、アドレスバー（オムニボックス (opens new window)、検索ボックス）に URL 入力してエンターキーか「検索」ボタンを押す
※豆：Chrome で検索ボックスにフォーカスするショートカット Ctrl+L
なんで「L」なん？
Ctrl+L をすぐ忘れてしまうなら
Alt+D を覚えてもいいんではないでしょうか。もしくは、アドレスをリンクと読み換えて覚えてみてはどうでしょうか。
Link の L だから
Alt+Dも同様(左手だけでできる)
なんで「Alt」なん？
なんで「D」なん？
# ブラウザーキャッシュから情報探す
ブラウザーにキャッシュされたかどうか有効期限過ぎたかどうかを見ます。
ブラウザキャッシュの TTL(Time To Live) は 20 分から 30 分ほど
Chrome のキャッシュ保存場所
C:\Users\ユーザー名\AppData\Local\Google\Chrome\User Data\Default\Cache
Chrome favicon キャッシュ場所
Faviconsというファイルを削除して Chrome 再起動すれば OK
# Windows
C:\Users\ユーザー名\AppData\Local\Google\Chrome\User Data\Default
# Mac
/Users/ユーザー名/Library/Application Support/Google/Chrome/Default/
# DNS 解析で URL から IP 特定
- システム
hostsファイル見て、あれば IP 解析完了 - DNS キャッシュ見る
- DNS サーバーにお問合せする
hostsファイル場所
# Windows
C:\Windows\System32\Drivers\Etc\hosts
# Mac
/private/etc/hosts
DNS サーバーもキャッシュがあります
※IP 特定検索順番：トップレベルドメイン (opens new window) -> 第 2 レベルドメイン -> 第 3 レベルドメイン
| トップ | 用途 |
|---|---|
| com | 商業組織用 |
| net | ネットワーク用 |
| org | 非営利組織用 |
| edu | 教育機関用 |
| info | 制限なし |
TLD は Top Level Domain トップレベルドメインの略
DNS レコード設定についてのメモ
| レコード | 読み方 | 説明 |
|---|---|---|
A | エーレコード | v4 Address の略 |
AAAA | クワッドエーレコード | v6 Address の略 |
CNAME | シーネームレコード | Canonical Name の略 エイリアス通称名、別名 |
MX | エムエクスレコード | Mail eXchange の略メール配送先ホスト名設定 |
NS | エヌエスレコード | ネームサーバーの設定、ゾーン情報を管理するネームサーバーのサーバー名 |
TXT | テキストレコード | ホスト名に関連付けるテキスト情報を定義するレコード |
PTR | ピーティアールレコード | |
TTL | ティーティーエルレコードキャッシュ期間 | Time To Live の略 キャッシュの有効期限(86400 秒=1 日) |
# HTTP リクエスト請求
IP でサーバー特定 TCP 接続して HTTP リクエスト
TCP/IPとは、Transmission Control Protocol/Internet Protocol
GET http://www.google.com/ HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/[...]
Accept-encoding: gzip, deflate, br
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78[...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: google.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
リクエストの構造
- 開始行
- HTTP メソッド
GETPUTPOSTなど - リクエスト対象 通常は URL
- HTTP バージョン
- HTTP メソッド
- ヘッダー
- 本文
# 開始行
HTTP リクエストは、アクションを始めるためにクラアントからサーバーへ送られます。その開始行には、3 つの要素が含まれています。
- HTTP メソッド
GETPUTPOSTなど - リクエスト対象 通常は URL
- HTTP バージョン
# ヘッダー Header
大文字・小文字を区別しない文字列の後にコロン (
:) と、ヘッダーに応じた構造の値が続きます。
Accept (opens new window)：受け入れ可能データタイプ指定
Accept-Charset (opens new window)：クライアントが理解できる文字コード指定
Accept-Encoding (opens new window)：リソースで使用できるエンコードアルゴリズム・圧縮アルゴリズム指定
Access-Control-Allow-Origin (opens new window)：レスポンス共有可能かどうかの設定（クロスオリジン許可について）
Content-Disposition (opens new window)：リソース内容そのまま表示するか、あるいは、'名前を付けて保存' ウィンドウを表示するかどうか指定
Authorization (opens new window)：サーバーの認証情報を指定
# 本文 Body
メソッド GET HEAD DELETE OPTIONS は通常、本文は不要
本文は、大きく 2 種類に分類されます。
単一リソースの本文。1 個のファイルで構成され、Content-Type と Content-Length の 2 つのヘッダーで定義されます。
複数リソースの本文。マルチパートの本文で構成され、それぞれが異なる情報を持ちます。
# サーバーレスポンス返却
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
<html lang="ja">
...
</html>
レスポンス構造
- ステータス行
- プロトコルバージョン 通常
HTTP/1.1 - ステータスコード
200404500 - ステータス文字列
OKNot FoundInternal Server Error
- プロトコルバージョン 通常
- ヘッダー
- 本文
# ステータスコード
- 1xx~ 情報系
- 2xx~ 正常処理（
200正常終了） - 3xx~ 移転通知（
301リダイレクトなど） - 4xx~ 処理失敗（
404該当なし、認証失敗など） - 5xx~ サーバーエラー（
500サーバープログラムエラー,504処理タイムアウト）
| コード | 説明 |
|---|---|
| 301 | 完全に移行したこと示すリダイレクト |
| 302 | 一時リダイレクト |
| 400 | Bad Request クライアント側エラー |
| 401 | Unauthorized 認証エラー (再認証可能) |
| 403 | Forbidden 認証エラー |
| 404 | Not Found リソースが見つからない |
| 408 | Request Timeout リクエスト タイムアウト |
| 413 | Payload Too Large リクエストエンティティが多すぎ |
| 500 | Internal Server Error サーバーエラー |
| 504 | Gateway Timeout サーバエラータイムアウト |
# レスポンスヘッダー Header
大文字・小文字を区別しない文字列の後にコロン (
:) と、ヘッダーの種類に応じた構造の値が続きます。値を含むヘッダー全体は 1 行で構成されます。
# レスポンス本文 Body
本文は、大きく 3 種類に分類されます。
大きさが判明している 1 個のファイルで構成される、単一リソースの本文。 Content-Type と Content-Length の 2 つのヘッダーで定義されます。
大きさが不明な 1 個のファイルで構成される、単一リソースの本文。 Transfer-Encoding を chunked に設定して、 chunked 形式でエンコードされます。
複数リソースの本文。マルチパートの本文で構成され、それぞれが異なる情報のセクションを持ちます。これは比較的まれです。
# ブラウザー DOM 描画
ブラウザー側でレンダリングしてコンテンツ画面を表示する
ブラウザレンダリング入門〜知ることで見える世界〜 (opens new window)
ブラウザレンダリングを理解するため簡単にまとめてみた (opens new window)
ブラウザの仕組み: 最新ウェブブラウザの内部構造 (opens new window)
2019-12-02