A brief introduction to SPDY - 邁向 HTTP/2.0

A brief introduction to

SPDY
邁向 HTTP/2.0

http://ihower.tw
2013/1/13

1 / 111 ⾴頁

Disclaimer

你有聽過 HTTP 嗎？
沒有的⼈人可以離開了

2

Who am I?
• 張⽂文鈿 a.k.a. ihower
• http://ihower.tw
• 熱情⾖豆⾏行動樂活科技技術⻑⾧長
• RubyConf Taiwan 的主辦⼈人
• http://rubyconf.tw
• 今天我是⼀一位關⼼心網⾴頁效能的
網站開發者

3

HTTP v.s. SPDY
Demo
(Nginx with SPDY patch)

4

兩倍界⺩王拳!!

6 聽說今年 WebConf ⼀一定要有七⻯⿓龍珠梗?

Try it
https://www.ihower.tw

7

Agenda
• Why SPDY
• HTTP/1.0
• HTTP/1.1
• What’s SPDY
• 1.
• 2.
• 3.
• 4.
• Conclusion

8

1999
13k(zipped)-14k(unzipped)

10

2012
200k(zipped) - 600k(unzipped)

11

平均每個網⾴頁有88個 Requests

74 requests
705kb
10 domains
兩年時間
(2010/11~2013/1)

88 requests
1280kb
14 domains

http://httparchive.org/trends.php
12

Web Usability
• 根據知名學者 Jakob Nielsen 研究
• 0.1 秒 - 感覺是⾺馬上
• 1.0 秒 - 思緒開始飄移
• 10 秒 - 這東⻄西壞了吧?

http://www.nngroup.com/articles/response-times-3-important-limits/
13

KISSmetric: 超過 4 秒，Bounce Rate 增加 25%

http://blog.kissmetrics.com/loading-time/?wide=1
14

⼀一秒鐘幾⼗十萬上下，網
⾴頁載⼊入速度真的很重要
• Amazon 的網⾴頁載⼊入時間每多⼀一秒，該公
司的年度營收就減少 16 億美元

• Google 的搜尋時間每多 0.4 秒，每天的
搜尋次數就會減少 8 百萬

http://www.inside.com.tw/2012/12/28/page-speed-really-does-matter
15

全世界的平均載⼊入速度
(Google Analytics)

Desktop: ~2.7s
Mobile 更慢: ~4.8s
(中位數)

http://analytics.blogspot.tw/2012/04/global-site-speed-overview-how-fast-are.html
16

迷思: 加頻寬無⽤用
光速是物理限制，限制了 RTT (Round-Trip Time)

More Bandwidth Doesn’t Matter (Much)

http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
17


3Mbps 之後就沒什麼差了


17


RTT 降到 0
⾴頁⾯面載⼊入竟然還
要 240ms
3Mbps 之後就沒什麼差了


17

⼤大頻寬可以加快下載 Ubuntu，
不過超過 ~3Mbps 之後，對 Page
Load Time 就沒什麼差了

18

所以現在的 HTTP
有什麼問題?

19

HTTP/1.0 (1996)
Client Server
1.TCP setup handshake
2. TCP slow-start open
(congestion control)

close
open

close
open

close

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 Blocking
Client Server

open
1

2
3 B Server 必須照順序回
L 如果 Response 1 很慢卡住
O
C 了，就整個卡住了
K

1
2
3
close

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-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-beneﬁts
http://www.guypo.com/mobile/http-pipelining-big-in-mobile/
24 https://bugzilla.mozilla.org/show_bug.cgi?id=264354

那怎麼辦? 瀏覽器要怎麼平⾏行發送
Requests 來加快⾴頁⾯面載⼊入速度?

開 Multiple TCP connections
來平⾏行發送 Requests
(瀏覽器⼤大多設每個 domain 6個)
Client Server

open open open
open open open

close close close
close close close

26

瀑布流 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 Image

time
27

TCP Connection 是個需要熱
⾝身的通道

第⼀一個
HTTP
Request
( TCP handshake 和 slow start)

熱⾝身後
HTTP
Request

28

TCP Handshake 耗時 1.5 RTT

http://www.tcpipguide.com/free/t_TCPConnectionEstablishmentProcessTheThreeWayHandsh-3.htm
29

Slow Start is TCP
feature (not bug, sorry)
• Slow Start 是 TCP congestion control (壅
塞控制)的關鍵演算法

• ⼀一開始 CWND 為 2 (最近Linux改
(congestion window)

為10)了，如果沒問題，才指數乘兩倍加⼤大

流量直到有封包遺失

30

瀏覽器的 6 connections
需要個別熱⾝身，每個都是成本

