SDN次世代工場ネットワーク - NEC(Japan)...SDN次世代工場ネットワーク ビジネス環境の変化とこれからの工場のあるべき姿 NECが考える「次世代工場ネットワーク」
HTML はネットワークをいかに変えてきたか
-
Upload
- -
Category
Technology
-
view
113 -
download
0
Transcript of 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 の進化に対応した新しいプロトコルを知る
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 4
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
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 6
HTTP• テキスト ベースのヘッダーで情報を交換
• ステートレス プロトコル• リクエスト⇔レスポンスの一往復でセッション終了
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 7
TCP• 3 Way Handshake
SYN
SYN-ACK
ACK
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 8
DNS• ネームサーバーへの再帰的問い合わせ
DNSサーバー
Rootサーバー
gTDL
ccTDL
ノードクライアント
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 9
HTML5 に向けた Web の進化2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!"
| CC BY-NC-ND 10
最初の HTML• 静的なテキスト コンテンツ
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 11
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
AJAX (XMLHTTP Request, XHR)• DHTML(Dynamic HTML)• ページの一部だけ書き換えたい• ページ更新せずデータを取得したい
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 13
そして HTML5
•Application Cache•Web Worker•Service Worker
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 14
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 18
解決のために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 セッションをクローズしない仕組み
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 20
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
余計にトラフィックが増えるじゃんorz
Pre-request• ( ブラウザーなどが ) ユーザーがアクセスする前に、これからアクセスされるであろうリソースにあらかじめリクエストを送っておく• ページ内に <a href="URL"> リンクがあったら
• "URL" の名前解決 (DNS リクエスト ) を済ませておく• "URL" にアクセスして先にコンテンツをキャッシュしておく
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 22
Web Socket• クライアント / サーバー間に持続的なバックグラウンドのデータ通信チャンネルを作る
• XHR は HTTP ベースの通信なのでリクエスト⇔レスポンスでセッションが切れる• Web Socket は明示的にクローズするまでセッションが切れない
• サーバー プッシュ ( サーバーからの能動的な送信 ) が可能• サーバーから随時の通知を行うようなアプリケーションが作りやすい
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 23
HTTP2• HTTP の新しいバージョン• 1 TCP セッションで複数の HTTP セッションを同時実行
( ストリームの多重化 )• バイナリ ベースの圧縮されたヘッダー (HPACK)• ストリームの優先度設定• ストリームごとのフロー制御• サーバー プッシュ
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 24
TCP セッションHTTP セッション
HTTP セッション
HTTP セッション
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 25
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
まとめ2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!"
| CC BY-NC-ND 27
Agenda ( 再掲 )• HTTP と Web を支えるプロトコルを知る• HTTP と Web の進化をおさらいする• HTTP と Web の進化に対応した新しいプロトコルを知る
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 28
まとめ• HTML の進化はネットワーク プロトコルにも影響を与えている• HTML とネットワークの両方の進化で新しい Web の世界が広がっている
2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-ND 29
Any question?
• ご清聴ありがとうございました2016/10/29 ©Murachi Akira at "Happy 2nd birthday HTML5 !!" | CC BY-NC-
ND 30