spdy

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?


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

http://www.chromium.org/spdy



https://groups.google.com/forum/?fromgroups%23!forum/spdy-dev



http://googledevjp.blogspot.jp/2012/05/spdy.html



http://blog.livedoor.jp/kotesaki/archives/cat_46494.html



http://d.hatena.ne.jp/jovi0608/20120517/1337235058

http://d.hatena.ne.jp/jovi0608/20120517/1337235058

THANK YOU!!


spdy

Technology

Transcript of spdy