Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Web ページを巡る冒険

mu_zaru
August 27, 2020

Web ページを巡る冒険

配信動画はこちら
https://www.youtube.com/watch?v=LaJWTPq5cSU&feature=youtu.be

もし良かったらムーザルちゃんねるのチャンネル登録お願いします!
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_vpoe
zaru
https://twitter.com/zaru

mu_zaru

August 27, 2020
Tweet

More Decks by mu_zaru

Other Decks in Programming

Transcript

  1. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近は SwiftUI で

    macOS アプリづくりが 趣味 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします!
  2. ユーザ ブラウザ サーバ URL を指示 HTML をもらう HTML レンダリング ①

    ② ③ ④ サーバさんの ところに行けば いいんだ Web ページを見に行く流れ
  3. http://example.com/hoge スキーマ ホスト パス トップレベルドメイン セカンドレベルドメイン URL は大きく 3つの構成に分かれる スキーマ

    : 通信方式の種類( https や ftp など) ホスト : サーバの識別名 パス : リソースの中の場所 サーバは どこにある の?
  4. 担当 DNS に再起的に問い合わせ example.com の IP アドレス 教えて 知ってる? 知らんけど

    .com の情報を知っ てるサーバなら分か るから教える〜 example.com の情 報を知ってるサーバ なら分かるから教え る〜 exmaple.com は 203.0.113.0.9 だ よ〜 2LD 権威サーバ TLD 権威サーバ ルートサーバ ① ② ③
  5. S : SYN S. : SYN + ACK . :

    ACK • tcpdump port 見たいポート番号 サーバとの会話の中身を見ることができるコマンド 小ネタ
  6. 80 番ポートの /hoge っていうのください GET /hoge HTTP/1.0 Host: example.com User-Agent:

    curl/7.64.1 Accept: */* リクエストヘッダでページを要求 メソッド バージョン HTTP/1.1 や 2 などがある パス リクエストヘッダ : 区切りの key-value リクエストする側の情報 などを記載している
  7. GET の /hoge に 該当するコンテン ツください アプリケーションサーバーさん (Web) サーバーさん ディスクくん

    メソッドとパスに応じた コンテンツを返す GET の /hoge な ら僕が持ってる〜 Web サーバ単体でコンテンツを返 すこともあるし、図解のようにアプ リケーションサーバが別にあり、そ こから返すこともある。サーバの構 成による。
  8. HTTP/1.0 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 1256 Connection: close

    レスポンスヘッダとボディ レスポンスヘッダ どうぞー : 区切りの key-value レスポンスしたページ の情報などを記載して いる ステータス 404 や 500 などエラーや ページの状態を伝える <!doctype html> <html> <head> <title>Example Domain</title> ボディ ヘッダとボディに 1つの改行が区切 りとしてある
  9. ① SYN ② SYN + ACK ③ ACK データもらう +

    接続終了の通信 KeepAlive なし KeepAlive あり ① SYN ② SYN + ACK ③ ACK データもらう + 接続終了の通信 ① SYN ② SYN + ACK ③ ACK リクエスト データもらう + 接続終了の通信 また handshake しないといけない 接続を閉じずに再利用してい るので handshake は必要な い
  10. GET /hoge HTTP/1.0 Host: example.com User-Agent: curl/7.64.1 Accept: */* 対応可能なコンテンツを提案

    リクエストヘッダ ブラウザが対応可能なコン テンツの種類を MIME で伝 えることを、コンテンツネ ゴシエーションと呼ぶ accept: image/webp webp 対応してます webp あげます 小ネタ
  11. ブラウザキャッシュ HTTP/1.1 200 OK cache-control: public, max-age=600 etag: "de5659f2" レスポンスヘッダ

    キャッシュしていい期間や ルールなどを提示 コンテンツが更新されている かどうかの判断に使う ありがとう〜 これは 600 秒だ けキャッシュし ていいよ
  12. GET /hoge If-None-Match: "de5659f2" リクエストヘッダ HTTP/1.1 304 OK cache-control: public,

    max-age=600 etag: "de5659f2" コンテンツ更新 されてる? してないから、 またキャッシュ していいよ ステータス 304 の場合は、コンテ ンツをダウンロードせず、手元の キャッシュを利用する 再リクエストが 600 秒を超えた場合 レスポンスヘッダ ① ② ③ ETag の動き 送られてきた ETag を見 て、サーバが最新のファ イル状況と比較する
  13. HTTP/1.1 200 OK set-cookie: key=value; expires=Fri, 25-Sep-2020 22:21:50 GMT; path=/;

    domain=.example.com; Secure; SameSite=none レスポンスヘッダ ログイン情報を cookie に保存し ておいて cookie はサーバからもらう cookie 保存の指示 保存するキーと値 cookie の保存期間 やルールなどの情報
  14. XMLHttpRequest? Ajax? SSL/TLS? HTTP2? HTTP3? OAuth? JWT? fetchAPI? WebRTC? WebPush?

    webcoket? AMP? CDN? ロードバランサ? ブラウザー君の冒険は まだまだ続く…!(かも)