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

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 はネットワークをいかに変えてきたか

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

Recommended

More Related Content

What's hot

What's hot(10)

Viewers also liked

Viewers also liked(20)

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

Similar to HTML はネットワークをいかに変えてきたか(20)

More from 彰村地

More from 彰村地(16)

Recently uploaded

Recently uploaded(12)