A brief introduction to SPDY - 邁向 HTTP/2.0

34,633 views

Published on

2013/1/13

2 Comments
187 Likes
Statistics
Notes
No Downloads
Views
Total views
34,633
On SlideShare
0
From Embeds
0
Number of Embeds
14,419
Actions
Shares
0
Downloads
633
Comments
2
Likes
187
Embeds 0
No embeds

No notes for slide

A brief introduction to SPDY - 邁向 HTTP/2.0

  1. 1. A brief introduction toSPDY 邁向 HTTP/2.0http://ihower.tw 2013/1/13 1 / 111 ⾴頁
  2. 2. Disclaimer你有聽過 HTTP 嗎?沒有的⼈人可以離開了 2
  3. 3. Who am I?• 張⽂文鈿 a.k.a. ihower • http://ihower.tw• 熱情⾖豆⾏行動樂活科技 技術⻑⾧長• RubyConf Taiwan 的主辦⼈人 • http://rubyconf.tw• 今天我是⼀一位關⼼心網⾴頁效能的 網站開發者 3
  4. 4. HTTP v.s. SPDY Demo (Nginx with SPDY patch) 4
  5. 5. 5
  6. 6. 兩倍界⺩王拳!! 6 聽說今年 WebConf ⼀一定要有七⻯⿓龍珠梗?
  7. 7. Try ithttps://www.ihower.tw 7
  8. 8. Agenda• Why SPDY • HTTP/1.0 • HTTP/1.1• What’s SPDY • 1. • 2. • 3. • 4.• Conclusion 8
  9. 9. 1. Why SPDY 9
  10. 10. 199913k(zipped)-14k(unzipped) 10
  11. 11. 2012200k(zipped) - 600k(unzipped) 11
  12. 12. 平均每個網⾴頁有88個 Requests 74 requests 705kb 10 domains 兩年時間 (2010/11~2013/1) 88 requests 1280kb 14 domains http://httparchive.org/trends.php 12
  13. 13. Web Usability• 根據知名學者 Jakob Nielsen 研究 • 0.1 秒 - 感覺是⾺馬上 • 1.0 秒 - 思緒開始飄移 • 10 秒 - 這東⻄西壞了吧? http://www.nngroup.com/articles/response-times-3-important-limits/ 13
  14. 14. KISSmetric: 超過 4 秒,Bounce Rate 增加 25% http://blog.kissmetrics.com/loading-time/?wide=1 14
  15. 15. ⼀一秒鐘幾⼗十萬上下,網⾴頁載⼊入速度真的很重要• Amazon 的網⾴頁載⼊入時間每多⼀一秒,該公 司的年度營收就減少 16 億美元• Google 的搜尋時間每多 0.4 秒,每天的 搜尋次數就會減少 8 百萬 http://www.inside.com.tw/2012/12/28/page-speed-really-does-matter 15
  16. 16. 全世界的平均載⼊入速度 (Google Analytics) Desktop: ~2.7s Mobile 更慢: ~4.8s (中位數)http://analytics.blogspot.tw/2012/04/global-site-speed-overview-how-fast-are.html 16
  17. 17. 迷思: 加頻寬無⽤用 光速是物理限制,限制了 RTT (Round-Trip Time) More Bandwidth Doesn’t Matter (Much)http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ 17
  18. 18. 迷思: 加頻寬無⽤用 光速是物理限制,限制了 RTT (Round-Trip Time) 3Mbps 之後就沒什麼差了 More Bandwidth Doesn’t Matter (Much)http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ 17
  19. 19. 迷思: 加頻寬無⽤用 光速是物理限制,限制了 RTT (Round-Trip Time) RTT 降到 0 ⾴頁⾯面載⼊入竟然還 要 240ms 3Mbps 之後就沒什麼差了 More Bandwidth Doesn’t Matter (Much)http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ 17
  20. 20. ⼤大頻寬可以加快下載 Ubuntu,不過超過 ~3Mbps 之後,對 Page Load Time 就沒什麼差了 18
  21. 21. 所以現在的 HTTP 有什麼問題? 19
  22. 22. HTTP/1.0 (1996) Client Server1.TCP setup handshake2. TCP slow-start open(congestion control) close open close open close 20
  23. 23. HTTP/1.0+ 後推出 persistent connection (keep-alive) Client Server open close 21
  24. 24. HTTP/1.1 Pipelining ? 在同⼀一個 Connection 中,平⾏行發送多個 Requests Client Server open close 22
  25. 25. HTTP/1.1 Pipelining 的失敗:Head of Line Blocking Client Server open 1 2 3 B Server 必須照順序回 L 如果 Response 1 很慢卡住 O C 了,就整個卡住了 K 1 2 3 close 23
  26. 26. HTTP/1.1 Pipelining 的失敗: 有⾵風險,瀏覽器預設關閉• 少數 Server 不⽀支援,或是搞錯回傳順序• Proxy server ⼤大多不⽀支援• 只有 idempotent (無side-effects) 的 requests 可以 pipelined• Client 缺乏明確的機制知道 Server-side 是否 ⽀支援 http://www.subbu.org/blog/2011/02/can-pipelining-help http://www.chromium.org/developers/design-documents/network-stack/http-pipelining https://devcentral.f5.com/blogs/us/http-pipelining-a-security-risk-without-real-performance-benefits http://www.guypo.com/mobile/http-pipelining-big-in-mobile/ 24 https://bugzilla.mozilla.org/show_bug.cgi?id=264354
  27. 27. 那怎麼辦? 瀏覽器要怎麼平⾏行發送 Requests 來加快⾴頁⾯面載⼊入速度?
  28. 28. 開 Multiple TCP connections 來平⾏行發送 Requests (瀏覽器⼤大多設每個 domain 6個) Client Serveropen open openopen open openclose close closeclose close close 26
  29. 29. 瀑布流 Requests Request HTML Request Javascript Request CSS Request CSS Request Image Request Image Request Image Request Image Request Image Request Image Request Image Request Image Request Imagetime 27
  30. 30. TCP Connection 是個需要熱 ⾝身的通道 第⼀一個 HTTP Request( TCP handshake 和 slow start) 熱⾝身後 HTTP Request 28
  31. 31. TCP Handshake 耗時 1.5 RTThttp://www.tcpipguide.com/free/t_TCPConnectionEstablishmentProcessTheThreeWayHandsh-3.htm 29
  32. 32. Slow Start is TCP feature (not bug, sorry)• Slow Start 是 TCP congestion control (壅 塞控制)的關鍵演算法• ⼀一開始 CWND 為 2 (最近Linux改 (congestion window) 為10)了,如果沒問題,才指數乘兩倍加⼤大 流量直到有封包遺失 30
  33. 33. 瀏覽器的 6 connections需要個別熱⾝身,每個都是成本 HTTP HTTP HTTP HTTP HTTP HTTP 31
  34. 34. 瀏覽器的 6 connections需要個別熱⾝身,每個都是成本 HTTP HTTP HTTP HTTP HTTP HTTP 32
  35. 35. 瀏覽器的 6 connections需要個別熱⾝身,每個都是成本 HTTP HTTP HTTP HTTP HTTP HTTP 33
  36. 36. 瀏覽器的 6 connections需要個別熱⾝身,每個都是成本 HTTP HTTP HTTP HTTP HTTP HTTP 34
  37. 37. 瀏覽器的 6 connections需要個別熱⾝身,每個都是成本 HTTP HTTP HTTP HTTP HTTP HTTP 35
  38. 38. 瀏覽器的 6 connections需要個別熱⾝身,每個都是成本 HTTP HTTP HTTP HTTP HTTP HTTP 36
  39. 39. 瀏覽器的 6 connections需要個別熱⾝身,每個都是成本 HTTP HTTP HTTP HTTP HTTP HTTP 37
  40. 40. 第⼀一個沒熱⾝身的 request 會慢的多 Request HTML Request Javascript Request CSS Request CSS Request Image Request Image Request Image Request Image Request Image Request Image Request Image Request Image Request Imagetime 38
  41. 41. ⽽而且這六個連線彼此之間還會競爭頻寬,讓 CWND 不準 :( HTTP HTTP HTTP HTTP HTTP HTTP 39
  42. 42. 在 HTTP/1.1 的環境下如何做 Web 優化? 40
  43. 43. 在 HTTP/1.1 的環境下如何做 Web 優化? 40
  44. 44. 在 HTTP/1.1 的環境下如何做 Web 優化? 40
  45. 45. Web Optimization: Reduce Requests• 因為⼀一次只有六個通道可以發 Request,所以 最好把 Requests 合併起來,減少 Requests 數 • CSS, JavaScript files • spriting images 41
  46. 46. Web Optimization: Domain Sharding• 將 Assets (CSS, JavaScript, Images) 等⽤用不同 Domain,好突破瀏覽器⾄至多 6 個 connections 的限制 • 例如 asset1.example.com, asset2.example.com, asset3.example.com• 可以讓 static content 不帶度多餘的 cookie• 缺點 • DNS lookup time • 多開 TCP Connection 還是需要熱⾝身 42
  47. 47. It’s not optimization. It’s “work around” HTTP/1.1 flaw! 43
  48. 48. HTTP/1.1 Headers 44
  49. 49. HTTP/1.1 Headers• 約 200 bytes 到 2KB,平均 700-800 bytes 44
  50. 50. HTTP/1.1 Headers• 約 200 bytes 到 2KB,平均 700-800 bytes• 每個 Request/Response 幾乎都重複 44
  51. 51. HTTP/1.1 Headers• 約 200 bytes 到 2KB,平均 700-800 bytes• 每個 Request/Response 幾乎都重複 • User-agent 44
  52. 52. HTTP/1.1 Headers• 約 200 bytes 到 2KB,平均 700-800 bytes• 每個 Request/Response 幾乎都重複 • User-agent • Cookies 44
  53. 53. HTTP/1.1 Headers• 約 200 bytes 到 2KB,平均 700-800 bytes• 每個 Request/Response 幾乎都重複 • User-agent • Cookies• 竟然沒辦法壓縮 44
  54. 54. anyway, HTTP/1.1 is so old...該是改變的時候了 45
  55. 55. 2. What’s SPDY 46
  56. 56. 什麼是 SPeeDY SPDY HTTP SSL TCP 47
  57. 57. 什麼是 SPeeDY• SPDY 是⼀一個 Application Layer 的通訊協定, SPDY HTTP ⽤用以替換 HTTP SSL TCP 47
  58. 58. 什麼是 SPeeDY• SPDY 是⼀一個 Application Layer 的通訊協定, SPDY HTTP ⽤用以替換 HTTP SSL• 沿⽤用了 HTTP 的語義,但是修改了傳輸⽅方式 TCP 47
  59. 59. 什麼是 SPeeDY• SPDY 是⼀一個 Application Layer 的通訊協定, SPDY HTTP ⽤用以替換 HTTP SSL• 沿⽤用了 HTTP 的語義,但是修改了傳輸⽅方式 TCP• Google 2009 年推出 47
  60. 60. 什麼是 SPeeDY• SPDY 是⼀一個 Application Layer 的通訊協定, SPDY HTTP ⽤用以替換 HTTP SSL• 沿⽤用了 HTTP 的語義,但是修改了傳輸⽅方式 TCP• Google 2009 年推出• 2012/11 成為 HTTPBis Working Group 的 HTTP 2.0 draft 47
  61. 61. 什麼是 SPeeDY• SPDY 是⼀一個 Application Layer 的通訊協定, SPDY HTTP ⽤用以替換 HTTP SSL• 沿⽤用了 HTTP 的語義,但是修改了傳輸⽅方式 TCP• Google 2009 年推出• 2012/11 成為 HTTPBis Working Group 的 HTTP 2.0 draft• 預計 2014/11 定案,送 IETF 成為 RFC 標準 47
  62. 62. SPDY 的要求是 48
  63. 63. SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間 48
  64. 64. SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括: 48
  65. 65. SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括: • HTTP methods 48
  66. 66. SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括: • HTTP methods • Status Codes 48
  67. 67. SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括: • HTTP methods • Status Codes • URIs 48
  68. 68. SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括: • HTTP methods • Status Codes • URIs • Headers fields 48
  69. 69. SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括: • HTTP methods • Status Codes • URIs • Headers fields • 這樣只要升級 Web Server 和 Browser 即可, 應⽤用程式不需要改 48
  70. 70. ... we’re not replacing all of HTTP — themethods, status codes, and most of theheaders you use today will be the same.Instead, we’re re-defining how it gets used “onthe wire” so it’s more efficient, and so that itis more gentle to the Internet itself ....- Mark Nottingham (chair, HTTPBis Working Group) 49
  71. 71. ⺫⽬目前的佈署情況如何? 50
  72. 72. Chrome+Firefox+Opera+Android 約 50% 的瀏覽器⽀支援 SPDY 51 http://caniuse.com/spdy
  73. 73. 哪些廠商在⽤用?• Google (Search, Gmail, Docs, Drive, Groups, Reader...etc)• Google App Engine + SSL users• Twitter• Wordpress.com• LINE• Amazon Kindle Fire• Facebook (跟進中)• Akamai (跟進中)• Cloudflare (跟進中) 52
  74. 74. 哪些 Server 可⽤用?• Apache mod_spdy • https://developers.google.com/speed/spdy/mod_spdy/• Nginx 1.3.X SPDY patch • http://nginx.org/patches/spdy/README.txt• Jetty Web Server • http://wiki.eclipse.org/Jetty/Feature/SPDY• node-spdy • https://github.com/indutny/node-spdy 53
  75. 75. Google SPDY ⽩白⽪皮書Top 25 網站 Page Load Time 測試 平均快 39%-55% 54 http://www.chromium.org/spdy/spdy-whitepaper
  76. 76. SPDY 特點 55
  77. 77. SPDY 特點• 1. SSL is required 55
  78. 78. SPDY 特點• 1. SSL is required• 2. Multiplexed streams over a single TCP connection 55
  79. 79. SPDY 特點• 1. SSL is required• 2. Multiplexed streams over a single TCP connection• 3. HTTP header compression 55
  80. 80. SPDY 特點• 1. SSL is required• 2. Multiplexed streams over a single TCP connection• 3. HTTP header compression• 4. Server Push 55
  81. 81. 1. SSL (TLS, Transport Layer Security)TLS False StartTLS Snap Start https://technotes.googlecode.com/git/nextprotoneg.html 56
  82. 82. 1. SSL (TLS, Transport Layer Security) • Secure by default,都 2013 年了,任何需要登⼊入的網站,都應 該跑 HTTPSTLS False StartTLS Snap Start https://technotes.googlecode.com/git/nextprotoneg.html 56
  83. 83. 1. SSL (TLS, Transport Layer Security) • Secure by default,都 2013 年了,任何需要登⼊入的網站,都應 該跑 HTTPS • 不跑在 Port 80 或 443,肯定有防⽕火牆問題TLS False StartTLS Snap Start https://technotes.googlecode.com/git/nextprotoneg.html 56
  84. 84. 1. SSL (TLS, Transport Layer Security) • Secure by default,都 2013 年了,任何需要登⼊入的網站,都應 該跑 HTTPS • 不跑在 Port 80 或 443,肯定有防⽕火牆問題 • 以佈署觀點看,在 Port 443 上進⾏行擴充較可⾏行TLS False StartTLS Snap Start https://technotes.googlecode.com/git/nextprotoneg.html 56
  85. 85. 1. SSL (TLS, Transport Layer Security) • Secure by default,都 2013 年了,任何需要登⼊入的網站,都應 該跑 HTTPS • 不跑在 Port 80 或 443,肯定有防⽕火牆問題 • 以佈署觀點看,在 Port 443 上進⾏行擴充較可⾏行 • Google 推了 NPN (Next Protocol Negotiation) 標準是⼀一種 SSL Extension,可以溝通在 TLS 上要跑什麼通訊協定 (不限 SPDY)TLS False StartTLS Snap Start https://technotes.googlecode.com/git/nextprotoneg.html 56
  86. 86. 1. SSL (TLS, Transport Layer Security) • Secure by default,都 2013 年了,任何需要登⼊入的網站,都應 該跑 HTTPS • 不跑在 Port 80 或 443,肯定有防⽕火牆問題 • 以佈署觀點看,在 Port 443 上進⾏行擴充較可⾏行 • Google 推了 NPN (Next Protocol Negotiation) 標準是⼀一種 SSL Extension,可以溝通在 TLS 上要跑什麼通訊協定 (不限 SPDY) • 但是,SSL handshake 終歸是負擔 (多兩個RTT時間),所以 SPDY 在⾮非常⼩小的網⾴頁中(少於六個資源),速度反⽽而沒有⽐比較 快TLS False StartTLS Snap Start https://technotes.googlecode.com/git/nextprotoneg.html 56
  87. 87. 1. SSL (TLS, Transport Layer Security) • Secure by default,都 2013 年了,任何需要登⼊入的網站,都應 該跑 HTTPS • 不跑在 Port 80 或 443,肯定有防⽕火牆問題 • 以佈署觀點看,在 Port 443 上進⾏行擴充較可⾏行 • Google 推了 NPN (Next Protocol Negotiation) 標準是⼀一種 SSL Extension,可以溝通在 TLS 上要跑什麼通訊協定 (不限 SPDY) • 但是,SSL handshake 終歸是負擔 (多兩個RTT時間),所以 SPDY 在⾮非常⼩小的網⾴頁中(少於六個資源),速度反⽽而沒有⽐比較 快 • 進階問題:如何改善 SSL handshake latency?TLS False StartTLS Snap Start https://technotes.googlecode.com/git/nextprotoneg.html 56
  88. 88. 1. SSL (TLS, Transport Layer Security)• Secure by default,都 2013 年了,任何需 要登⼊入的網站,都應該跑 HTTPS https://technotes.googlecode.com/git/nextprotoneg.html 57
  89. 89. 1. SSL (TLS, Transport Layer Security)• Secure by default,都 2013 年了,任何需 要登⼊入的網站,都應該跑 HTTPS https://technotes.googlecode.com/git/nextprotoneg.html 57
  90. 90. 1. SSL (TLS, Transport Layer Security)• Secure by default,都 2013 年了,任何需 要登⼊入的網站,都應該跑 HTTPS https://technotes.googlecode.com/git/nextprotoneg.html 57
  91. 91. 1. SSL (TLS, Transport Layer Security)• Secure by default,都 2013 年了,任何需 要登⼊入的網站,都應該跑 HTTPS HTTP is hacker friendly (設計台詞) https://technotes.googlecode.com/git/nextprotoneg.html 57
  92. 92. Websocket success rates 2010 (chrome websocket team) Port 成功率 容易有 transparent 80 63% proxy 擋在中間亂改你 的東⻄西 61985 86% ⽤用⼀一個新的 Port 443 95% 跑在 443 上成功率最⾼高 http://www.ietf.org/mail-archive/web/hybi/current/msg01605.html 58
  93. 93. Next Protocol Negotiation (NPN) 我⽀支援 spdy/3 spdy/2 foobar SSL handshake Client Server 59
  94. 94. Next Protocol Negotiation (NPN) 我⽀支援 spdy/3 spdy/2 foobar SSL handshake Client Server 我選 spdy/2 60
  95. 95. 2. Multiplexed streams over a single TCP connection SPDY 61
  96. 96. 2.可以同時多個 Requests 做 Multiplexed 傳輸,並只⽤用 ⼀一條 TCP Connection SPDY 62
  97. 97. request 分拆成 control frame 和 data frame (request 改稱 stream) +----------------------------------+ |1| Version(15bits) | Type(16bits) | +----------------------------------+control frame: | Flags (8) | Length (24 bits) | +----------------------------------+ | Data | +----------------------------------+ +----------------------------------+ |0| Stream-ID (31bits) | +----------------------------------+ data frame: | Flags (8) | Length (24 bits) | +----------------------------------+ | Data | +----------------------------------+ 63
  98. 98. control frame: SYN_STREAM (request)• Stream-ID SPDY v2 Type +----------------------------------+ •奇數代表從 client 發的 |1| 2 | 1 | +----------------------------------+ •偶數代表從 server 發的 | Flags (8) | Length (24 bits) | +----------------------------------+• 需要指定 Length ⻑⾧長度 |X| Stream-ID (31bits) Request ID | +----------------------------------+• 可以設定 Priority 優先權 |X|Associated-To-Stream-ID (31bits)| +----------------------------------+ | Pri | Unused | | Priority +------------------ | | Name/value header block | | ... | Headers 64
  99. 99. Name/Value header block format +------------------------------------+ | Number of Name/Value pairs (int16) | +------------------------------------+• 連 Headers 的部份 | Length of name (int16) | +------------------------------------+ 也需要個別指定 | Name (string) | Length ⻑⾧長度 +------------------------------------+ | Length of value (int16) | +------------------------------------+ | Value (string) | +------------------------------------+ | (repeats) | 65
  100. 100. control frame: SYN_REPLY (response) SPDY v2 Type +----------------------------------+ |1| 2 | 2 | +----------------------------------+ | Flags (8) | Length (24 bits) | +----------------------------------+ |X| Stream-ID (31bits) Request ID | +----------------------------------+ | Unused | | +---------------- | | Name/value header block | | ... | Headers 66
  101. 101. data frame將資料拆個數個 data frame,Chrome 預設是 4K。但是 spec 沒有限制,建議不⽤用⼤大,好讓不同 stream 的 frames 可以交錯。 +----------------------------------+ |0| Stream-ID (31bits) Request ID | +----------------------------------+ | Flags (8) | Length (24 bits) | +----------------------------------+ | Data | +----------------------------------+ 67
  102. 102. 其他 control frames• RST_STREAM • 出錯時,通知對⽅方中斷重來• SETTINGS • 可以讓 client 設定 CWND 等• PING• ... 68
  103. 103. Client Serveropenclose 69
  104. 104. Client Serveropenclose 69
  105. 105. Client Serveropen SYN_STREAM 1close 69
  106. 106. Client Serveropen SYN_STREAM 1close 69
  107. 107. Client Serveropen SYN_STREAM 1 SYN_STREAM 3close 69
  108. 108. Client Serveropen SYN_STREAM 1 SYN_STREAM 3close 69
  109. 109. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5close 69
  110. 110. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5close 69
  111. 111. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5 SYN_REPLY 1close 69
  112. 112. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5 Data 1 SYN_REPLY 1close 69
  113. 113. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5 Data 1 + FIN Data 1 SYN_REPLY 1close 69
  114. 114. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5 Data 1 + FIN SYN_REPLY 3 Data 1 SYN_REPLY 1close 69
  115. 115. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5 Data 1 + FIN SYN_REPLY 3 Data 1 SYN_REPLY 1close SYN_REPLY 5 69
  116. 116. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5 Data 1 + FIN SYN_REPLY 3 Data 1 SYN_REPLY 1 Data 2close SYN_REPLY 5 69
  117. 117. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5 Data 1 + FIN SYN_REPLY 3 Data 1 SYN_REPLY 1 Data 2 + FIN Data 2close SYN_REPLY 5 69
  118. 118. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5 Data 1 + FIN SYN_REPLY 3 Data 1 Data 3 SYN_REPLY 1 Data 2 + FIN Data 2close SYN_REPLY 5 69
  119. 119. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 SYN_STREAM 5 Data 1 + FIN SYN_REPLY 3 Data 1 Data 3 SYN_REPLY 1 Data 2 + FIN Data 3 + FIN Data 2close SYN_REPLY 5 69
  120. 120. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 可以同時平⾏行發 Request SYN_STREAM 5 在⼀一條 TCP Connection 上 Data 1 + FIN SYN_REPLY 3 Data 1 Data 3 SYN_REPLY 1 Data 2 + FIN Data 3 + FIN Data 2close SYN_REPLY 5 69
  121. 121. Client Serveropen SYN_STREAM 1 SYN_STREAM 3 可以同時平⾏行發 Request SYN_STREAM 5 在⼀一條 TCP Connection 上 Data 1 + FIN SYN_REPLY 3 Frames 可以混雜交錯 Data 1 Data 3 有 Stream ID 可以識別 SYN_REPLY 1 Data 2 + FIN Data 3 + FIN Data 2close SYN_REPLY 5 69
  122. 122. chrome://net-internals#spdy 70
  123. 123. Benefit:Streams are multiplexedhttps://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 71
  124. 124. Benefit: Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 71
  125. 125. Benefit: Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id• 只有⼀一個TCP通道 https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 71
  126. 126. Benefit: Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id• 只有⼀一個TCP通道 • 只需 TCP setup 和 Slow-Start ⼀一次 https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 71
  127. 127. Benefit: Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id• 只有⼀一個TCP通道 • 只需 TCP setup 和 Slow-Start ⼀一次 • 沒有多個 connection 競爭,CWND 可以更⾼高 https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 71
  128. 128. Benefit: Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id• 只有⼀一個TCP通道 • 只需 TCP setup 和 Slow-Start ⼀一次 • 沒有多個 connection 競爭,CWND 可以更⾼高 • SPDY 甚⾄至讓 client 記得上次的 CWND 是多少,下次直接⽤用 https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 71
  129. 129. Benefit: Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id• 只有⼀一個TCP通道 • 只需 TCP setup 和 Slow-Start ⼀一次 • 沒有多個 connection 競爭,CWND 可以更⾼高 • SPDY 甚⾄至讓 client 記得上次的 CWND 是多少,下次直接⽤用 • 降低 Server 負擔,甚⾄至是 NAT 的 table 空間 https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 71
  130. 130. Benefit: Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id• 只有⼀一個TCP通道 • 只需 TCP setup 和 Slow-Start ⼀一次 • 沒有多個 connection 競爭,CWND 可以更⾼高 • SPDY 甚⾄至讓 client 記得上次的 CWND 是多少,下次直接⽤用 • 降低 Server 負擔,甚⾄至是 NAT 的 table 空間 • ⼩小檔案多也不怕,不需要合併起來(JS, CSS, Images等) https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 71
  131. 131. Benefit: Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id• 只有⼀一個TCP通道 • 只需 TCP setup 和 Slow-Start ⼀一次 • 沒有多個 connection 競爭,CWND 可以更⾼高 • SPDY 甚⾄至讓 client 記得上次的 CWND 是多少,下次直接⽤用 • 降低 Server 負擔,甚⾄至是 NAT 的 table 空間 • ⼩小檔案多也不怕,不需要合併起來(JS, CSS, Images等) • Anti-pattern: 拆分 domain 反⽽而增加連線負擔 https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 71
  132. 132. Benefit: Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id• 只有⼀一個TCP通道 • 只需 TCP setup 和 Slow-Start ⼀一次 • 沒有多個 connection 競爭,CWND 可以更⾼高 • SPDY 甚⾄至讓 client 記得上次的 CWND 是多少,下次直接⽤用 • 降低 Server 負擔,甚⾄至是 NAT 的 table 空間 • ⼩小檔案多也不怕,不需要合併起來(JS, CSS, Images等) • Anti-pattern: 拆分 domain 反⽽而增加連線負擔 • 弱項: 3-rd party domain 沒效果,還是需要多開連線 https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 71
  133. 133. Benefit:Streams are prioritizedhttps://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 72
  134. 134. Benefit:Streams are prioritized• 可以有優先順序,讓 Server 優先回傳重 要的 Resourcehttps://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 72
  135. 135. Benefit:Streams are prioritized• 可以有優先順序,讓 Server 優先回傳重 要的 Resource• 更進⼀一步的說,因為 frames 可以交錯, 可以先暫停不重要的 Stream,先傳重要 的 Streamhttps://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J 72
  136. 136. Server 還沒回傳完 Client 發了一個優先權 更高的 Stream 那麼 Ser ver 可以停下 來先回應重要的 Stream73 http://jurdak.com/CACM12.pdf
  137. 137. 3. HTTP header compression• HTTP headers ⾼高度重複,平均 800 bytes • Request URI, User-Agent, Cookies• 使⽤用 zlib compression• 進階問題:怎樣壓縮最有效率? 74
  138. 138. const unsigned char SPDY_dictionary_txt[] = { ! 0x00, 0x00, 0x00, 0x07, 0x6f, 0x70, 0x74, 0x69, - - - - o p t i SPDY/3 ! 0x6f, 0x6e, 0x73, 0x00, 0x00, 0x00, 0x04, 0x68, o n s - - - - h ! 0x65, 0x61, 0x64, 0x00, 0x00, 0x00, 0x04, 0x70, e a d - - - - p ! 0x6f, 0x73, 0x74, 0x00, 0x00, 0x00, 0x03, 0x70, o s t - - - - p Lookup ! 0x75, 0x74, 0x00, 0x00, 0x00, 0x06, 0x64, 0x65, u t - - - - d e ! 0x6c, 0x65, 0x74, 0x65, 0x00, 0x00, 0x00, 0x05, l e t e - - - - ! 0x74, 0x72, 0x61, 0x63, 0x65, 0x00, 0x00, 0x00, t r a c e - - -dictionary! ! ! 0x06, 0x61, 0x63, 0x63, 0x65, 0x70, 0x74, 0x00, 0x00, 0x0e, 0x61, 0x63, 0x63, 0x65, 0x74, 0x2d, 0x63, 0x68, 0x61, 0x72, 0x73, 0x00, 0x70, 0x65, - - t a - - c - c c a h e c a p c r t e s - p e ! 0x74, 0x00, 0x00, 0x00, 0x0f, 0x61, 0x63, 0x63, t - - - - a c c ! 0x65, 0x70, 0x74, 0x2d, 0x65, 0x6e, 0x63, 0x6f, e p t - e n c o ! 0x64, 0x69, 0x6e, 0x67, 0x00, 0x00, 0x00, 0x0f, d i n g - - - - ! 0x61, 0x63, 0x63, 0x65, 0x70, 0x74, 0x2d, 0x6c, a c c e p t - l ! 0x61, 0x6e, 0x67, 0x75, 0x61, 0x67, 0x65, 0x00, a n g u a g e - ! 0x00, 0x00, 0x0d, 0x61, 0x63, 0x63, 0x65, 0x70, - - - a c c e p ! 0x74, 0x2d, 0x72, 0x61, 0x6e, 0x67, 0x65, 0x73, t - r a n g e s ! 0x00, 0x00, 0x00, 0x03, 0x61, 0x67, 0x65, 0x00, - - - - a g e - ! 0x00, 0x00, 0x05, 0x61, 0x6c, 0x6c, 0x6f, 0x77, - - - a l l o w ! 0x00, 0x00, 0x00, 0x0d, 0x61, 0x75, 0x74, 0x68, - - - - a u t h ! 0x6f, 0x72, 0x69, 0x7a, 0x61, 0x74, 0x69, 0x6f, o r i z a t i o ! 0x6e, 0x00, 0x00, 0x00, 0x0d, 0x63, 0x61, 0x63, n - - - - c a c ! 0x68, 0x65, 0x2d, 0x63, 0x6f, 0x6e, 0x74, 0x72, h e - c o n t r ! 0x6f, 0x6c, 0x00, 0x00, 0x00, 0x0a, 0x63, 0x6f, o l - - - - c o ! 0x6e, 0x6e, 0x65, 0x63, 0x74, 0x69, 0x6f, 0x6e, n n e c t i o n ! 0x00, 0x00, 0x00, 0x0c, 0x63, 0x6f, 0x6e, 0x74, - - - - c o n t ! 0x65, 0x6e, 0x74, 0x2d, 0x62, 0x61, 0x73, 0x65, e n t - b a s e ! 0x00, 0x00, 0x00, 0x10, 0x63, 0x6f, 0x6e, 0x74, - - - - c o n t ! 0x65, 0x6e, 0x74, 0x2d, 0x65, 0x6e, 0x63, 0x6f, e n t - e n c o ! 0x64, 0x69, 0x6e, 0x67, 0x00, 0x00, 0x00, 0x10, d i n g - - - - ! 0x63, 0x6f, 0x6e, 0x74, 0x65, 0x6e, 0x74, 0x2d, c o n t e n t - ! 0x6c, 0x61, 0x6e, 0x67, 0x75, 0x61, 0x67, 0x65, l a n g u a g e ! 0x00, 0x00, 0x00, 0x0e, 0x63, 0x6f, 0x6e, 0x74, - - - - c o n t ! 0x65, 0x6e, 0x74, 0x2d, 0x6c, 0x65, 0x6e, 0x67, e n t - l e n g ! 0x74, 0x68, 0x00, 0x00, 0x00, 0x10, 0x63, 0x6f, t h - - - - c o ! 0x6e, 0x74, 0x65, 0x6e, 0x74, 0x2d, 0x6c, 0x6f, n t e n t - l o ! 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x00, 0x00, c a t i o n - - ! 0x00, 0x0b, 0x63, 0x6f, 0x6e, 0x74, 0x65, 0x6e, - - c o n t e n ! 0x74, 0x2d, 0x6d, 0x64, 0x35, 0x00, 0x00, 0x00, t - m d 5 - - - ! 0x0d, 0x63, 0x6f, 0x6e, 0x74, 0x65, 0x6e, 0x74, - c o n t e n t ! 0x2d, 0x72, 0x61, 0x6e, 0x67, 0x65, 0x00, 0x00, - r a n g e - - http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft3 ! 0x00, 0x0c, 0x63, 0x6f, 0x6e, 0x74, 75 0x65, 0x6e, - - c o n t e n ! 0x74, 0x2d, 0x74, 0x79, 0x70, 0x65, 0x00, 0x00, t - t y p e - -
  139. 139. Header Compression in HTTP 2.0 (討論中)• SPDY3 (可以壓到剩 15%~24%) • 但是被發現有潛在安全弱點 :(• Header Delta-Compression (可以壓到剩 19%~30%) http://trac.tools.ietf.org/wg/httpbis/trac/wiki/HTTP2Compression http://www.mnot.net/blog/2013/01/04/http2_header_compression 76
  140. 140. Header Compression in HTTP 2.0 (討論中)• SPDY3 (可以壓到剩 15%~24%) • 但是被發現有潛在安全弱點 :(• Header Delta-Compression (可以壓到剩 19%~30%) http://trac.tools.ietf.org/wg/httpbis/trac/wiki/HTTP2Compression http://www.mnot.net/blog/2013/01/04/http2_header_compression 76
  141. 141. anyway...Binary is the future 77
  142. 142. anyway... Binary is the future• SSL 時代 77
  143. 143. anyway... Binary is the future• SSL 時代• Content GZIP 壓縮 77
  144. 144. anyway... Binary is the future• SSL 時代• Content GZIP 壓縮• Header 也壓縮 77
  145. 145. anyway... Binary is the future• SSL 時代• Content GZIP 壓縮• Header 也壓縮• 整個結構乾脆改⽤用 Binary 結構並指定⻑⾧長 度,可以更⽅方便 parsing 77
  146. 146. anyway... Binary is the future• SSL 時代• Content GZIP 壓縮• Header 也壓縮• 整個結構乾脆改⽤用 Binary 結構並指定⻑⾧長 度,可以更⽅方便 parsing• Debug? we will see... 77
  147. 147. 回頭來看LINE 的故事 http://tech.naver.jp/blog/?p=2381 78
  148. 148. 回頭來看 LINE 的故事• Client 是⼿手機 App,不是瀏覽器 http://tech.naver.jp/blog/?p=2381 78
  149. 149. 回頭來看 LINE 的故事• Client 是⼿手機 App,不是瀏覽器• 2012/10 開始採⽤用 SPDY。Why? http://tech.naver.jp/blog/?p=2381 78
  150. 150. 回頭來看 LINE 的故事• Client 是⼿手機 App,不是瀏覽器• 2012/10 開始採⽤用 SPDY。Why? • HTTP 在⼀一個 Connection 裡無法平⾏行發送 http://tech.naver.jp/blog/?p=2381 78
  151. 151. 回頭來看 LINE 的故事• Client 是⼿手機 App,不是瀏覽器• 2012/10 開始採⽤用 SPDY。Why? • HTTP 在⼀一個 Connection 裡無法平⾏行發送 • ⾮非常多⼩小的 Request,其 Headers 浪費 http://tech.naver.jp/blog/?p=2381 78
  152. 152. 回頭來看 LINE 的故事• Client 是⼿手機 App,不是瀏覽器• 2012/10 開始採⽤用 SPDY。Why? • HTTP 在⼀一個 Connection 裡無法平⾏行發送 • ⾮非常多⼩小的 Request,其 Headers 浪費 • Long polling 需要多佔⼀一個 Connection,⽽而 且這個 Connection 什麼事都不能做,就只 能等著。 http://tech.naver.jp/blog/?p=2381 78
  153. 153. LINE 的故事(2) http://tech.naver.jp/blog/?p=2381 79
  154. 154. LINE 的故事(2)• LINE 怎麼⽤用 SPDY? http://tech.naver.jp/blog/?p=2381 79
  155. 155. LINE 的故事(2)• LINE 怎麼⽤用 SPDY? • 有些不需加密的連線不⽤用 SSL http://tech.naver.jp/blog/?p=2381 79
  156. 156. LINE 的故事(2)• LINE 怎麼⽤用 SPDY? • 有些不需加密的連線不⽤用 SSL • 如果需要⽤用 SSL 時,不⽤用 NPN http://tech.naver.jp/blog/?p=2381 79
  157. 157. LINE 的故事(2)• LINE 怎麼⽤用 SPDY? • 有些不需加密的連線不⽤用 SSL • 如果需要⽤用 SSL 時,不⽤用 NPN • 因為不是瀏覽器,不需要溝通 protocol http://tech.naver.jp/blog/?p=2381 79
  158. 158. LINE 的故事(2)• LINE 怎麼⽤用 SPDY? • 有些不需加密的連線不⽤用 SSL • 如果需要⽤用 SSL 時,不⽤用 NPN • 因為不是瀏覽器,不需要溝通 protocol • NPN 需要升級 OpenSSL 到 1.0.1 http://tech.naver.jp/blog/?p=2381 79
  159. 159. LINE 的故事(2)• LINE 怎麼⽤用 SPDY? • 有些不需加密的連線不⽤用 SSL • 如果需要⽤用 SSL 時,不⽤用 NPN • 因為不是瀏覽器,不需要溝通 protocol • NPN 需要升級 OpenSSL 到 1.0.1 • Port Scanning,⾃自動找可以⽤用的 Port http://tech.naver.jp/blog/?p=2381 79
  160. 160. LINE 的故事(3)• 成果: • 成功降低 Connections 數 • 增加了傳訊息的速度 http://tech.naver.jp/blog/?p=2381 80
  161. 161. 另⼀一個故事,DK ⼤大神在 MOPCON 的演講: ⾏行動網路上的API設計準則 http://mopcon.org/session.php 81
  162. 162. Dirty tricks 82
  163. 163. Dirty tricks• Reduce Request 82
  164. 164. Dirty tricks• Reduce Request • 合併 Request 好節省 RTT,例如數個 GET 82
  165. 165. Dirty tricks• Reduce Request • 合併 Request 好節省 RTT,例如數個 GET• 在 SPDY 下需要重新思考其必要性 82
  166. 166. Dirty tricks• Reduce Request • 合併 Request 好節省 RTT,例如數個 GET• 在 SPDY 下需要重新思考其必要性• 因為 SPDY 不需要多開 connection 就可以平 ⾏行發送 requests,並交錯回來。不需要特別 合併起來了 82
  167. 167. SPDY 可以幫助我們設計 finer-grained API ⽽而不犧牲效能 83
  168. 168. 4. Server Push 84
  169. 169. 不是即時聊天室⽤用的那個 Server Push• 不是 Comet• 不是 Ajax Long Polling• 不是 Web Socket 85
  170. 170. 情境:拿到 HTML 後,還需要再發 Request拿 CSS, JS, Images 網⾴頁才能載⼊入完成 Client Server open Request HTML HTML CSS JS Image Image 86
  171. 171. 情境:拿到 HTML 後,還需要再發 Request拿 CSS, JS, Images 網⾴頁才能載⼊入完成 Client Server open Request HTML HTML 有沒有辦法在⼀一個 RTT 就從 Server 拿 CSS 到全部的資料呢? JS Image Image 86
  172. 172. ⺫⽬目前的 HTTP 就有 work around 了 Inline Resource 當 CSS, JS 很⼩小時,Inline 進 HTML<html> <html>  <head>   <head>    <style>     <script type="text/javascript">      .yellow {background-color: yellow;}       /* contents of a small JavaScript file */      .blue {color: blue;}     </script>      .big { font-size: 8em; }   </head>      .bold { font-weight: bold; }   <body>    </style>     <div class="blue yellow big bold">    </head>       Hello, world!  <body>     </div>    <div class="blue yellow big bold">   </body>      Hello, world! </html>    </div>  </body></html>https://developers.google.com/speed/docs/mod_pagespeed/filter-css-inline 87
  173. 173. Inline Resource with Data URI <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"> ul.checklist li.complete { padding-left: 20px; background: white url(data:image/png;base64,iVBORw0KGgoAA AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6 P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC) no-repeat scroll left top; } window.open(data:text/html;charset=utf-8,%3C%21DOCTYPE%20 + html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%3Chead% + 3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhead% + 3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0A + %3C%2Fhtml%3E%0A%0D%0A,_blank,height=300,width=400); http://en.wikipedia.org/wiki/Data_URI_scheme 88
  174. 174. Inline Resource 的缺點• 沒辦法 Cache :(• Data URI 會增加實際檔案⼤大⼩小 (不壓縮的話約增加 1/3,雖然網⾴頁會 gzip,但畢竟還是增加⼤大⼩小)• 增加 coding 複雜性 89
  175. 175. SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store Client Server open Request HTML CSS Image Image Image HTML close 90
  176. 176. SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store Client Server open Request HTML Push CSS CSS Image Image Image HTML close 90
  177. 177. SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store Client Server open Request HTML Push CSS CSS Push Image Image Image Image HTML close 90
  178. 178. SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store Client Server open Request HTML Push CSS CSS Push Image Image Push Image Image Image HTML close 90
  179. 179. SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store Client Server open Request HTML Push CSS CSS Push Image Image Push Image Image Push Image Image HTML close 90
  180. 180. SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store Client Server open Request HTML Push CSS CSS Push Image Image Push Image Image Push Image Image 最後 Push HTML HTML close 90
  181. 181. SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store Client Server open Request HTML Push CSS CSS Push Image Image Push Image Image Push Image Image 最後 Push HTML HTML close 進階發揮: Push 下⼀一⾴頁 HTML 或 client-side template 等 90
  182. 182. SPDY 的 Server Push 91
  183. 183. SPDY 的 Server Push• Server 接收到 request 後 91
  184. 184. SPDY 的 Server Push• Server 接收到 request 後• 除了回傳 HTML 之外,也主動推送 CSS, JavaScript, Images 等資源到瀏覽器的 Cache Store (無需 client API ⽀支援) 91
  185. 185. SPDY 的 Server Push• Server 接收到 request 後• 除了回傳 HTML 之外,也主動推送 CSS, JavaScript, Images 等資源到瀏覽器的 Cache Store (無需 client API ⽀支援)• 這樣瀏覽器就不需要再發 request 抓這些 資源了 91
  186. 186. SPDY How? 92
  187. 187. SPDY How?• SPDY 的 Web Server 可以主動發 Stream 給 Client 92
  188. 188. SPDY How?• SPDY 的 Web Server 可以主動發 Stream 給 Client• Streams 除了是 multiplexed,也是雙向 的,不需要多開 TCP Connection 92
  189. 189. SPDY How?• SPDY 的 Web Server 可以主動發 Stream 給 Client• Streams 除了是 multiplexed,也是雙向 的,不需要多開 TCP Connection• 從 Client 發的 stream-id 是奇數,從 Server 發的 stream-id 是偶數 92
  190. 190. Server Push Demo Example(Apache mod_spdy + Rails) CSS, JS, Images 從瀏覽器 Cache 拿 93
  191. 191. Server ⽀支援性如何?• Web Server • Apache mod_spdy • ⽤用 X-Associated-Content Header • Nginx SPDY patch 不⽀支援• Application Server • node-spdy • Jetty 94
  192. 192. mod_spdy 的 Server Push 流程 1. Request HTML 2. Request HTML Web AppClient 4. CSS Server Server Image 3. Image HTML Image 加上 HTML X-Associated-Content Header: “https://foobar.org/app.css”, ”https://foobar.org/image1.png” ”https://foobar.org/image2.png” ”https://foobar.org/image3.png” 95
  193. 193. Sample code at Railsclass  WelcomeController  <  ApplicationController      def  server_push        response.headers["X-­‐Associated-­‐Content"]  =              "https://www.ihower.tw/assets/application.css":0,              "https://www.ihower.tw/assets/application.js":1,              "https://www.ihower.tw/assets/flags/Taiwan.png":2,              "https://www.ihower.tw/assets/flags/Afghanistan.png":3,              "https://www.ihower.tw/assets/flags/Kenya.png":4    end  end 96
  194. 194. Server Push 點評• Server 不知道 Client 是不是已經有快取 了,如果已經有了⼜又 push 就浪費了• 實務上⼀一個最簡單的⽅方式就是只讓第⼀一 個 stream 做 server push• 需要 Application 層細節的調教 97
  195. 195. Conclusion 98
  196. 196. SPDY is not HTTP 2.0 yet• 還沒定案• SPDY 只是討論的起點 • Header 壓縮演算法 ? • DNS name resolution push ? • cert data push (節省SSL handshake 時間) ? • explicit proxy support ? 99
  197. 197. It’s important to understand that SPDY isn’tbeing adopted as HTTP/2.0; rather, that it’sthe starting point of our discussion, to avoida laborious start from scratch.- Mark Nottingham (chair, HTTPBis Working Group) 100
  198. 198. HTTP/2.0 @ HTTPbis Working Group 2012http://tools.ietf.org/agenda/83/slides/slides-83-httpbis-6.pdf 101
  199. 199. HTTP/2.0 @ HTTPbis Working Group 2012http://tools.ietf.org/agenda/83/slides/slides-83-httpbis-6.pdf 102
  200. 200. 如果你是 User• 使⽤用 Chrome, Firefox, Opera,開始享受 SPDY• 可以裝個 SPDY 指⽰示器 • https://chrome.google.com/webstore/detail/spdy-indicator/ mpbpobfflnpcgagjijhmgnchggcjblin • https://addons.mozilla.org/en-us/firefox/addon/spdy-indicator/ 103
  201. 201. 如果你是 User (2) • spdy proxy 可以提供快速安全的服務 • 拿來翻牆(?)http://www.igvita.com/2011/12/01/web-vpn-secure-proxies-with-spdy-chrome/http://www.igvita.com/2012/06/25/spdy-and-secure-proxy-support-in-google-chrome/ 104
  202. 202. 如果你是 Web Developer• 基本不需要改 code 就會動,要習慣 HTTPS 環境 105
  203. 203. 如果你是 Web Developer (2) 如果這些招你 現在不知道, 那以後也不⽤用 知道了 106
  204. 204. 如果你是 Web Developer (2) 如果這些招你 現在不知道, 那以後也不⽤用 知道了 106
  205. 205. 如果你是 Web Developer (2)• 有幾招 “Web Optimization” 要過時了 如果這些招你 現在不知道, 那以後也不⽤用 知道了 106
  206. 206. 如果你是 Web Developer (2)• 有幾招 “Web Optimization” 要過時了 • Domain Sharding 如果這些招你 現在不知道, 那以後也不⽤用 知道了 106
  207. 207. 如果你是 Web Developer (2)• 有幾招 “Web Optimization” 要過時了 • Domain Sharding • SPDY ⽤用 Single Connection 的連線品質最好。 不需要多個 TCP connections,SPDY 就可以平 ⾏行發送 Requests。 如果這些招你 現在不知道, 那以後也不⽤用 知道了 106
  208. 208. 如果你是 Web Developer (2)• 有幾招 “Web Optimization” 要過時了 • Domain Sharding • SPDY ⽤用 Single Connection 的連線品質最好。 不需要多個 TCP connections,SPDY 就可以平 ⾏行發送 Requests。 • Reduce Requests 如果這些招你 現在不知道, 那以後也不⽤用 知道了 106
  209. 209. 如果你是 Web Developer (2)• 有幾招 “Web Optimization” 要過時了 • Domain Sharding • SPDY ⽤用 Single Connection 的連線品質最好。 不需要多個 TCP connections,SPDY 就可以平 ⾏行發送 Requests。 • Reduce Requests • Combine CSS/JS 如果這些招你 現在不知道, 那以後也不⽤用 知道了 106
  210. 210. 如果你是 Web Developer (2)• 有幾招 “Web Optimization” 要過時了 • Domain Sharding • SPDY ⽤用 Single Connection 的連線品質最好。 不需要多個 TCP connections,SPDY 就可以平 ⾏行發送 Requests。 • Reduce Requests • Combine CSS/JS 如果這些招你 • Image spriting 現在不知道, 那以後也不⽤用 知道了 106
  211. 211. 如果你是 Web Developer (2)• 有幾招 “Web Optimization” 要過時了 • Domain Sharding • SPDY ⽤用 Single Connection 的連線品質最好。 不需要多個 TCP connections,SPDY 就可以平 ⾏行發送 Requests。 • Reduce Requests • Combine CSS/JS 如果這些招你 • Image spriting 現在不知道, 那以後也不⽤用 • Resource inlining 知道了 106
  212. 212. 如果你是 Web Developer (2)• 有幾招 “Web Optimization” 要過時了 • Domain Sharding • SPDY ⽤用 Single Connection 的連線品質最好。 不需要多個 TCP connections,SPDY 就可以平 ⾏行發送 Requests。 • Reduce Requests • Combine CSS/JS 如果這些招你 • Image spriting 現在不知道, 那以後也不⽤用 • Resource inlining 知道了 • 設計 HTTP API 可以 finer-grained ⽽而不犧牲 效能 106
  213. 213. 如果你是 Web Developer (2)• 有幾招 “Web Optimization” 要過時了 • Domain Sharding • SPDY ⽤用 Single Connection 的連線品質最好。 不需要多個 TCP connections,SPDY 就可以平 ⾏行發送 Requests。 • Reduce Requests • Combine CSS/JS 如果這些招你 • Image spriting 現在不知道, 那以後也不⽤用 • Resource inlining 知道了 • 設計 HTTP API 可以 finer-grained ⽽而不犧牲 效能 106
  214. 214. 如果你是 Web Developer (2)• 有幾招 “Web Optimization” 要過時了 • Domain Sharding • SPDY ⽤用 Single Connection 的連線品質最好。 不需要多個 TCP connections,SPDY 就可以平 ⾏行發送 Requests。 Will • Reduce Requests Out of Date • Combine CSS/JS 如果這些招你 • Image spriting 現在不知道, 那以後也不⽤用 • Resource inlining 知道了 • 設計 HTTP API 可以 finer-grained ⽽而不犧牲 效能 106
  215. 215. 如果你是 Web Developer (3)• Server Push 可以關注看看,這是需要 Application 決定什麼時候要 Push 什麼• 不過我認為需要 Library, Framework ⽀支援才好⽤用.... 107
  216. 216. 如果你是 System Administrator• 搞定 SSL cert,⽤用 wildcard 更好。SPDY 可以 share connection,如果IP相同,sub-domain 不同。• ⺫⽬目前⽀支援 Apache, Nginx (1.3.X development version),可以裝來玩玩看• HAProxy ⽀支援 NPN,所以可以搭配 SPDY• Varnish 和 Squid 觀望中,在等 HTTP/2.0 • https://www.varnish-cache.org/docs/trunk/phk/ http20.html • http://wiki.squid-cache.org/Features/SPDY 108
  217. 217. 請多指教,謝謝Twitter: @ihower 109
  218. 218. Reference• http://www.chromium.org/spdy• http://tools.ietf.org/html/draft-ietf-httpbis-http2-00• https://developers.google.com/speed/protocols/• https://developers.google.com/speed/spdy/• http://dev.chromium.org/spdy/spdy-best-practices• https://www.modspdy.com• http://www.igvita.com• http://www.mnot.net/• http://trac.tools.ietf.org/wg/httpbis/trac/wiki• http://tools.ietf.org/agenda/83/slides/slides-83-httpbis-6.pdf• The SPDY Book (Chris Strom)• SPDY: Its Here! http://www.youtube.com/watch?v=zN5MYf8FtN0• SPDY and the Road Towards HTTP 2.0 http://www.youtube.com/watch?v=SWQdSEferz8• SPDY Essentials https://docs.google.com/presentation/d/1- LWSvYmXPJ4WIu6GDaDHgHUwT_FkakECfHc0SL7IKOI/edit#slide=id.p41• https://speakerdeck.com/mnot/2-dot-0-will-star-do-for-you• http://jurdak.com/CACM12.pdf• Web Performance Daybook Volume 2, O’Reilly 110

×