#ブラウザーに URL 入力してから画面表示するまで

#ブラウザーに URL 入力

ブラウザー Chrome Safari IE などの URL 入力窓、アドレスバー(オムニボックス(opens new window)、検索ボックス)に URL 入力してエンターキーか「検索」ボタンを押す
※豆:Chrome で検索ボックスにフォーカスするショートカットCtrl+L
なんで「L」なん?

Ctrl+L をすぐ忘れてしまうなら
Alt+D を覚えてもいいんではないでしょうか。

もしくは、アドレスをリンクと読み換えて覚えてみてはどうでしょうか。

知恵袋参考(opens new window)

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 特定

  1. システムhostsファイル見て、あれば IP 解析完了
  2. DNS キャッシュ見る
  3. DNS サーバーにお問合せする

hostsファイル場所

# Windows
C:\Windows\System32\Drivers\Etc\hosts

# Mac
/private/etc/hosts

DNS サーバーもキャッシュがあります

※IP 特定検索順番:トップレベルドメイン(opens new window)-> 第 2 レベルドメイン -> 第 3 レベルドメイン

ドメイン名の種類(opens new window)

トップ用途
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 リクエストは、アクションを始めるためにクラアントからサーバーへ送られます。その開始行には、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

メソッドGETHEADDELETEOPTIONSは通常、本文は不要

本文は、大きく 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一時リダイレクト
400Bad Request クライアント側エラー
401Unauthorized 認証エラー (再認証可能)
403Forbidden 認証エラー
404Not Found リソースが見つからない
408Request Timeout リクエスト タイムアウト
413Payload Too Large リクエストエンティティが多すぎ
500Internal Server Error サーバーエラー
504Gateway 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
  • http

関連記事