Post on 15-May-2015
SPDY!!
JUNE 22ND, 2012 @ APP ENGINE JA NITE
KOMASSHU
• Researching cutting-edge web technology
• Especially communication APIs, in preference
• Google API Expert (HTML5)
• Microsoft Most Valuable Professional(IE)
• Twitter: @komasshu
• Blog: http://blog.livedoor.jp/kotesaki
SELF-INTRODUCTION
ACTIVITIES(LOVE SPEED!!)
http://wakachi.komasshu.info/
Referred!!, But… orz(I know I should do feedback)
http://www.html5rocks.com/en/tutorials/speed/quick/
TODAY’S MAIN IDEA
Introduction to SPDY!!
TODAY’S AGENDA
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?
http://www.flickr.com/photos/59916467@N06/6974781080/
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?
EVOLUTION OFWEB SERVICES
http://www.ocn.ne.jp/http://www.ibarakiken.gr.jp/www/index.html https://www.facebook.com/
1991 2012
ALSO COMMUNICATION MODEL HAS CHANGED
http://www.ocn.ne.jp/http://www.ibarakiken.gr.jp/www/index.html https://www.facebook.com/
1991 2012
Single resourceMultiple resources
Multiple resources+
Bi-directional
TRANSPORT PROTOCOL STILL HTTP
GET index.html
GET style.css
REQUEST
RESPONSE
REQUEST
RESPONSE
NOT CHANGED.
ISSUE IN HTTPResponse time become slower when required resources increased.
And each transaction has overlapped headers.
CURRENT PRACTICE
Concurrent tcp connectionsIn RFC2616 (HTTP/1.1),
# of concurrent tcp connections
2 (IE6, 7 keeps the number)
Modern Browser : over 6More numbers… multi-domain
e.g. Gmap use mts0.google.com & mts1 for map, but these are same server (CNAME = mts.l.google.com)
BUT STILL…
• Concurrent tcp means
• Abuse of server resources• intermediary’s resources, as well
• e.g. NAT, proxy, FireWall…
• Need additional coding to keep order.
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?
http://www.flickr.com/photos/33224129@N00/3348658950/
SPDY• Who proposed?
• Google• Goal
• SPEED!!• First POST in ML(spdy–dev)
• Nov 17th, 2009• Current version
• SPDY 2• Services with SPDY
• Almost Google’s site• Twitter
• Supported Browser
• Google Chrome• Mozilla Firefox• Amazon Silk Browser
• Servers
• Apache, nginx, jetty, node, … http://www.chromium.org/spdy
FEATURES
SPDYCurrent practice
• Multiplexing request under single tcp• Header compression• Server push feature
[BTW] SPDY NEEDS TLS TUNNELING UNDER COMMON ENV
In real internet, there are lots of devices verifing http protocol.
proxyFirewall
Loadbalancer
Raw spdy transaction
Block!!
Can’t touch
TLS tunneling
[BTW] HOW TO SWITCHSPDY AND HTTPS
• tls NPN : Next Protocol Negotiation• Under non-SPDY browser, HTTPS is automatically used;-)
http://tools.ietf.org/id/draft-agl-tls-nextprotoneg-03.html
Client Hello
Server Hello
spdy2 http/1.1
MULTIPLEX
Each streams are treated as key-value pair.
TLS tunneling
SPDY_SESSION_SYN_STREAM
SPDY_SESSION_SYN_REPLY
1req3req5req
1 res 3 res5 res
PREVENT HOL BLOCKING (!PIPELINE)
Case : Pipeline
Req #1
Req #3
Req #5 1
3 5Res #1
Res #3
Res #5
BLOCKED
Case : non Pipeline (SPDY)
Req #1
Req #3
Req #5 1
3 5Res #1
Res #3
Res #5
MULTIPLEX : TWO LAYERS• Split into two parts
• Framing layer• In this layer, doesn’t care about value• Value is just a binary data
• HTTP layer• How to fit HTTP protocol into SPDY’s framing layer as
binary data.
[REF] SYN_REPLY
http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft2
Compressed(binary)
key
value
Framing layer
HTTP layer(HTTP header messages are
also treated as key-value pair )
http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft2
Compressed(binary)
key
value
Framing layer
HTTP layer(HTTP header messages are
also treated as key-value pair )
HEADER COMPRESSION
As described in previous slide
SERVER PUSH• It’s just for SPEED!!
• Don’t be considered as common push service
index.html
<head>〜 </head>css, js
<body>〜 </body>image, video, etc.
w/o server push
index.html
w/ server push
Send css, js, image etc.w/o client’s request
SERVER PUSH [CONT]
index.html
Send css, js, image etc.w/o client’s request
Cache
Just cached
Used when required.
(e.g. HTML parser, ajax
request)
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?
http://www.flickr.com/photos/petrahenl/6857301701/
DEMO1. FEEL SPEED IN SPECIFIC CASE
http://spdykomtest.appspot.com/pub/test.html
https://spdykomtest.appspot.com/pub/test.html
Normal HTTP SPDY
DEMO2. IN COMMON CASE & PUSH FEATURE
https://spdykomtest.appspot.com/pub/makuhari/index.html
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?
http://www.flickr.com/photos/regansbox/2371720977/
NO CODING REQUIRED(W/O SERVER PUSH)
Just change / update your middleware is enough.
Serverengine
Apache + mod_spdyNginx + patch
Document root
html css js php Contents layer is completely independent w/ SPDY.
GAE IS NICE PLACE TO TRY SPDY
• Common manners of deploying on GAE is enough.• All you need is changing protocol schema (http => https)
Channel API also works with
http://blog.livedoor.jp/kotesaki/archives/1802324.html
Quite easy!!
FALLBACK WORKS WELL!!
W/ SERVER PUSH(CASE NODE-SPDY)
app.get(‘hoge’, function(req, res) { if (req.isSpdy) { var headers = {‘content-type’, ‘text/javascript’}; res.push(‘hoge.js’, headers, function(e, s) { s.end(“alert(0);”); }); } res.sendfile(__dirname + “/public/index.html”);}
• Introduction
• What’s SPDY?
• DEMO
• How to use it?
• How to make it?
http://www.flickr.com/photos/vbthe/7237597146/
IS IT THE RIGHT CHOICE FOR LARGE DATA?
Use SPDY for large resources … right solution?
• encryption cost• CDN doesn’t work• Block short data transfer ( really SPDY/3 solve it? )
1 Large data (image, video, …) 3 json
Netwok loss !!Blocks next transaction.
Short data is often high priority than large.
INFORMATIVE ENTRY
Amazon's Silk Browser Acceleration Tested: Less Bandwidth Consumed, But Slower Performance
http://www.anandtech.com/show/5139/amazons-silk-browser-tested-less-bandwidth-consumed-but-slower-performance
WHAT ARE THE BOTTLENECKS?
Amazon’sProxy enhanced
by SPDYSPDY w/ TLS
Of course, I’m not sure ;-)
STUDY FROM CURRENT PRACTICE
Google map’s image is transported by another SPDY connection.
Twitter doesn’t use SPDY for user’s icon transaction.
“with research, Find best practice”
TOOLS:SPDY INDICATOR
TOOLS:DEV TOOL, NET-INTERNALS
TOOLS:SPEED TRACER
MOST IMPORTANT THING
“Rich user experience in adequate system cost.”
• Goal is not so simple, but we should achieve
• Not only SPDY, but also other method should be considered together.
JUST TRY AND FEEL W/ GAE!!
SUGGESTED LINKS• SPDY - The Chromium Projects
• http://www.chromium.org/spdy• spdy-dev
• https://groups.google.com/forum/?fromgroups#!forum/spdy-dev
• モバイルネットワークにおける SPDY のパフォーマンス• http://googledevjp.blogspot.jp/2012/05/spdy.html
• こてさき Ajax:SPDY
• http://blog.livedoor.jp/kotesaki/archives/cat_46494.html• Node.js で Hello SPDY を作る
• http://d.hatena.ne.jp/jovi0608/20120517/1337235058
THANK YOU!!
http://www.flickr.com/photos/23086934@N02/2250806050/