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-ND 2016/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 ©Murachi Akira at "Happy 2nd birthday HTML5 !!"

| CC 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 ©Murachi Akira at "Happy 2nd birthday HTML5 !!"

| CC BY-NC-ND 15

HTTP の問題点• テキストベースのヘッダーが冗長

• テキストは圧縮されていない• 同じような情報を何度もやりとりしている

• ステートレスでセッション管理ができない• 一つの HTTP セッションで一つの TCP セッションを占有する効率が悪い2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-

ND 16

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

効率が悪い2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-

ND 17

DNS•名前解決の必要な URL 数の増加

• 1 ページに多数のオリジンのコンテンツが混雑

DNSサーバー

Rootサーバー

gTDL

ccTDL

ノードクライアント


解決のために2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!"

| CC 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 セッション

HTTP セッション

HTTP セッション


QUIC• TCP ではなく UDP を利用する新しいプロトコル• TCP + TLS (+ HTTP2) を置き換えるイメージ

http://postd.cc/googles-quic-protocol-moving-web-tcp-udp/ から引用2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-

ND 26

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


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


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

Technology

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