HTTP
HTTP
HTTP
HTTP
HTTP
HTTP

31


HTTP
HTTP
HTTP
HTTP
HTTP
HTTP

32


HTTP
HTTP
HTTP
HTTP
HTTP
HTTP

33


HTTP
HTTP
HTTP
HTTP
HTTP
HTTP

34


HTTP
HTTP
HTTP
HTTP
HTTP
HTTP

35


HTTP
HTTP
HTTP
HTTP
HTTP
HTTP

36


HTTP
HTTP
HTTP
HTTP
HTTP
HTTP

37

第⼀一個沒熱⾝身的 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

time
38

⽽而且這六個連線彼此之間還會
競爭頻寬，讓 CWND 不準 :(
HTTP
HTTP
HTTP
HTTP
HTTP
HTTP

39

在 HTTP/1.1 的環境下

如何做 Web 優化?

40

Web Optimization:
Reduce Requests

• 因為⼀一次只有六個通道可以發 Request，所以
最好把 Requests 合併起來，減少 Requests 數

• CSS, JavaScript ﬁles
• 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 ﬂaw!

43

HTTP/1.1 Headers

44

HTTP/1.1 Headers

• 約 200 bytes 到 2KB，平均 700-800 bytes

44

HTTP/1.1 Headers

• 每個 Request/Response 幾乎都重複

44

HTTP/1.1 Headers

• User-agent

44

HTTP/1.1 Headers

• User-agent
• Cookies

44

HTTP/1.1 Headers

• User-agent
• Cookies
• 竟然沒辦法壓縮

44

anyway, HTTP/1.1
is so old...
該是改變的時候了

45

什麼是 SPeeDY
SPDY HTTP
SSL
TCP

47

什麼是 SPeeDY
• SPDY 是⼀一個 Application Layer 的通訊協定， SPDY HTTP
⽤用以替換 HTTP
SSL
TCP

47

什麼是 SPeeDY
SSL
• 沿⽤用了 HTTP 的語義，但是修改了傳輸⽅方式 TCP

47

什麼是 SPeeDY
SSL
• Google 2009 年推出

47

什麼是 SPeeDY
SSL
• 2012/11 成為 HTTPBis Working Group 的
HTTP 2.0 draft

47

什麼是 SPeeDY
SSL
• 2012/11 成為 HTTPBis Working Group 的
HTTP 2.0 draft
• 預計 2014/11 定案，送 IETF 成為 RFC 標準

47

SPDY 的要求是
• 改善 Page load time 網⾴頁載⼊入時間

48

SPDY 的要求是
• 保持 HTTP/1.1 語義，包括：

48

SPDY 的要求是
• HTTP methods

48

SPDY 的要求是
• HTTP methods
• Status Codes

48

SPDY 的要求是
• HTTP methods
• Status Codes
• URIs

48

SPDY 的要求是
• HTTP methods
• Status Codes
• URIs
• Headers ﬁelds

48

SPDY 的要求是
• HTTP methods
• Status Codes
• URIs
• Headers ﬁelds
• 這樣只要升級 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-deﬁning how it gets used “on
the wire” so it’s more efﬁcient, 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

51 http://caniuse.com/spdy

哪些廠商在⽤用?
• Google (Search, Gmail, Docs, Drive, Groups, Reader...etc)

• Google App Engine + SSL users

• Twitter

• Wordpress.com

• LINE

• Amazon Kindle Fire

• Facebook (跟進中)

• Akamai (跟進中)

• Cloudﬂare (跟進中)

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%

54 http://www.chromium.org/spdy/spdy-whitepaper

SPDY 特點
• 1. SSL is required

55

SPDY 特點
• 2. Multiplexed streams over a single TCP
connection

55

SPDY 特點
connection
• 3. HTTP header compression

55

SPDY 特點
connection
• 3. HTTP header compression
• 4. Server Push

55

1. SSL
(TLS, Transport Layer Security)

TLS False Start
TLS Snap Start

https://technotes.googlecode.com/git/nextprotoneg.html
56

1. SSL
• Secure by default，都 2013 年了，任何需要登⼊入的網站，都應
該跑 HTTPS

TLS False Start
TLS Snap Start

56

1. SSL
該跑 HTTPS
• 不跑在 Port 80 或 443，肯定有防⽕火牆問題

TLS False Start
TLS Snap Start

56

1. SSL
該跑 HTTPS
• 以佈署觀點看，在 Port 443 上進⾏行擴充較可⾏行

TLS False Start
TLS Snap Start

56

1. SSL
該跑 HTTPS
• Google 推了 NPN (Next Protocol Negotiation) 標準是⼀一種 SSL
Extension，可以溝通在 TLS 上要跑什麼通訊協定 (不限 SPDY)

TLS False Start
TLS Snap Start

56

1. SSL
該跑 HTTPS
• 但是，SSL handshake 終歸是負擔 (多兩個RTT時間)，所以
SPDY 在⾮非常⼩小的網⾴頁中(少於六個資源)，速度反⽽而沒有⽐比較
快

TLS False Start
TLS Snap Start

56

1. SSL
該跑 HTTPS
• 但是，SSL handshake 終歸是負擔 (多兩個RTT時間)，所以
SPDY 在⾮非常⼩小的網⾴頁中(少於六個資源)，速度反⽽而沒有⽐比較
快
• 進階問題：如何改善 SSL handshake latency?

TLS False Start
TLS Snap Start

56

1. SSL
• Secure by default，都 2013 年了，任何需
要登⼊入的網站，都應該跑 HTTPS

57

1. SSL
• Secure by default，都 2013 年了，任何需
要登⼊入的網站，都應該跑 HTTPS

HTTP is hacker
friendly
(設計台詞)

57

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

Next Protocol Negotiation
(NPN)

我⽀支援
spdy/3
spdy/2
foobar

SSL handshake
Client Server

59

Next Protocol Negotiation
(NPN)

我⽀支援
spdy/3
spdy/2
foobar

SSL handshake
Client Server

我選 spdy/2

60

2. Multiplexed streams over
a single TCP connection
SPDY

61

2.可以同時多個 Requests 做
Multiplexed 傳輸，並只⽤用
⼀一條 TCP Connection
SPDY

62

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

data frame
將資料拆個數個 data frame，Chrome 預設是 4K。
但是 spec 沒有限制，建議不⽤用⼤大，好讓不同 stream
的 frames 可以交錯。
+----------------------------------+
|0| Stream-ID (31bits) Request ID
|
+----------------------------------+
| Flags (8) | Length (24 bits) |
+----------------------------------+
| Data |
+----------------------------------+

67

其他 control frames
• RST_STREAM
• 出錯時，通知對⽅方中斷重來
• SETTINGS
• 可以讓 client 設定 CWND 等
• PING
• ...
68

Client Server

open

close

69

Client Server

open
SYN_STREAM 1

close

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3

close

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
SYN_STREAM 5

close

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
SYN_STREAM 5

SYN_REPLY 1

close

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
SYN_STREAM 5

Data 1
SYN_REPLY 1

close

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
SYN_STREAM 5

Data 1 + FIN

Data 1
SYN_REPLY 1

close

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
SYN_STREAM 5

Data 1 + FIN SYN_REPLY 3

Data 1
SYN_REPLY 1

close

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
SYN_STREAM 5


Data 1
SYN_REPLY 1

close SYN_REPLY 5

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
SYN_STREAM 5


Data 1
SYN_REPLY 1

Data 2
close SYN_REPLY 5

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
SYN_STREAM 5


Data 1
SYN_REPLY 1
Data 2 + FIN
Data 2
close SYN_REPLY 5

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
SYN_STREAM 5


Data 1 Data 3
SYN_REPLY 1
Data 2 + FIN
Data 2
close SYN_REPLY 5

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
SYN_STREAM 5


Data 1 Data 3
SYN_REPLY 1
Data 2 + FIN Data 3 + FIN
Data 2
close SYN_REPLY 5

69

Client Server

open
SYN_STREAM 1
SYN_STREAM 3
可以同時平⾏行發 Request
SYN_STREAM 5
在⼀一條 TCP Connection 上


Data 1 Data 3
SYN_REPLY 1
Data 2
close SYN_REPLY 5

69

Client Server

open
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
close SYN_REPLY 5

69

chrome://net-internals#spdy

70

Beneﬁt:

Streams are multiplexed

https://groups.google.com/forum/#!msg/spdy-dev/XRkL7FlIOW4/PwSkwKY7ra4J
71

Beneﬁt:

• frame 可以混雜交錯，因為有 stream-id

71

Beneﬁt:


• 只有⼀一個TCP通道

71

Beneﬁt:


• 只需 TCP setup 和 Slow-Start ⼀一次

71

Beneﬁt:



• 沒有多個 connection 競爭，CWND 可以更⾼高

71

Beneﬁt:




• SPDY 甚⾄至讓 client 記得上次的 CWND 是多少，下次直接⽤用

71

Beneﬁt:





• 降低 Server 負擔，甚⾄至是 NAT 的 table 空間

71

Beneﬁt:





• ⼩小檔案多也不怕，不需要合併起來(JS, CSS, Images等)

71

Beneﬁt:






• Anti-pattern: 拆分 domain 反⽽而增加連線負擔

71

Beneﬁt:






• Anti-pattern: 拆分 domain 反⽽而增加連線負擔

• 弱項: 3-rd party domain 沒效果，還是需要多開連線

71

Beneﬁt:

Streams are prioritized

72

Beneﬁt:

• 可以有優先順序，讓 Server 優先回傳重
要的 Resource

72

Beneﬁt:

• 可以有優先順序，讓 Server 優先回傳重
要的 Resource

• 更進⼀一步的說，因為 frames 可以交錯，
可以先暫停不重要的 Stream，先傳重要
的 Stream

72

Server 還沒回傳完
Client 發了一個優先權
更高的 Stream

那麼 Ser ver 可以停下
來先回應重要的 Stream

73 http://jurdak.com/CACM12.pdf

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

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 - -

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

anyway...

Binary is the future

77

anyway...

• SSL 時代

77

anyway...

• SSL 時代
• Content GZIP 壓縮

77

anyway...

• SSL 時代
• Header 也壓縮

77

anyway...

• SSL 時代
• 整個結構乾脆改⽤用 Binary 結構並指定⻑⾧長
度，可以更⽅方便 parsing

77

anyway...

• SSL 時代
• 整個結構乾脆改⽤用 Binary 結構並指定⻑⾧長
度，可以更⽅方便 parsing

• Debug? we will see...
77

回頭來看
LINE 的故事

http://tech.naver.jp/blog/?p=2381
78

回頭來看
LINE 的故事
• Client 是⼿手機 App，不是瀏覽器

78

回頭來看
LINE 的故事
• 2012/10 開始採⽤用 SPDY。Why?

78

回頭來看
LINE 的故事
• HTTP 在⼀一個 Connection 裡無法平⾏行發送

78

回頭來看
LINE 的故事
• ⾮非常多⼩小的 Request，其 Headers 浪費

78

回頭來看
LINE 的故事
• ⾮非常多⼩小的 Request，其 Headers 浪費
• Long polling 需要多佔⼀一個 Connection，⽽而
且這個 Connection 什麼事都不能做，就只
能等著。
78

LINE 的故事(2)

79

LINE 的故事(2)
• LINE 怎麼⽤用 SPDY?

79

LINE 的故事(2)
• 有些不需加密的連線不⽤用 SSL

79

LINE 的故事(2)
• 如果需要⽤用 SSL 時，不⽤用 NPN

79

LINE 的故事(2)
• 因為不是瀏覽器，不需要溝通 protocol

79

LINE 的故事(2)

• NPN 需要升級 OpenSSL 到 1.0.1

79

LINE 的故事(2)

• NPN 需要升級 OpenSSL 到 1.0.1

• Port Scanning，⾃自動找可以⽤用的 Port
79

LINE 的故事(3)
• 成果：
• 成功降低 Connections 數
• 增加了傳訊息的速度

80

另⼀一個故事，DK ⼤大神在 MOPCON 的演講:
⾏行動網路上的API設計準則
http://mopcon.org/session.php

81

Dirty tricks
• Reduce Request

82

Dirty tricks
• Reduce Request
• 合併 Request 好節省 RTT，例如數個 GET

82

Dirty tricks
• Reduce Request
• 在 SPDY 下需要重新思考其必要性

82

Dirty tricks
• Reduce Request
• 在 SPDY 下需要重新思考其必要性
• 因為 SPDY 不需要多開 connection 就可以平
⾏行發送 requests，並交錯回來。不需要特別
合併起來了

82

SPDY 可以幫助我們設計
ﬁner-grained API
⽽而不犧牲效能

83

不是即時聊天室⽤用的那個
Server Push

• 不是 Comet
• 不是 Ajax Long Polling
• 不是 Web Socket

85

情境：
拿到 HTML 後，還需要再發 Request
拿 CSS, JS, Images 網⾴頁才能載⼊入完成
Client Server

open Request HTML

HTML

CSS

JS

Image

Image

86

情境：
拿到 HTML 後，還需要再發 Request
拿 CSS, JS, Images 網⾴頁才能載⼊入完成
Client Server

open Request HTML

HTML
有沒有辦法在⼀一個
RTT 就從 Server 拿
CSS 到全部的資料呢?
JS

Image

Image

86

⺫⽬目前的 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/ﬁlter-css-inline
87

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

Inline Resource 的缺點

• 沒辦法 Cache :(
• Data URI 會增加實際檔案⼤大⼩小
(不壓縮的話約增加 1/3，雖然網⾴頁會 gzip，但畢竟還是增加⼤大⼩小)

• 增加 coding 複雜性

89

SPDY’s Server Push
把東⻄西從 Server 推到瀏覽器的 Cache Store
Client Server

open Request HTML

CSS

Image

Image

Image

HTML
close

90

Client Server

open Request HTML

Push CSS
CSS

Image

Image

Image

HTML
close

90

Client Server

open Request HTML

Push CSS
CSS
Push Image
Image

Image

Image

HTML
close

90

Client Server

open Request HTML

Push CSS
CSS
Push Image
Image
Push Image
Image

Image

HTML
close

90

Client Server

open Request HTML

Push CSS
CSS
Push Image
Image
Push Image
Image
Push Image
Image

HTML
close

90

Client Server

open Request HTML

Push CSS
CSS
Push Image
Image
Push Image
Image
Push Image
Image
最後 Push HTML
HTML
close

90

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

SPDY 的 Server Push

91

• Server 接收到 request 後

91

• 除了回傳 HTML 之外，也主動推送 CSS,
JavaScript, Images 等資源到瀏覽器的
Cache Store (無需 client API ⽀支援)

91

• 除了回傳 HTML 之外，也主動推送 CSS,
JavaScript, Images 等資源到瀏覽器的
Cache Store (無需 client API ⽀支援)

• 這樣瀏覽器就不需要再發 request 抓這些
資源了

91

SPDY How?
• SPDY 的 Web Server 可以主動發 Stream
給 Client

92

SPDY How?
給 Client

• Streams 除了是 multiplexed，也是雙向
的，不需要多開 TCP Connection

92

SPDY How?
給 Client

• Streams 除了是 multiplexed，也是雙向
的，不需要多開 TCP Connection

• 從 Client 發的 stream-id 是奇數，從
Server 發的 stream-id 是偶數

92

Server Push Demo
Example
(Apache mod_spdy + Rails)

CSS, JS, Images
從瀏覽器 Cache 拿

93

Server ⽀支援性如何?
• Web Server
• Apache mod_spdy
• ⽤用 X-Associated-Content Header
• Nginx SPDY patch 不⽀支援
• Application Server
• node-spdy
• Jetty

94

mod_spdy 的
Server Push 流程
1. Request HTML 2. Request HTML

Web App
Client
4. CSS Server Server
Image 3.
Image HTML
Image
加上
HTML X-Associated-Content Header:
“https://foobar.org/app.css”,
”https://foobar.org/image1.png”

95

Sample code at Rails
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

96

Server Push 點評
• Server 不知道 Client 是不是已經有快取
了，如果已經有了⼜又 push 就浪費了

• 實務上⼀一個最簡單的⽅方式就是只讓第⼀一
個 stream 做 server push

• 需要 Application 層細節的調教

97

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 2012
http://tools.ietf.org/agenda/83/slides/slides-83-httpbis-6.pdf

101

HTTP/2.0 @ HTTPbis Working Group 2012
http://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/
mpbpobfﬂnpcgagjijhmgnchggcjblin

• https://addons.mozilla.org/en-us/ﬁrefox/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 Optimization” 要過時了

如果這些招你
現在不知道，
知道了

106


• Domain Sharding

如果這些招你
現在不知道，
知道了

106


• Domain Sharding
• SPDY ⽤用 Single Connection 的連線品質最好。
不需要多個 TCP connections，SPDY 就可以平
⾏行發送 Requests。

如果這些招你
現在不知道，
知道了

106


• Domain Sharding
• Reduce Requests

如果這些招你
現在不知道，
知道了

106


• Domain Sharding
• Reduce Requests
• Combine CSS/JS
如果這些招你
現在不知道，
知道了

106


• Domain Sharding
• Reduce Requests
• Combine CSS/JS
如果這些招你
• Image spriting 現在不知道，
知道了

106


• Domain Sharding
• Reduce Requests
• Combine CSS/JS
如果這些招你
• Resource inlining 知道了

106


• Domain Sharding
• Reduce Requests
• Combine CSS/JS
如果這些招你

• 設計 HTTP API 可以 ﬁner-grained ⽽而不犧牲
效能

106


• Domain Sharding
⾏行發送 Requests。 Will
• Reduce Requests Out of Date
• Combine CSS/JS
如果這些招你

• 設計 HTTP API 可以 ﬁner-grained ⽽而不犧牲
效能

106


• 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

A brief introduction to SPDY - 邁向 HTTP/2.0

More Related Content

Viewers also liked

Similar to A brief introduction to SPDY - 邁向 HTTP/2.0

More from Wen-Tien Chang

A brief introduction to SPDY - 邁向 HTTP/2.0