Webサイトが表示されるまで〜簡易まとめ〜

3122 ワード
自分用勉強メモ 自分用メモ Web Web テキストリンク

ブラウザでWebサイトが表示されるまでを簡単にまとめてみた。
今回は自分の忘備録用です。

1. デスクトップアプリケーションとWebアプリケーションの比較

デスクトップ Web
処理の主体 手元のPC サーバ（WEBサーバー）
画面の表示 OS上で表示 Webブラウザ上で表示
インストール 必要 不要
  • デスクトップアプリケーションは処理の主体が「手元のPC」なのに対し、Webアプリケーションは「Webサーバー」である。
Webブラウザ（クライアント）からWEBサーバーにリクエストを送信 ⇆ 
WEBサーバからレスポンスを返却、ブラウザがレスポンス結果を表示する。
  • クライアント（ブラウザ）とWEBサーバーとの通信やりとり

2. Webって何？

  • WWW（World Wide Web：ワールド ワイド ウェブ）の事で、Webとは、「クモの巣」や「クモの巣状の物」を表す。
  • 世界中のドキュメントが繋がり合う様を、蜘蛛の巣に例えてWorld Wide Webとなったらしい。Webの構造は“世界中に蜘蛛の巣のように幅広く張り巡らされたつながり”というイメージ。
  • Webとはインターネットを使う利用形態の内、HTTPプロトコルという決まりに沿って通信しHTMLなどのマークアップ言語で作られたドキュメントなどを閲覧することができる技術（相互リンク/HTML上でHyper Linkというリンクによって色々な文章がみれる）
  • インターネットの中の一種、HTMLなどで作られたドキュメント同士が相互にリンクされていて、自分の欲しい情報を得られる技術

3. HTTPって何？

  • Web上でやりとりするリソースの表現を、クライアントとサーバー間でやりとりするためのプロトコル（規定、ルール）
  • HyperTextTransferProtocol：HTMLだけじゃなく、XMLや静止画Bad Request 、画像、音声、Javascriptプログラム等・・・コンピュータで扱えるデータであれば何でも扱える
クライアント：HTTPリクエスト（HTTPメソッド）　⇆　サーバー：HTTPレスポンス

※ リクエストとレスポンスを実際見てみよう！

  • Qiitaのサイトが表示される時は、どんなリクエストとレスポンスのやり取りがあるのだろう？？
    Qiita： https://qiita.com/ 
【General】
Request URL: https://qiita.com/
Request Method: GET
Status Code: 200  (from ServiceWorker)
Referrer Policy: origin

【Response Header】
cache-control: max-age=0, private, must-revalidate
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Sat, 06 Jul 2019 11:19:09 GMT
etag: W/"f9f134ee82174916d41fa583f10ddd76"
referrer-policy: strict-origin-when-cross-origin
server: nginx
status: 200
strict-transport-security: max-age=2592000
x-content-type-options: nosniff
x-download-options: noopen
x-frame-options: SAMEORIGIN
x-permitted-cross-domain-policies: none
x-request-id: a3a42bb3-a238-4868-8c21-6c0c434fb84d
x-runtime: 0.145939
x-xss-protection: 1; mode=block

【Request Header】
Provisional headers are shown
Referer: https://www.google.com/
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

参考 「プロになるためのWeb技術入門」