# ブラウザーに 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 メソッド GET PUT POSTなど
    • リクエスト対象 通常は URL
    • HTTP バージョン
  • ヘッダー
  • 本文

# 開始行

HTTP リクエストは、アクションを始めるためにクラアントからサーバーへ送られます。その開始行には、3 つの要素が含まれています。

  • HTTP メソッド GET PUT POSTなど
  • リクエスト対象 通常は 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
    • ステータスコード 200 404 500
    • ステータス文字列 OK Not Found Internal 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
  • share
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