Download - HTML はネットワークをいかに変えてきたか
![Page 1: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/1.jpg)
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/
![Page 2: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/2.jpg)
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
![Page 3: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/3.jpg)
宣伝
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 3
• トレーニング、講習を承ります• プログラミング系 (JavaScript 、 PHP 、 Java 、 VB 、 C#)• IT スキル (Office 、ネットワークなど ) 系• 情報セキュリティ系• 情報処理技術者試験対策 (IT パスポート、初級、中級、情報セキュリティマネジメント )
• 情報セキュリティ マネジメント、個人情報保護のコンサルティングと技術支援を承ります
![Page 4: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/4.jpg)
Agenda• HTTP と Web を支えるプロトコルを知る• HTTP と Web の進化をおさらいする• HTTP と Web の進化に対応した新しいプロトコルを知る
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 4
![Page 5: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/5.jpg)
Web を支えるプロトコル2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!"
| CC BY-NC-ND 5
![Page 6: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/6.jpg)
Web を支えるプロトコルたち• HTTP
• Hypertext Transfer Protocol• TCP
• Transmission Control Protocol• DNS
• Domain Name System
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 6
![Page 7: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/7.jpg)
HTTP• テキスト ベースのヘッダーで情報を交換
• ステートレス プロトコル• リクエスト⇔レスポンスの一往復でセッション終了
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 7
![Page 8: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/8.jpg)
TCP• 3 Way Handshake
SYN
SYN-ACK
ACK
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 8
![Page 9: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/9.jpg)
DNS• ネームサーバーへの再帰的問い合わせ
DNSサーバー
Rootサーバー
gTDL
ccTDL
ノードクライアント
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 9
![Page 10: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/10.jpg)
HTML5 に向けた Web の進化2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!"
| CC BY-NC-ND 10
![Page 11: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/11.jpg)
最初の HTML• 静的なテキスト コンテンツ
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 11
![Page 12: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/12.jpg)
Media / CSS / JavaScript• Media
• Web ページに画像を入れたい• Web ページからサウンドを鳴らしたい• Web ページで動画を再生したい
• CSS• Web ページできれいなデザイン / レイアウトを使いたい
• JavaScript• Web ページに動きを付けたい• Web ページ内でプログラムを動作させたい
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 12
![Page 13: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/13.jpg)
AJAX (XMLHTTP Request, XHR)• DHTML(Dynamic HTML)• ページの一部だけ書き換えたい• ページ更新せずデータを取得したい
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 13
![Page 14: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/14.jpg)
そして HTML5
•Application Cache•Web Worker•Service Worker
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 14
![Page 15: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/15.jpg)
HTML5 でわかったインターネット プロトコルの弱点2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!"
| CC BY-NC-ND 15
![Page 16: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/16.jpg)
HTTP の問題点• テキスト ベースのヘッダーが冗長
• テキストは圧縮されていない• 同じような情報を何度もやりとりしている
• ステートレスでセッション管理ができない• 一つの HTTP セッションで一つの TCP セッションを占有する 効率が悪い2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-
ND 16
![Page 17: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/17.jpg)
TCP• 1 セッションが 1 HTTP セッションに占有される• セッション確立のたびに 3 Way Handshake が必要• 輻輳制御 ( スロー スタートとか ) で遅くなる
効率が悪い2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-
ND 17
![Page 18: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/18.jpg)
DNS•名前解決の必要な URL 数の増加
• 1 ページに多数のオリジンのコンテンツが混雑
DNSサーバー
Rootサーバー
gTDL
ccTDL
ノード クライアント
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 18
![Page 19: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/19.jpg)
解決のために2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!"
| CC BY-NC-ND 19
![Page 20: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/20.jpg)
Keep-alive• HTTP Keep-alive
• HTTP セッション ( リクエスト⇔レスポンス ) 終了で TCP セッションを終了せず、 TCP セッションを別の HTTP セッションに使いまわす• HTTP 1.1 から既定で有効になっている
• TCP Keep-alive• アプリケーション層で無通信でも TCP セッションをクローズしない仕組み
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 20
![Page 21: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/21.jpg)
HTTP パイプライン• 複数の HTTP リクエストを同時実行する仕組み• クライアントがサーバーの応答を待たずに次の HTTP リクエストを送信できる
ただしサーバーはリクエスト順にしかレスポンスできないhttp://blog.redbox.ne.jp/http2-cdn.html から引用
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 21
![Page 22: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/22.jpg)
余計にトラフィックが増えるじゃんorz
Pre-request• ( ブラウザーなどが ) ユーザーがアクセスする前に、これからアクセスされるであろうリソースにあらかじめリクエストを送っておく• ページ内に <a href="URL"> リンクがあったら
• "URL" の名前解決 (DNS リクエスト ) を済ませておく• "URL" にアクセスして先にコンテンツをキャッシュしておく
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 22
![Page 23: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/23.jpg)
Web Socket• クライアント / サーバー間に持続的なバックグラウンドのデータ通信チャンネルを作る
• XHR は HTTP ベースの通信なのでリクエスト⇔レスポンスでセッションが切れる• Web Socket は明示的にクローズするまでセッションが切れない
• サーバー プッシュ ( サーバーからの能動的な送信 ) が可能• サーバーから随時の通知を行うようなアプリケーションが作りやすい
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 23
![Page 24: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/24.jpg)
HTTP2• HTTP の新しいバージョン• 1 TCP セッションで複数の HTTP セッションを同時実行
( ストリームの多重化 )• バイナリ ベースの圧縮されたヘッダー (HPACK)• ストリームの優先度設定• ストリームごとのフロー制御• サーバー プッシュ
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 24
![Page 25: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/25.jpg)
TCP セッションHTTP セッション
HTTP セッション
HTTP セッション
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 25
![Page 26: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/26.jpg)
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
![Page 27: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/27.jpg)
まとめ2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!"
| CC BY-NC-ND 27
![Page 28: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/28.jpg)
Agenda ( 再掲 )• HTTP と Web を支えるプロトコルを知る• HTTP と Web の進化をおさらいする• HTTP と Web の進化に対応した新しいプロトコルを知る
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 28
![Page 29: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/29.jpg)
まとめ• HTML の進化はネットワーク プロトコルにも影響を与えている• HTML とネットワークの両方の進化で新しい Web の世界が広がっている
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 29
![Page 30: HTML はネットワークをいかに変えてきたか](https://reader036.vdocuments.mx/reader036/viewer/2022062412/58a4d2171a28ab480e8b6dd7/html5/thumbnails/30.jpg)
Any question?
• ご清聴ありがとうございました2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-
ND 30