狠狠撸

HTML はネットワークを
いかに変えてきたか
Happy 2nd birthday HTML5 !!
Murachi Akira (CPS Corp.) aka hebikuzure
This material provided by CC BY-NC-ND 4.0. See http://creativecommons.org/licenses/by-nc-nd/4.0/

About me
? 村地彰 aka hebikuzure
? 株式会社シーピーエス代表取締役
? Microsoft MVP (Most Valuable Professional)
? 2011年 4月～
? 受賞分野 Visual Studio and Development Technologies
(Front End Web Dev)
2?Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND2016/10/29

宣伝
2016/10/29 ?Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 3
? トレーニング、講習を承ります
? プログラミング系 (JavaScript、PHP、Java、VB、C#)
? IT スキル (Office、ネットワークなど) 系
? 情報セキュリティ系
? 情報処理技術者試験対策 (IT パスポート、初級、中級、情報セキュリ
ティマネジメント)
? 情報セキュリティマネジメント、個人情報保護のコンサルティ
ングと技術支援を承ります

Agenda
? HTTP と Web を支えるプロトコルを知る
? HTTP と Web の進化をおさらいする
? HTTP と Web の進化に対応した新しいプロトコルを知る

Web を支えるプロトコル
2016/10/29
?Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC
BY-NC-ND
5

Web を支えるプロトコルたち
? HTTP
? Hypertext Transfer Protocol
? TCP
? Transmission Control Protocol
? DNS
? Domain Name System

HTTP
? テキストベースのヘッダーで情報を交換
? ステートレスプロトコル
? リクエスト?レスポンスの一往復でセッション終了

TCP
? 3 Way Handshake
SYN
SYN-ACK
ACK

DNS
? ネームサーバーへの再帰的問い合わせ
DNS
サーバー
Root
サーバー
gTDL
ccTDL
ノード
クライアント

HTML5に向けた Web の進化
2016/10/29
BY-NC-ND
10

最初の HTML
? 静的なテキストコンテンツ

Media / CSS / JavaScript
? Media
? Web ページに画像を入れたい
? Web ページからサウンドを鳴らしたい
? Web ページで動画を再生したい
? CSS
? Web ページできれいなデザイン/レイアウトを使いたい
? JavaScript
? Web ページに動きを付けたい
? Web ページ内でプログラムを動作させたい

AJAX (XMLHTTP Request, XHR)
? DHTML(Dynamic HTML)
? ページの一部だけ書き換えたい
? ページ更新せずデータを取得したい

そして HTML5
?Application Cache
?Web Worker
?Service Worker

HTML5 でわかった
インターネットプロトコルの弱点
2016/10/29
BY-NC-ND
15

HTTP の問題点
? テキストベースのヘッダーが冗長
? テキストは圧縮されていない
? 同じような情報を何度もやりとりしている
? ステートレスでセッション管理ができない
? 一つの HTTP セッションで一つの TCP セッショ
ンを占有する
効率が悪い

TCP
? 1セッションが 1 HTTP セッションに占有される
? セッション確立のたびに 3 Way Handshake が必要
? 輻輳制御(スロースタートとか)で遅くなる
効率が悪い

DNS
?名前解決の必要な URL 数の増加
?1ページに多数のオリジンのコンテンツが混雑
DNS
サーバー
Root
サーバー
gTDL
ccTDL
ノード
クライアント

解決のために
2016/10/29
BY-NC-ND
19

Keep-alive
? HTTP Keep-alive
? HTTP セッション(リクエスト?レスポンス)終了で
TCP セッションを終了せず、TCP セッションを別の
HTTP セッションに使いまわす
? HTTP 1.1 から既定で有効になっている
? TCP Keep-alive
? アプリケーション層で無通信でも TCP セッションを
クローズしない仕組み

HTTP パイプライン
? 複数の HTTP リクエストを同時実行する仕組み
? クライアントがサーバーの応答を待たずに次の HTTP リクエス
トを送信できる
ただしサーバーは
リクエスト順にしか
レスポンスできない
http://blog.redbox.ne.jp/http2-cdn.html から引用

余計にトラフィックが増えるじゃんorz
Pre-request
? (ブラウザーなどが)ユーザーがアクセスする前に、
これからアクセスされるであろうリソースにあら
かじめリクエストを送っておく
? ページ内に <a href="URL"> リンクがあったら
? "URL" の名前解決(DNS リクエスト)を済ませておく
? "URL" にアクセスして先にコンテンツをキャッシュ
しておく

Web Socket
? クライアント/サーバー間に持続的なバックグラウンド
のデータ通信チャンネルを作る
? XHR は HTTP ベースの通信なのでリクエスト?レスポンス
でセッションが切れる
? Web Socket は明示的にクローズするまでセッションが切れ
ない
? サーバープッシュ(サーバーからの能動的な送信)が可能
? サーバーから随時の通知を行うようなアプリケーションが作
りやすい

HTTP2
? HTTP の新しいバージョン
? 1 TCP セッションで複数の HTTP セッションを同時実行
(ストリームの多重化)
? バイナリベースの圧縮されたヘッダー(HPACK)
? ストリームの優先度設定
? ストリームごとのフロー制御
? サーバープッシュ

TCP セッション
HTTP セッション
2016/10/29
BY-NC-ND
25

QUIC
? TCP ではなく UDP を利用する新しいプロトコル
? TCP + TLS (+ HTTP2) を置き換えるイメージ
http://postd.cc/googles-quic-protocol-moving-web-tcp-udp/ から引用

まとめ
2016/10/29
BY-NC-ND
27

Agenda (再掲)
? HTTP と Web を支えるプロトコルを知る
? HTTP と Web の進化をおさらいする
? HTTP と Web の進化に対応した新しいプロトコルを知る

まとめ
? HTML の進化はネットワークプロトコルにも
影響を与えている
? HTML とネットワークの両方の進化で新しい
Web の世界が広がっている

Any question?
? ご清聴ありがとうございました

狠狠撸

HTML はネットワークをいかに変えてきたか

More Related Content

HTML はネットワークをいかに変えてきたか

狠狠撸

HTML はネットワークを いかに変えてきたか

More Related Content

HTML はネットワークを いかに変えてきたか

HTML はネットワークをいかに変えてきたか

HTML はネットワークをいかに変えてきたか