a brief introduction to spdy - 邁向 http/2.0
Post on 12-Sep-2014
27.122 views
DESCRIPTION
2013/1/13TRANSCRIPT
A brief introduction to
SPDY邁向 HTTP/2.0
http://ihower.tw2013/1/13
1 / 111 ⾴頁
你有聽過 HTTP 嗎?沒有的⼈人可以離開了
Disclaimer
2
Who am I?• 張⽂文鈿 a.k.a. ihower
• http://ihower.tw
• 熱情⾖豆⾏行動樂活科技 技術⻑⾧長
• RubyConf Taiwan 的主辦⼈人
• http://rubyconf.tw
• 今天我是⼀一位關⼼心網⾴頁效能的網站開發者
3
HTTP v.s. SPDYDemo
(Nginx with SPDY patch)
4
5
兩倍界⺩王拳!!
6 聽說今年 WebConf ⼀一定要有七⻯⿓龍珠梗?
Agenda• Why SPDY
• HTTP/1.0
• HTTP/1.1
• What’s SPDY
• 1.
• 2.
• 3.
• 4.
• Conclusion
8
1. Why SPDY
9
199913k(zipped)-14k(unzipped)
10
2012200k(zipped) - 600k(unzipped)
11
平均每個網⾴頁有88個 Requests
http://httparchive.org/trends.php
88 requests1280kb
14 domains
74 requests705kb
10 domains
兩年時間
12
(2010/11~2013/1)
Web Usability
• 根據知名學者 Jakob Nielsen 研究
• 0.1 秒 - 感覺是⾺馬上
• 1.0 秒 - 思緒開始飄移
• 10 秒 - 這東⻄西壞了吧?
http://www.nngroup.com/articles/response-times-3-important-limits/13
http://blog.kissmetrics.com/loading-time/?wide=1
KISSmetric: 超過 4 秒,Bounce Rate 增加 25%
14
⼀一秒鐘幾⼗十萬上下,網⾴頁載⼊入速度真的很重要• Amazon 的網⾴頁載⼊入時間每多⼀一秒,該公司的年度營收就減少 16 億美元
• Google 的搜尋時間每多 0.4 秒,每天的搜尋次數就會減少 8 百萬
http://www.inside.com.tw/2012/12/28/page-speed-really-does-matter15
Desktop: ~2.7sMobile 更慢: ~4.8s
(中位數)
http://analytics.blogspot.tw/2012/04/global-site-speed-overview-how-fast-are.html
全世界的平均載⼊入速度(Google Analytics)
16
迷思: 加頻寬無⽤用光速是物理限制,限制了 RTT (Round-Trip Time)
http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
More Bandwidth Doesn’t Matter (Much)
17
迷思: 加頻寬無⽤用光速是物理限制,限制了 RTT (Round-Trip Time)
http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
More Bandwidth Doesn’t Matter (Much)
3Mbps 之後就沒什麼差了
17
迷思: 加頻寬無⽤用光速是物理限制,限制了 RTT (Round-Trip Time)
http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
More Bandwidth Doesn’t Matter (Much)
3Mbps 之後就沒什麼差了
17
RTT 降到 0⾴頁⾯面載⼊入竟然還要 240ms
⼤大頻寬可以加快下載 Ubuntu,不過超過 ~3Mbps 之後,對 Page
Load Time 就沒什麼差了
18
所以現在的 HTTP 有什麼問題?
19
HTTP/1.0 (1996)Client Server
open
close
open
close
open
close
1.TCP setup handshake 2. TCP slow-start (congestion control)
20
HTTP/1.0+ 後推出 persistent connection (keep-alive)
Client Server
open
close
21
HTTP/1.1 Pipelining ?在同⼀一個 Connection 中,平⾏行發送多個 Requests
Client Server
open
close
22
HTTP/1.1 Pipelining 的失敗:
Head of Line BlockingClient Server
open
close
1
2
3
12
3
Server 必須照順序回如果 Response 1 很慢卡住了,就整個卡住了
BLOCK
23
HTTP/1.1 Pipelining 的失敗:
有⾵風險,瀏覽器預設關閉
• 少數 Server 不⽀支援,或是搞錯回傳順序
• Proxy server ⼤大多不⽀支援
• 只有 idempotent (無side-effects) 的 requests 可以 pipelined
• Client 缺乏明確的機制知道 Server-side 是否⽀支援
http://www.subbu.org/blog/2011/02/can-pipelining-helphttp://www.chromium.org/developers/design-documents/network-stack/http-pipelining
https://devcentral.f5.com/blogs/us/http-pipelining-a-security-risk-without-real-performance-benefitshttp://www.guypo.com/mobile/http-pipelining-big-in-mobile/
https://bugzilla.mozilla.org/show_bug.cgi?id=26435424
那怎麼辦? 瀏覽器要怎麼平⾏行發送 Requests 來加快⾴頁⾯面載⼊入速度?
開 Multiple TCP connections 來平⾏行發送 Requests
(瀏覽器⼤大多設每個 domain 6個)
Client Server
openopenopen
openopenopen
close
close
close
close
close
close
26
瀑布流 RequestsRequest HTML
Request Javascript
Request CSS
Request CSS
Request Image
Request Image
Request Image
Request Image
Request Image
Request Image
Request Image
Request Image
Request Image
time27
TCP Connection 是個需要熱⾝身的通道
第⼀一個 Request
( TCP handshake 和 slow start)
HTTP
HTTP熱⾝身後 Request
28
TCP Handshake耗時 1.5 RTT
29
http://www.tcpipguide.com/free/t_TCPConnectionEstablishmentProcessTheThreeWayHandsh-3.htm
Slow Start is TCP feature (not bug, sorry)
• Slow Start 是 TCP congestion control (壅塞控制)的關鍵演算法
• ⼀一開始 CWND (congestion window) 為 2 (最近Linux改
為10)了,如果沒問題,才指數乘兩倍加⼤大流量直到有封包遺失
30
瀏覽器的 6 connections 需要個別熱⾝身,每個都是成本
HTTP
HTTP
HTTP
HTTP
HTTP
HTTP
31
瀏覽器的 6 connections 需要個別熱⾝身,每個都是成本
HTTP
HTTP
HTTP
HTTP
HTTP
HTTP
32
HTTP
瀏覽器的 6 connections 需要個別熱⾝身,每個都是成本
HTTP
HTTP
HTTP
HTTP
HTTP
HTTP
33
HTTP
HTTPHTTP
瀏覽器的 6 connections 需要個別熱⾝身,每個都是成本
HTTP
HTTP
HTTP
HTTP
HTTP
HTTP
34
HTTP
HTTPHTTP
HTTPHTTP
瀏覽器的 6 connections 需要個別熱⾝身,每個都是成本
HTTP
HTTP
HTTP
HTTP
HTTP
HTTP
35
HTTP
HTTPHTTP
HTTPHTTP
HTTPHTTP
瀏覽器的 6 connections 需要個別熱⾝身,每個都是成本
HTTP
HTTP
HTTP
HTTP
HTTP
HTTP
36
HTTP
HTTPHTTP
HTTPHTTP
HTTPHTTP
HTTPHTTP
瀏覽器的 6 connections 需要個別熱⾝身,每個都是成本
HTTP
HTTP
HTTP
HTTP
HTTP
HTTP
37
HTTP
HTTPHTTP
HTTPHTTP
HTTPHTTP
HTTPHTTP
HTTPHTTP
第⼀一個沒熱⾝身的 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 Image
time38
⽽而且這六個連線彼此之間還會競爭頻寬,讓 CWND 不準 :(
HTTP
HTTP
HTTP
HTTP
HTTP
HTTP
39
在 HTTP/1.1 的環境下
如何做 Web 優化?
40
在 HTTP/1.1 的環境下
如何做 Web 優化?
40
在 HTTP/1.1 的環境下
如何做 Web 優化?
40
Web Optimization:Reduce Requests
• 因為⼀一次只有六個通道可以發 Request,所以最好把 Requests 合併起來,減少 Requests 數
• CSS, JavaScript files
• spriting images
41
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
It’s not optimization.It’s “work around”
HTTP/1.1 flaw!
43
HTTP/1.1 Headers
44
HTTP/1.1 Headers
• 約 200 bytes 到 2KB,平均 700-800 bytes
44
HTTP/1.1 Headers
• 約 200 bytes 到 2KB,平均 700-800 bytes
• 每個 Request/Response 幾乎都重複
44
HTTP/1.1 Headers
• 約 200 bytes 到 2KB,平均 700-800 bytes
• 每個 Request/Response 幾乎都重複
• User-agent
44
HTTP/1.1 Headers
• 約 200 bytes 到 2KB,平均 700-800 bytes
• 每個 Request/Response 幾乎都重複
• User-agent
• Cookies
44
HTTP/1.1 Headers
• 約 200 bytes 到 2KB,平均 700-800 bytes
• 每個 Request/Response 幾乎都重複
• User-agent
• Cookies
• 竟然沒辦法壓縮
44
anyway, HTTP/1.1is so old...
該是改變的時候了
45
2. What’s SPDY
46
什麼是 SPeeDY
SPDY HTTP
SSLSSL
TCPTCP
47
什麼是 SPeeDY
• SPDY 是⼀一個 Application Layer 的通訊協定,⽤用以替換 HTTP
SPDY HTTP
SSLSSL
TCPTCP
47
什麼是 SPeeDY
• SPDY 是⼀一個 Application Layer 的通訊協定,⽤用以替換 HTTP
• 沿⽤用了 HTTP 的語義,但是修改了傳輸⽅方式
SPDY HTTP
SSLSSL
TCPTCP
47
什麼是 SPeeDY
• SPDY 是⼀一個 Application Layer 的通訊協定,⽤用以替換 HTTP
• 沿⽤用了 HTTP 的語義,但是修改了傳輸⽅方式
• Google 2009 年推出
SPDY HTTP
SSLSSL
TCPTCP
47
什麼是 SPeeDY
• SPDY 是⼀一個 Application Layer 的通訊協定,⽤用以替換 HTTP
• 沿⽤用了 HTTP 的語義,但是修改了傳輸⽅方式
• Google 2009 年推出
• 2012/11 成為 HTTPBis Working Group 的 HTTP 2.0 draft
SPDY HTTP
SSLSSL
TCPTCP
47
什麼是 SPeeDY
• SPDY 是⼀一個 Application Layer 的通訊協定,⽤用以替換 HTTP
• 沿⽤用了 HTTP 的語義,但是修改了傳輸⽅方式
• Google 2009 年推出
• 2012/11 成為 HTTPBis Working Group 的 HTTP 2.0 draft
• 預計 2014/11 定案,送 IETF 成為 RFC 標準
SPDY HTTP
SSLSSL
TCPTCP
47
SPDY 的要求是
48
SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間
48
SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括:
48
SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括:• HTTP methods
48
SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括:• HTTP methods
• Status Codes
48
SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括:• HTTP methods
• Status Codes
• URIs
48
SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括:• HTTP methods
• Status Codes
• URIs
• Headers fields
48
SPDY 的要求是• 改善 Page load time 網⾴頁載⼊入時間• 保持 HTTP/1.1 語義 ,包括:• HTTP methods
• Status Codes
• URIs
• Headers fields
• 這樣只要升級 Web Server 和 Browser 即可,應⽤用程式不需要改
48
... we’re not replacing all of HTTP — the methods, status codes, and most of the headers you use today will be the same. Instead, we’re re-defining how it gets used “on the wire” so it’s more efficient, and so that it is more gentle to the Internet itself ....
- Mark Nottingham (chair, HTTPBis Working Group)
49
⺫⽬目前的佈署情況如何?
50
Chrome+Firefox+Opera+Android約 50% 的瀏覽器⽀支援 SPDY
http://caniuse.com/spdy51
哪些廠商在⽤用?• Google (Search, Gmail, Docs, Drive, Groups, Reader...etc)
• Google App Engine + SSL users
• Wordpress.com
• LINE
• Amazon Kindle Fire
• Facebook (跟進中)
• Akamai (跟進中)
• Cloudflare (跟進中)
52
哪些 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
Google SPDY ⽩白⽪皮書
Top 25 網站 Page Load Time 測試平均快 39%-55%
http://www.chromium.org/spdy/spdy-whitepaper54
SPDY 特點
55
SPDY 特點• 1. SSL is required
55
SPDY 特點• 1. SSL is required
• 2. Multiplexed streams over a single TCP connection
55
SPDY 特點• 1. SSL is required
• 2. Multiplexed streams over a single TCP connection
• 3. HTTP header compression
55
SPDY 特點• 1. SSL is required
• 2. Multiplexed streams over a single TCP connection
• 3. HTTP header compression
• 4. Server Push
55
1. SSL(TLS, Transport Layer Security)
https://technotes.googlecode.com/git/nextprotoneg.html
TLS False StartTLS Snap Start
56
1. SSL(TLS, Transport Layer Security)
• Secure by default,都 2013 年了,任何需要登⼊入的網站,都應該跑 HTTPS
https://technotes.googlecode.com/git/nextprotoneg.html
TLS False StartTLS Snap Start
56
1. SSL(TLS, Transport Layer Security)
• Secure by default,都 2013 年了,任何需要登⼊入的網站,都應該跑 HTTPS
• 不跑在 Port 80 或 443,肯定有防⽕火牆問題
https://technotes.googlecode.com/git/nextprotoneg.html
TLS False StartTLS Snap Start
56
1. SSL(TLS, Transport Layer Security)
• Secure by default,都 2013 年了,任何需要登⼊入的網站,都應該跑 HTTPS
• 不跑在 Port 80 或 443,肯定有防⽕火牆問題
• 以佈署觀點看,在 Port 443 上進⾏行擴充較可⾏行
https://technotes.googlecode.com/git/nextprotoneg.html
TLS False StartTLS Snap Start
56
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)
https://technotes.googlecode.com/git/nextprotoneg.html
TLS False StartTLS Snap Start
56
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 在⾮非常⼩小的網⾴頁中(少於六個資源),速度反⽽而沒有⽐比較快
https://technotes.googlecode.com/git/nextprotoneg.html
TLS False StartTLS Snap Start
56
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?
https://technotes.googlecode.com/git/nextprotoneg.html
TLS False StartTLS Snap Start
56
1. SSL(TLS, Transport Layer Security)
• Secure by default,都 2013 年了,任何需要登⼊入的網站,都應該跑 HTTPS
https://technotes.googlecode.com/git/nextprotoneg.html57
1. SSL(TLS, Transport Layer Security)
• Secure by default,都 2013 年了,任何需要登⼊入的網站,都應該跑 HTTPS
https://technotes.googlecode.com/git/nextprotoneg.html57
1. SSL(TLS, Transport Layer Security)
• Secure by default,都 2013 年了,任何需要登⼊入的網站,都應該跑 HTTPS
https://technotes.googlecode.com/git/nextprotoneg.html57
1. SSL(TLS, Transport Layer Security)
• Secure by default,都 2013 年了,任何需要登⼊入的網站,都應該跑 HTTPS
https://technotes.googlecode.com/git/nextprotoneg.html57
HTTP is hacker friendly(設計台詞)
Websocket success rates 2010(chrome websocket team)
http://www.ietf.org/mail-archive/web/hybi/current/msg01605.html
Port 成功率
80 63%容易有 transparent
proxy 擋在中間亂改你的東⻄西
61985 86% ⽤用⼀一個新的 Port
443 95% 跑在 443 上成功率最⾼高
58
Next Protocol Negotiation (NPN)
Client ServerSSL handshake
我⽀支援spdy/3spdy/2foobar
59
Next Protocol Negotiation (NPN)
Client ServerSSL handshake
我⽀支援spdy/3spdy/2foobar
我選 spdy/2
60
2. Multiplexed streams over a single TCP connection
SPDY
61
62
2.可以同時多個 Requests 做Multiplexed 傳輸,並只⽤用⼀一條 TCP Connection
SPDY
request 分拆成control frame 和 data frame
(request 改稱 stream)
+----------------------------------+ |1| Version(15bits) | Type(16bits) | +----------------------------------+ | Flags (8) | Length (24 bits) | +----------------------------------+ | Data | +----------------------------------+
+----------------------------------+ |0| Stream-ID (31bits) | +----------------------------------+ | Flags (8) | Length (24 bits) | +----------------------------------+ | Data | +----------------------------------+
63
control frame:
data frame:
control frame: SYN_STREAM(request)
• Stream-ID
• 奇數代表從 client 發的
• 偶數代表從 server 發的
• 需要指定 Length ⻑⾧長度
• 可以設定 Priority 優先權
+----------------------------------+ |1| 2 | 1 | +----------------------------------+ | Flags (8) | Length (24 bits) | +----------------------------------+ |X| Stream-ID (31bits) | +----------------------------------+ |X|Associated-To-Stream-ID (31bits)| +----------------------------------+ | Pri | Unused | | +------------------ | | Name/value header block | | ... |
SPDY v2 Type
Request ID
Priority
Headers
64
Name/Value header block format
• 連 Headers 的部份也需要個別指定 Length ⻑⾧長度
+------------------------------------+ | Number of Name/Value pairs (int16) | +------------------------------------+ | Length of name (int16) | +------------------------------------+ | Name (string) | +------------------------------------+ | Length of value (int16) | +------------------------------------+ | Value (string) | +------------------------------------+ | (repeats) |
65
control frame: SYN_REPLY(response)
+----------------------------------+ |1| 2 | 2 | +----------------------------------+ | Flags (8) | Length (24 bits) | +----------------------------------+ |X| Stream-ID (31bits) | +----------------------------------+ | Unused | | +---------------- | | Name/value header block | | ... |
SPDY v2 Type
Request ID
Headers
66
data frame將資料拆個數個 data frame,Chrome 預設是 4K。但是 spec 沒有限制,建議不⽤用⼤大,好讓不同 stream
的 frames 可以交錯。
+----------------------------------+ |0| Stream-ID (31bits) | +----------------------------------+ | Flags (8) | Length (24 bits) | +----------------------------------+ | Data | +----------------------------------+
Request ID
67
其他 control frames
• RST_STREAM
• 出錯時,通知對⽅方中斷重來• SETTINGS
• 可以讓 client 設定 CWND 等
• PING
• ...
68
Client Server
open
close
69
Client Server
open
close
69
Client Server
open
close
SYN_STREAM 1
69
Client Server
open
close
SYN_STREAM 1
69
Client Server
open
close
SYN_STREAM 1
69
SYN_STREAM 3
Client Server
open
close
SYN_STREAM 1
69
SYN_STREAM 3
Client Server
open
close
SYN_STREAM 1
69
SYN_STREAM 3SYN_STREAM 5
Client Server
open
close
SYN_STREAM 1
69
SYN_STREAM 3SYN_STREAM 5
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
Data 1
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
Data 1
Data 1 + FIN
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
SYN_REPLY 3
Data 1
Data 1 + FIN
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
SYN_REPLY 3
SYN_REPLY 5
Data 1
Data 1 + FIN
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
SYN_REPLY 3
SYN_REPLY 5
Data 1
Data 1 + FIN
Data 2
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
SYN_REPLY 3
SYN_REPLY 5
Data 1
Data 1 + FIN
Data 2 + FINData 2
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
SYN_REPLY 3
SYN_REPLY 5
Data 1
Data 1 + FIN
Data 2 + FINData 2
Data 3
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
SYN_REPLY 3
SYN_REPLY 5
Data 1
Data 1 + FIN
Data 2 + FINData 2
Data 3
Data 3 + FIN
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
SYN_REPLY 3
SYN_REPLY 5
Data 1
Data 1 + FIN
Data 2 + FINData 2
Data 3
Data 3 + FIN
可以同時平⾏行發 Request在⼀一條 TCP Connection 上
Client Server
open
close
SYN_STREAM 1
69
SYN_REPLY 1
SYN_STREAM 3SYN_STREAM 5
SYN_REPLY 3
SYN_REPLY 5
Data 1
Data 1 + FIN
Data 2 + FINData 2
Data 3
Data 3 + FIN
可以同時平⾏行發 Request在⼀一條 TCP Connection 上
Frames 可以混雜交錯有 Stream ID 可以識別
chrome://net-internals#spdy
70
Benefit:
Streams are multiplexed
https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J71
Benefit:
Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id
https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J71
Benefit:
Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id
• 只有⼀一個TCP通道
https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J71
Benefit:
Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id
• 只有⼀一個TCP通道
• 只需 TCP setup 和 Slow-Start ⼀一次
https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J71
Benefit:
Streams are multiplexed• frame 可以混雜交錯,因為有 stream-id
• 只有⼀一個TCP通道
• 只需 TCP setup 和 Slow-Start ⼀一次
• 沒有多個 connection 競爭,CWND 可以更⾼高
https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J71
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/PwSkwKY7ra4J71
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/PwSkwKY7ra4J71
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/PwSkwKY7ra4J71
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/PwSkwKY7ra4J71
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/PwSkwKY7ra4J71
Benefit:
Streams are prioritized
https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J72
Benefit:
Streams are prioritized• 可以有優先順序,讓 Server 優先回傳重要的 Resource
https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J72
Benefit:
Streams are prioritized• 可以有優先順序,讓 Server 優先回傳重要的 Resource
• 更進⼀一步的說,因為 frames 可以交錯,可以先暫停不重要的 Stream,先傳重要的 Stream
https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J72
http://jurdak.com/CACM12.pdf73
Server 還沒回傳完Client 發了一個優先權更高的 Stream
那麼 Server 可以停下來先回應重要的 Stream
3. HTTP header compression
• HTTP headers ⾼高度重複,平均 800 bytes
• Request URI, User-Agent, Cookies
• 使⽤用 zlib compression
• 進階問題:怎樣壓縮最有效率?
74
const unsigned char SPDY_dictionary_txt[] = {! 0x00, 0x00, 0x00, 0x07, 0x6f, 0x70, 0x74, 0x69, \\ - - - - o p t i! 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! 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 - - -! 0x06, 0x61, 0x63, 0x63, 0x65, 0x70, 0x74, 0x00, \\ - a c c e p t -! 0x00, 0x00, 0x0e, 0x61, 0x63, 0x63, 0x65, 0x70, \\ - - - a c c e p! 0x74, 0x2d, 0x63, 0x68, 0x61, 0x72, 0x73, 0x65, \\ t - c h a r s 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 - -! 0x00, 0x0c, 0x63, 0x6f, 0x6e, 0x74, 0x65, 0x6e, \\ - - c o n t e n! 0x74, 0x2d, 0x74, 0x79, 0x70, 0x65, 0x00, 0x00, \\ t - t y p e - -! 0x00, 0x04, 0x64, 0x61, 0x74, 0x65, 0x00, 0x00, \\ - - d a t e - -! 0x00, 0x04, 0x65, 0x74, 0x61, 0x67, 0x00, 0x00, \\ - - e t a g - -! 0x00, 0x06, 0x65, 0x78, 0x70, 0x65, 0x63, 0x74, \\ - - e x p e c t! 0x00, 0x00, 0x00, 0x07, 0x65, 0x78, 0x70, 0x69, \\ - - - - e x p i! 0x72, 0x65, 0x73, 0x00, 0x00, 0x00, 0x04, 0x66, \\ r e s - - - - f! 0x72, 0x6f, 0x6d, 0x00, 0x00, 0x00, 0x04, 0x68, \\ r o m - - - - h! 0x6f, 0x73, 0x74, 0x00, 0x00, 0x00, 0x08, 0x69, \\ o s t - - - - i! 0x66, 0x2d, 0x6d, 0x61, 0x74, 0x63, 0x68, 0x00, \\ f - m a t c h -! 0x00, 0x00, 0x11, 0x69, 0x66, 0x2d, 0x6d, 0x6f, \\ - - - i f - m o! 0x64, 0x69, 0x66, 0x69, 0x65, 0x64, 0x2d, 0x73, \\ d i f i e d - s! 0x69, 0x6e, 0x63, 0x65, 0x00, 0x00, 0x00, 0x0d, \\ i n c e - - - -! 0x69, 0x66, 0x2d, 0x6e, 0x6f, 0x6e, 0x65, 0x2d, \\ i f - n o n e -! 0x6d, 0x61, 0x74, 0x63, 0x68, 0x00, 0x00, 0x00, \\ m a t c h - - -! 0x08, 0x69, 0x66, 0x2d, 0x72, 0x61, 0x6e, 0x67, \\ - i f - r a n g! 0x65, 0x00, 0x00, 0x00, 0x13, 0x69, 0x66, 0x2d, \\ e - - - - i f -! 0x75, 0x6e, 0x6d, 0x6f, 0x64, 0x69, 0x66, 0x69, \\ u n m o d i f i! 0x65, 0x64, 0x2d, 0x73, 0x69, 0x6e, 0x63, 0x65, \\ e d - s i n c e! 0x00, 0x00, 0x00, 0x0d, 0x6c, 0x61, 0x73, 0x74, \\ - - - - l a s t! 0x2d, 0x6d, 0x6f, 0x64, 0x69, 0x66, 0x69, 0x65, \\ - m o d i f i e! 0x64, 0x00, 0x00, 0x00, 0x08, 0x6c, 0x6f, 0x63, \\ d - - - - l o c! 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x00, 0x00, 0x00, \\ a t i o n - - -! 0x0c, 0x6d, 0x61, 0x78, 0x2d, 0x66, 0x6f, 0x72, \\ - m a x - f o r! 0x77, 0x61, 0x72, 0x64, 0x73, 0x00, 0x00, 0x00, \\ w a r d s - - -! 0x06, 0x70, 0x72, 0x61, 0x67, 0x6d, 0x61, 0x00, \\ - p r a g m a -! 0x00, 0x00, 0x12, 0x70, 0x72, 0x6f, 0x78, 0x79, \\ - - - p r o x y! 0x2d, 0x61, 0x75, 0x74, 0x68, 0x65, 0x6e, 0x74, \\ - a u t h e n t! 0x69, 0x63, 0x61, 0x74, 0x65, 0x00, 0x00, 0x00, \\ i c a t e - - -! 0x13, 0x70, 0x72, 0x6f, 0x78, 0x79, 0x2d, 0x61, \\ - p r o x y - a! 0x75, 0x74, 0x68, 0x6f, 0x72, 0x69, 0x7a, 0x61, \\ u t h o r i z a! 0x74, 0x69, 0x6f, 0x6e, 0x00, 0x00, 0x00, 0x05, \\ t i o n - - - -! 0x72, 0x61, 0x6e, 0x67, 0x65, 0x00, 0x00, 0x00, \\ r a n g e - - -! 0x07, 0x72, 0x65, 0x66, 0x65, 0x72, 0x65, 0x72, \\ - r e f e r e r! 0x00, 0x00, 0x00, 0x0b, 0x72, 0x65, 0x74, 0x72, \\ - - - - r e t r! 0x79, 0x2d, 0x61, 0x66, 0x74, 0x65, 0x72, 0x00, \\ y - a f t e r -! 0x00, 0x00, 0x06, 0x73, 0x65, 0x72, 0x76, 0x65, \\ - - - s e r v e! 0x72, 0x00, 0x00, 0x00, 0x02, 0x74, 0x65, 0x00, \\ r - - - - t e -! 0x00, 0x00, 0x07, 0x74, 0x72, 0x61, 0x69, 0x6c, \\ - - - t r a i l! 0x65, 0x72, 0x00, 0x00, 0x00, 0x11, 0x74, 0x72, \\ e r - - - - t r! 0x61, 0x6e, 0x73, 0x66, 0x65, 0x72, 0x2d, 0x65, \\ a n s f e r - e! 0x6e, 0x63, 0x6f, 0x64, 0x69, 0x6e, 0x67, 0x00, \\ n c o d i n g -! 0x00, 0x00, 0x07, 0x75, 0x70, 0x67, 0x72, 0x61, \\ - - - u p g r a! 0x64, 0x65, 0x00, 0x00, 0x00, 0x0a, 0x75, 0x73, \\ d e - - - - u s! 0x65, 0x72, 0x2d, 0x61, 0x67, 0x65, 0x6e, 0x74, \\ e r - a g e n t! 0x00, 0x00, 0x00, 0x04, 0x76, 0x61, 0x72, 0x79, \\ - - - - v a r y! 0x00, 0x00, 0x00, 0x03, 0x76, 0x69, 0x61, 0x00, \\ - - - - v i a -! 0x00, 0x00, 0x07, 0x77, 0x61, 0x72, 0x6e, 0x69, \\ - - - w a r n i! 0x6e, 0x67, 0x00, 0x00, 0x00, 0x10, 0x77, 0x77, \\ n g - - - - w w! 0x77, 0x2d, 0x61, 0x75, 0x74, 0x68, 0x65, 0x6e, \\ w - a u t h e n! 0x74, 0x69, 0x63, 0x61, 0x74, 0x65, 0x00, 0x00, \\ t i c a t e - -! 0x00, 0x06, 0x6d, 0x65, 0x74, 0x68, 0x6f, 0x64, \\ - - m e t h o d! 0x00, 0x00, 0x00, 0x03, 0x67, 0x65, 0x74, 0x00, \\ - - - - g e t -! 0x00, 0x00, 0x06, 0x73, 0x74, 0x61, 0x74, 0x75, \\ - - - s t a t u! 0x73, 0x00, 0x00, 0x00, 0x06, 0x32, 0x30, 0x30, \\ s - - - - 2 0 0! 0x20, 0x4f, 0x4b, 0x00, 0x00, 0x00, 0x07, 0x76, \\ - O K - - - - v! 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x00, 0x00, \\ e r s i o n - -! 0x00, 0x08, 0x48, 0x54, 0x54, 0x50, 0x2f, 0x31, \\ - - H T T P - 1! 0x2e, 0x31, 0x00, 0x00, 0x00, 0x03, 0x75, 0x72, \\ - 1 - - - - u r! 0x6c, 0x00, 0x00, 0x00, 0x06, 0x70, 0x75, 0x62, \\ l - - - - p u b! 0x6c, 0x69, 0x63, 0x00, 0x00, 0x00, 0x0a, 0x73, \\ l i c - - - - s! 0x65, 0x74, 0x2d, 0x63, 0x6f, 0x6f, 0x6b, 0x69, \\ e t - c o o k i! 0x65, 0x00, 0x00, 0x00, 0x0a, 0x6b, 0x65, 0x65, \\ e - - - - k e e! 0x70, 0x2d, 0x61, 0x6c, 0x69, 0x76, 0x65, 0x00, \\ p - a l i v e -! 0x00, 0x00, 0x06, 0x6f, 0x72, 0x69, 0x67, 0x69, \\ - - - o r i g i! 0x6e, 0x31, 0x30, 0x30, 0x31, 0x30, 0x31, 0x32, \\ n 1 0 0 1 0 1 2! 0x30, 0x31, 0x32, 0x30, 0x32, 0x32, 0x30, 0x35, \\ 0 1 2 0 2 2 0 5! 0x32, 0x30, 0x36, 0x33, 0x30, 0x30, 0x33, 0x30, \\ 2 0 6 3 0 0 3 0! 0x32, 0x33, 0x30, 0x33, 0x33, 0x30, 0x34, 0x33, \\ 2 3 0 3 3 0 4 3! 0x30, 0x35, 0x33, 0x30, 0x36, 0x33, 0x30, 0x37, \\ 0 5 3 0 6 3 0 7! 0x34, 0x30, 0x32, 0x34, 0x30, 0x35, 0x34, 0x30, \\ 4 0 2 4 0 5 4 0! 0x36, 0x34, 0x30, 0x37, 0x34, 0x30, 0x38, 0x34, \\ 6 4 0 7 4 0 8 4! 0x30, 0x39, 0x34, 0x31, 0x30, 0x34, 0x31, 0x31, \\ 0 9 4 1 0 4 1 1! 0x34, 0x31, 0x32, 0x34, 0x31, 0x33, 0x34, 0x31, \\ 4 1 2 4 1 3 4 1! 0x34, 0x34, 0x31, 0x35, 0x34, 0x31, 0x36, 0x34, \\ 4 4 1 5 4 1 6 4! 0x31, 0x37, 0x35, 0x30, 0x32, 0x35, 0x30, 0x34, \\ 1 7 5 0 2 5 0 4! 0x35, 0x30, 0x35, 0x32, 0x30, 0x33, 0x20, 0x4e, \\ 5 0 5 2 0 3 - N! 0x6f, 0x6e, 0x2d, 0x41, 0x75, 0x74, 0x68, 0x6f, \\ o n - A u t h o! 0x72, 0x69, 0x74, 0x61, 0x74, 0x69, 0x76, 0x65, \\ r i t a t i v e! 0x20, 0x49, 0x6e, 0x66, 0x6f, 0x72, 0x6d, 0x61, \\ - I n f o r m a! 0x74, 0x69, 0x6f, 0x6e, 0x32, 0x30, 0x34, 0x20, \\ t i o n 2 0 4 -! 0x4e, 0x6f, 0x20, 0x43, 0x6f, 0x6e, 0x74, 0x65, \\ N o - C o n t e! 0x6e, 0x74, 0x33, 0x30, 0x31, 0x20, 0x4d, 0x6f, \\ n t 3 0 1 - M o! 0x76, 0x65, 0x64, 0x20, 0x50, 0x65, 0x72, 0x6d, \\ v e d - P e r m! 0x61, 0x6e, 0x65, 0x6e, 0x74, 0x6c, 0x79, 0x34, \\ a n e n t l y 4! 0x30, 0x30, 0x20, 0x42, 0x61, 0x64, 0x20, 0x52, \\ 0 0 - B a d - R! 0x65, 0x71, 0x75, 0x65, 0x73, 0x74, 0x34, 0x30, \\ e q u e s t 4 0! 0x31, 0x20, 0x55, 0x6e, 0x61, 0x75, 0x74, 0x68, \\ 1 - U n a u t h! 0x6f, 0x72, 0x69, 0x7a, 0x65, 0x64, 0x34, 0x30, \\ o r i z e d 4 0! 0x33, 0x20, 0x46, 0x6f, 0x72, 0x62, 0x69, 0x64, \\ 3 - F o r b i d! 0x64, 0x65, 0x6e, 0x34, 0x30, 0x34, 0x20, 0x4e, \\ d e n 4 0 4 - N! 0x6f, 0x74, 0x20, 0x46, 0x6f, 0x75, 0x6e, 0x64, \\ o t - F o u n d! 0x35, 0x30, 0x30, 0x20, 0x49, 0x6e, 0x74, 0x65, \\ 5 0 0 - I n t e! 0x72, 0x6e, 0x61, 0x6c, 0x20, 0x53, 0x65, 0x72, \\ r n a l - S e r! 0x76, 0x65, 0x72, 0x20, 0x45, 0x72, 0x72, 0x6f, \\ v e r - E r r o! 0x72, 0x35, 0x30, 0x31, 0x20, 0x4e, 0x6f, 0x74, \\ r 5 0 1 - N o t! 0x20, 0x49, 0x6d, 0x70, 0x6c, 0x65, 0x6d, 0x65, \\ - I m p l e m e! 0x6e, 0x74, 0x65, 0x64, 0x35, 0x30, 0x33, 0x20, \\ n t e d 5 0 3 -! 0x53, 0x65, 0x72, 0x76, 0x69, 0x63, 0x65, 0x20, \\ S e r v i c e -! 0x55, 0x6e, 0x61, 0x76, 0x61, 0x69, 0x6c, 0x61, \\ U n a v a i l a! 0x62, 0x6c, 0x65, 0x4a, 0x61, 0x6e, 0x20, 0x46, \\ b l e J a n - F! 0x65, 0x62, 0x20, 0x4d, 0x61, 0x72, 0x20, 0x41, \\ e b - M a r - A! 0x70, 0x72, 0x20, 0x4d, 0x61, 0x79, 0x20, 0x4a, \\ p r - M a y - J! 0x75, 0x6e, 0x20, 0x4a, 0x75, 0x6c, 0x20, 0x41, \\ u n - J u l - A! 0x75, 0x67, 0x20, 0x53, 0x65, 0x70, 0x74, 0x20, \\ u g - S e p t -! 0x4f, 0x63, 0x74, 0x20, 0x4e, 0x6f, 0x76, 0x20, \\ O c t - N o v -! 0x44, 0x65, 0x63, 0x20, 0x30, 0x30, 0x3a, 0x30, \\ D e c - 0 0 - 0! 0x30, 0x3a, 0x30, 0x30, 0x20, 0x4d, 0x6f, 0x6e, \\ 0 - 0 0 - M o n! 0x2c, 0x20, 0x54, 0x75, 0x65, 0x2c, 0x20, 0x57, \\ - - T u e - - W! 0x65, 0x64, 0x2c, 0x20, 0x54, 0x68, 0x75, 0x2c, \\ e d - - T h u -! 0x20, 0x46, 0x72, 0x69, 0x2c, 0x20, 0x53, 0x61, \\ - F r i - - S a! 0x74, 0x2c, 0x20, 0x53, 0x75, 0x6e, 0x2c, 0x20, \\ t - - S u n - -! 0x47, 0x4d, 0x54, 0x63, 0x68, 0x75, 0x6e, 0x6b, \\ G M T c h u n k! 0x65, 0x64, 0x2c, 0x74, 0x65, 0x78, 0x74, 0x2f, \\ e d - t e x t -! 0x68, 0x74, 0x6d, 0x6c, 0x2c, 0x69, 0x6d, 0x61, \\ h t m l - i m a! 0x67, 0x65, 0x2f, 0x70, 0x6e, 0x67, 0x2c, 0x69, \\ g e - p n g - i! 0x6d, 0x61, 0x67, 0x65, 0x2f, 0x6a, 0x70, 0x67, \\ m a g e - j p g! 0x2c, 0x69, 0x6d, 0x61, 0x67, 0x65, 0x2f, 0x67, \\ - i m a g e - g! 0x69, 0x66, 0x2c, 0x61, 0x70, 0x70, 0x6c, 0x69, \\ i f - a p p l i! 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x2f, 0x78, \\ c a t i o n - x! 0x6d, 0x6c, 0x2c, 0x61, 0x70, 0x70, 0x6c, 0x69, \\ m l - a p p l i! 0x63, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x2f, 0x78, \\ c a t i o n - x! 0x68, 0x74, 0x6d, 0x6c, 0x2b, 0x78, 0x6d, 0x6c, \\ h t m l - x m l! 0x2c, 0x74, 0x65, 0x78, 0x74, 0x2f, 0x70, 0x6c, \\ - t e x t - p l! 0x61, 0x69, 0x6e, 0x2c, 0x74, 0x65, 0x78, 0x74, \\ a i n - t e x t! 0x2f, 0x6a, 0x61, 0x76, 0x61, 0x73, 0x63, 0x72, \\ - j a v a s c r! 0x69, 0x70, 0x74, 0x2c, 0x70, 0x75, 0x62, 0x6c, \\ i p t - p u b l! 0x69, 0x63, 0x70, 0x72, 0x69, 0x76, 0x61, 0x74, \\ i c p r i v a t! 0x65, 0x6d, 0x61, 0x78, 0x2d, 0x61, 0x67, 0x65, \\ e m a x - a g e! 0x3d, 0x67, 0x7a, 0x69, 0x70, 0x2c, 0x64, 0x65, \\ - g z i p - d e! 0x66, 0x6c, 0x61, 0x74, 0x65, 0x2c, 0x73, 0x64, \\ f l a t e - s d! 0x63, 0x68, 0x63, 0x68, 0x61, 0x72, 0x73, 0x65, \\ c h c h a r s e! 0x74, 0x3d, 0x75, 0x74, 0x66, 0x2d, 0x38, 0x63, \\ t - u t f - 8 c! 0x68, 0x61, 0x72, 0x73, 0x65, 0x74, 0x3d, 0x69, \\ h a r s e t - i! 0x73, 0x6f, 0x2d, 0x38, 0x38, 0x35, 0x39, 0x2d, \\ s o - 8 8 5 9 -! 0x31, 0x2c, 0x75, 0x74, 0x66, 0x2d, 0x2c, 0x2a, \\ 1 - u t f - - -! 0x2c, 0x65, 0x6e, 0x71, 0x3d, 0x30, 0x2e \\ - e n q - 0 -};
http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft3
SPDY/3Lookup
dictionary
75
Header Compression in HTTP 2.0 (討論中)
http://trac.tools.ietf.org/wg/httpbis/trac/wiki/HTTP2Compressionhttp://www.mnot.net/blog/2013/01/04/http2_header_compression
• SPDY3 (可以壓到剩 15%~24%)
• 但是被發現有潛在安全弱點 :(
• Header Delta-Compression (可以壓到剩 19%~30%)
76
Header Compression in HTTP 2.0 (討論中)
http://trac.tools.ietf.org/wg/httpbis/trac/wiki/HTTP2Compressionhttp://www.mnot.net/blog/2013/01/04/http2_header_compression
• SPDY3 (可以壓到剩 15%~24%)
• 但是被發現有潛在安全弱點 :(
• Header Delta-Compression (可以壓到剩 19%~30%)
76
anyway...
Binary is the future
77
anyway...
Binary is the future• SSL 時代
77
anyway...
Binary is the future• SSL 時代
• Content GZIP 壓縮
77
anyway...
Binary is the future• SSL 時代
• Content GZIP 壓縮
• Header 也壓縮
77
anyway...
Binary is the future• SSL 時代
• Content GZIP 壓縮
• Header 也壓縮
• 整個結構乾脆改⽤用 Binary 結構並指定⻑⾧長度,可以更⽅方便 parsing
77
anyway...
Binary is the future• SSL 時代
• Content GZIP 壓縮
• Header 也壓縮
• 整個結構乾脆改⽤用 Binary 結構並指定⻑⾧長度,可以更⽅方便 parsing
• Debug? we will see...
77
回頭來看LINE 的故事
http://tech.naver.jp/blog/?p=238178
回頭來看LINE 的故事
• Client 是⼿手機 App,不是瀏覽器
http://tech.naver.jp/blog/?p=238178
回頭來看LINE 的故事
• Client 是⼿手機 App,不是瀏覽器
• 2012/10 開始採⽤用 SPDY。Why?
http://tech.naver.jp/blog/?p=238178
回頭來看LINE 的故事
• Client 是⼿手機 App,不是瀏覽器
• 2012/10 開始採⽤用 SPDY。Why?
• HTTP 在⼀一個 Connection 裡無法平⾏行發送
http://tech.naver.jp/blog/?p=238178
回頭來看LINE 的故事
• Client 是⼿手機 App,不是瀏覽器
• 2012/10 開始採⽤用 SPDY。Why?
• HTTP 在⼀一個 Connection 裡無法平⾏行發送
• ⾮非常多⼩小的 Request,其 Headers 浪費
http://tech.naver.jp/blog/?p=238178
回頭來看LINE 的故事
• Client 是⼿手機 App,不是瀏覽器
• 2012/10 開始採⽤用 SPDY。Why?
• HTTP 在⼀一個 Connection 裡無法平⾏行發送
• ⾮非常多⼩小的 Request,其 Headers 浪費
• Long polling 需要多佔⼀一個 Connection,⽽而且這個 Connection 什麼事都不能做,就只能等著。
http://tech.naver.jp/blog/?p=238178
LINE 的故事(2)
http://tech.naver.jp/blog/?p=238179
LINE 的故事(2)
• LINE 怎麼⽤用 SPDY?
http://tech.naver.jp/blog/?p=238179
LINE 的故事(2)
• LINE 怎麼⽤用 SPDY?
• 有些不需加密的連線不⽤用 SSL
http://tech.naver.jp/blog/?p=238179
LINE 的故事(2)
• LINE 怎麼⽤用 SPDY?
• 有些不需加密的連線不⽤用 SSL
• 如果需要⽤用 SSL 時,不⽤用 NPN
http://tech.naver.jp/blog/?p=238179
LINE 的故事(2)
• LINE 怎麼⽤用 SPDY?
• 有些不需加密的連線不⽤用 SSL
• 如果需要⽤用 SSL 時,不⽤用 NPN
• 因為不是瀏覽器,不需要溝通 protocol
http://tech.naver.jp/blog/?p=238179
LINE 的故事(2)
• LINE 怎麼⽤用 SPDY?
• 有些不需加密的連線不⽤用 SSL
• 如果需要⽤用 SSL 時,不⽤用 NPN
• 因為不是瀏覽器,不需要溝通 protocol
• NPN 需要升級 OpenSSL 到 1.0.1
http://tech.naver.jp/blog/?p=238179
LINE 的故事(2)
• LINE 怎麼⽤用 SPDY?
• 有些不需加密的連線不⽤用 SSL
• 如果需要⽤用 SSL 時,不⽤用 NPN
• 因為不是瀏覽器,不需要溝通 protocol
• NPN 需要升級 OpenSSL 到 1.0.1
• Port Scanning,⾃自動找可以⽤用的 Port
http://tech.naver.jp/blog/?p=238179
LINE 的故事(3)
http://tech.naver.jp/blog/?p=2381
• 成果:• 成功降低 Connections 數
• 增加了傳訊息的速度
80
另⼀一個故事,DK ⼤大神在 MOPCON 的演講:⾏行動網路上的API設計準則
http://mopcon.org/session.php
81
Dirty tricks
82
Dirty tricks
• Reduce Request
82
Dirty tricks
• Reduce Request
• 合併 Request 好節省 RTT,例如數個 GET
82
Dirty tricks
• Reduce Request
• 合併 Request 好節省 RTT,例如數個 GET
• 在 SPDY 下需要重新思考其必要性
82
Dirty tricks
• Reduce Request
• 合併 Request 好節省 RTT,例如數個 GET
• 在 SPDY 下需要重新思考其必要性
• 因為 SPDY 不需要多開 connection 就可以平⾏行發送 requests,並交錯回來。不需要特別合併起來了
82
SPDY 可以幫助我們設計 finer-grained API⽽而不犧牲效能
83
4. Server Push
84
不是即時聊天室⽤用的那個Server Push
• 不是 Comet
• 不是 Ajax Long Polling
• 不是 Web Socket
85
情境:拿到 HTML 後,還需要再發 Request 拿 CSS, JS, Images 網⾴頁才能載⼊入完成
Client Server
openRequest HTML
HTML
CSS
JS
Image
Image
86
情境:拿到 HTML 後,還需要再發 Request 拿 CSS, JS, Images 網⾴頁才能載⼊入完成
Client Server
openRequest HTML
HTML
CSS
JS
Image
Image
有沒有辦法在⼀一個 RTT 就從 Server 拿到全部的資料呢?
86
⺫⽬目前的 HTTP 就有 work around 了
Inline Resource當 CSS, JS 很⼩小時,Inline 進 HTML
https://developers.google.com/speed/docs/mod_pagespeed/filter-css-inline
<html> <head> <style> .yellow {background-color: yellow;} .blue {color: blue;} .big { font-size: 8em; } .bold { font-weight: bold; } </style> </head> <body> <div class="blue yellow big bold"> Hello, world! </div> </body></html>
<html> <head> <script type="text/javascript"> /* contents of a small JavaScript file */ </script> </head> <body> <div class="blue yellow big bold"> Hello, world! </div> </body></html>
87
Inline Resource with Data URI
http://en.wikipedia.org/wiki/Data_URI_scheme
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
ul.checklist li.complete { padding-left: 20px; background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/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');
88
Inline Resource 的缺點
• 沒辦法 Cache :(
• Data URI 會增加實際檔案⼤大⼩小(不壓縮的話約增加 1/3,雖然網⾴頁會 gzip,但畢竟還是增加⼤大⼩小)
• 增加 coding 複雜性
89
SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store
Client Server
open
close
Request HTML
CSS
Image
Image
Image
HTML
90
SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store
Client Server
open
close
Request HTML
CSS
Image
Image
Image
HTML
Push CSS
90
SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store
Client Server
open
close
Request HTML
CSS
Image
Image
Image
HTML
Push CSS
Push Image
90
SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store
Client Server
open
close
Request HTML
CSS
Image
Image
Image
HTML
Push CSS
Push Image
Push Image
90
SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store
Client Server
open
close
Request HTML
CSS
Image
Image
Image
HTML
Push CSS
Push Image
Push Image
Push Image
90
SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store
Client Server
open
close
Request HTML
CSS
Image
Image
Image
HTML最後 Push HTML
Push CSS
Push Image
Push Image
Push Image
90
SPDY’s Server Push把東⻄西從 Server 推到瀏覽器的 Cache Store
Client Server
open
close
Request HTML
CSS
Image
Image
Image
HTML最後 Push HTML
進階發揮: Push 下⼀一⾴頁 HTML 或 client-side template 等
Push CSS
Push Image
Push Image
Push Image
90
SPDY 的 Server Push
91
SPDY 的 Server Push• Server 接收到 request 後
91
SPDY 的 Server Push• Server 接收到 request 後
• 除了回傳 HTML 之外,也主動推送 CSS, JavaScript, Images 等資源到瀏覽器的 Cache Store (無需 client API ⽀支援)
91
SPDY 的 Server Push• Server 接收到 request 後
• 除了回傳 HTML 之外,也主動推送 CSS, JavaScript, Images 等資源到瀏覽器的 Cache Store (無需 client API ⽀支援)
• 這樣瀏覽器就不需要再發 request 抓這些資源了
91
SPDY How?
92
SPDY How?
• SPDY 的 Web Server 可以主動發 Stream 給 Client
92
SPDY How?
• SPDY 的 Web Server 可以主動發 Stream 給 Client
• Streams 除了是 multiplexed,也是雙向的,不需要多開 TCP Connection
92
SPDY How?
• SPDY 的 Web Server 可以主動發 Stream 給 Client
• Streams 除了是 multiplexed,也是雙向的,不需要多開 TCP Connection
• 從 Client 發的 stream-id 是奇數,從 Server 發的 stream-id 是偶數
92
CSS, JS, Images從瀏覽器 Cache 拿
Server Push DemoExample
(Apache mod_spdy + Rails)
93
Server ⽀支援性如何?• Web Server
• Apache mod_spdy
• ⽤用 X-Associated-Content Header
• Nginx SPDY patch 不⽀支援
• Application Server
• node-spdy
• Jetty
94
mod_spdy 的 Server Push 流程
Client WebServer
AppServer
1. Request HTML 2. Request HTML
CSS
Image
Image
Image
HTML
3.4.
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
HTML
加上
Sample code at Rails
96
class 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
Server Push 點評• Server 不知道 Client 是不是已經有快取了,如果已經有了⼜又 push 就浪費了
• 實務上⼀一個最簡單的⽅方式就是只讓第⼀一個 stream 做 server push
• 需要 Application 層細節的調教
97
Conclusion
98
SPDY is not HTTP 2.0 yet
• 還沒定案• SPDY 只是討論的起點• Header 壓縮演算法 ?
• DNS name resolution push ?
• cert data push (節省SSL handshake 時間) ?
• explicit proxy support ?
99
It’s important to understand that SPDY isn’t being adopted as HTTP/2.0; rather, that it’s the starting point of our discussion, to avoid a laborious start from scratch.
- Mark Nottingham (chair, HTTPBis Working Group)
100
HTTP/2.0 @ HTTPbis Working Group 2012http://tools.ietf.org/agenda/83/slides/slides-83-httpbis-6.pdf
101
HTTP/2.0 @ HTTPbis Working Group 2012http://tools.ietf.org/agenda/83/slides/slides-83-httpbis-6.pdf
102
如果你是 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
如果你是 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
如果你是 Web Developer
• 基本不需要改 code 就會動,要習慣 HTTPS 環境
105
如果你是 Web Developer (2)
如果這些招你現在不知道,那以後也不⽤用知道了
106
如果你是 Web Developer (2)
如果這些招你現在不知道,那以後也不⽤用知道了
106
如果你是 Web Developer (2)
• 有幾招 “Web Optimization” 要過時了
如果這些招你現在不知道,那以後也不⽤用知道了
106
如果你是 Web Developer (2)
• 有幾招 “Web Optimization” 要過時了
• Domain Sharding
如果這些招你現在不知道,那以後也不⽤用知道了
106
如果你是 Web Developer (2)
• 有幾招 “Web Optimization” 要過時了
• Domain Sharding
• SPDY ⽤用 Single Connection 的連線品質最好。不需要多個 TCP connections,SPDY 就可以平⾏行發送 Requests。
如果這些招你現在不知道,那以後也不⽤用知道了
106
如果你是 Web Developer (2)
• 有幾招 “Web Optimization” 要過時了
• Domain Sharding
• SPDY ⽤用 Single Connection 的連線品質最好。不需要多個 TCP connections,SPDY 就可以平⾏行發送 Requests。
• Reduce Requests
如果這些招你現在不知道,那以後也不⽤用知道了
106
如果你是 Web Developer (2)
• 有幾招 “Web Optimization” 要過時了
• Domain Sharding
• SPDY ⽤用 Single Connection 的連線品質最好。不需要多個 TCP connections,SPDY 就可以平⾏行發送 Requests。
• Reduce Requests
• Combine CSS/JS 如果這些招你現在不知道,那以後也不⽤用知道了
106
如果你是 Web Developer (2)
• 有幾招 “Web Optimization” 要過時了
• Domain Sharding
• SPDY ⽤用 Single Connection 的連線品質最好。不需要多個 TCP connections,SPDY 就可以平⾏行發送 Requests。
• Reduce Requests
• Combine CSS/JS
• Image spriting如果這些招你現在不知道,那以後也不⽤用知道了
106
如果你是 Web Developer (2)
• 有幾招 “Web Optimization” 要過時了
• Domain Sharding
• SPDY ⽤用 Single Connection 的連線品質最好。不需要多個 TCP connections,SPDY 就可以平⾏行發送 Requests。
• Reduce Requests
• Combine CSS/JS
• Image spriting
• Resource inlining
如果這些招你現在不知道,那以後也不⽤用知道了
106
如果你是 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
如果你是 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
如果你是 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 ⽽而不犧牲效能
WillOut of Date
如果這些招你現在不知道,那以後也不⽤用知道了
106
如果你是 Web Developer (3)
• Server Push 可以關注看看,這是需要 Application 決定什麼時候要 Push 什麼
• 不過我認為需要 Library, Framework ⽀支援才好⽤用....
107
如果你是 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
請多指教,謝謝Twitter: @ihower
109
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: It's 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