HTTP2: Pipeline Bling - Speaker Deck

Slide 1

Slide 1 text

1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING

Slide 2

Slide 2 text

HTTP/2: PIPELINE BLING I know when that pipeline bling, that can only mean one thing

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

HTTP/1 Hypertext Transfer Protocol Version 1

Slide 5

Slide 5 text

Presentation Session Transport Network Data link Physical Application

Slide 6

Slide 6 text

Presentation Session Transport Network Data link Physical Application }HTML

Slide 7

Slide 7 text

Presentation Session Transport Network Data link Physical Application }HTML }HTTP, TLS

Slide 8

Slide 8 text

Presentation Session Transport Network Data link Physical Application }HTML }HTTP, TLS }TCP

Slide 9

Slide 9 text

Presentation Session Transport Network Data link Physical Application }HTML }HTTP, TLS }TCP

Slide 10

Slide 10 text

Presentation Session Transport Network Data link Physical Application }HTML }HTTP, TLS }TCP

Slide 11

Slide 11 text

Initiator Listener

Slide 12

Slide 12 text

Initiator Listener SYN SYN-ACK

Slide 13

Slide 13 text

Initiator Listener SYN SYN-ACK ACK { TCP

Slide 14

Slide 14 text

Initiator Listener SYN SYN-ACK ACK ClientHello ServerHello Certiﬁcate ServerHelloDone { TCP

Slide 15

Slide 15 text

Initiator Listener SYN SYN-ACK ACK ClientHello ServerHello Certiﬁcate ServerHelloDone ClientKeyExchange ChangeCipherSpec Finished { TCP { TLS

Slide 16

Slide 16 text

Initiator Listener SYN SYN-ACK ACK ClientHello ServerHello Certiﬁcate ServerHelloDone ClientKeyExchange ChangeCipherSpec Finished ChangeCipherSpec Finished { TCP { TLS

Slide 17

Slide 17 text

Initiator Listener SYN SYN-ACK ACK ClientHello ServerHello Certiﬁcate ServerHelloDone ClientKeyExchange ChangeCipherSpec Finished ChangeCipherSpec Finished { TCP { TLS

Slide 18

Slide 18 text

Initiator Listener SYN SYN-ACK ACK ClientHello ServerHello Certiﬁcate ServerHelloDone ClientKeyExchange ChangeCipherSpec Finished ChangeCipherSpec Finished { TCP { TLS Finally, we can start our HTTP request.

Slide 19

Slide 19 text

Presentation Session Transport Network Data link Physical Application }HTML }HTTP, TLS }TCP

Slide 20

Slide 20 text

Client Server

Slide 21

Slide 21 text

Client Server GET / index.html

Slide 22

Slide 22 text

Client Server GET / index.html GET /main.css

Slide 23

Slide 23 text

Client Server GET / index.html GET /main.css main.css

Slide 24

Slide 24 text

Client Server GET / index.html GET /main.css main.css GET /logo.png

Slide 25

Slide 25 text

Client Server GET / index.html GET /main.css main.css GET /logo.png logo.png

Slide 26

Slide 26 text

Client Server GET / index.html GET /main.css main.css GET /logo.png logo.png

Slide 27

Slide 27 text

Client Server GET / index.html GET /main.css main.css GET /logo.png logo.png Still need to get all of the other assets!

Slide 28

Slide 28 text

Client Server GET / index.html GET /main.css main.css GET /logo.png logo.png Still need to get all of the other assets! 1s

Slide 29

Slide 29 text

Client Server GET / index.html GET /main.js main.js GET /main.css main.css

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

~6 Connections per origin

Slide 37

Slide 37 text

~17 Connections per page

Slide 38

Slide 38 text

~124 Alexa 1000 average requests per page in 2016 http://httparchive.org/

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

HACKS Things engineers do to reduce request counts

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

li { background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAO...) no-repeat left center; padding: 5px 0 5px 25px; }

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

grunt.initConﬁg({ concat: { options: { separator: ';', }, dist: { src: ['src/intro.js', 'src/project.js', 'src/outro.js'], dest: 'dist/built.js', }, }, });

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

HTTP/2 Hypertext Transfer Protocol Version 2

Slide 47

Slide 47 text

HPACK Header compression for HTTP/2

Slide 48

Slide 48 text

Index Header Name Header Value 1 :authority 2 :method GET 3 :method POST 4 :path / 5 :path /index.html 6 :scheme http 7 :scheme https 8 :status 200 … … … 60 via 61 www-authenticate

Slide 49

Slide 49 text

:method: GET :scheme: http :host: jobs.azavea.com :path: / referer: http://www.azavea.com/ accept-encoding: gzip

Slide 50

Slide 50 text

:method: GET :scheme: http :host: jobs.azavea.com accept-encoding: gzip :path: /logo.png referer: http://jobs.azavea.com/

Slide 51

Slide 51 text

Index Header Name Header Value 62 :host jobs.azavea.com 63 :referer http://www.azavea.com/ 64 :path /logo.png 65 :referer http://jobs.azavea.com/ … … …

Slide 52

Slide 52 text

Symbol Code as Bits Length in Bits / 011000 6 l 101000 6 o 00111 5 g 100110 6 . 010111 6 p 101011 6 n 101010 6

Slide 53

Slide 53 text

“/logo.png” = 9 characters * 8 bits = huffman(“/logo.png”) = 6 + 5 + 6 + 5 + 6 + 6 + 6 + 6 = 72 bits 46 bits

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

MULTIPLEXING Sending multiple HTTP requests via a single TCP connection

Slide 56

Slide 56 text

Client Server stream/1 DATA stream/2 HEADERS stream/2 DATA stream/1 DATA … stream/3 DATA

Slide 57

Slide 57 text

Client Server stream/1 DATA stream/2 HEADERS stream/2 DATA stream/1 DATA … stream/3 DATA

Slide 58

Slide 58 text

Client Server stream/1 DATA stream/2 HEADERS stream/2 DATA stream/1 DATA … stream/3 DATA

Slide 59

Slide 59 text

Client Server stream/1 DATA stream/2 HEADERS stream/2 DATA stream/1 DATA … stream/3 DATA

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

SERVER PUSH Preemptively push responses to a client in association with a previous request

Slide 62

Slide 62 text

Client Server

Slide 63

Slide 63 text

Client Server GET / index.html

Slide 64

Slide 64 text

Client Server GET / index.html main.css logo.png

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

2.4.17+ 1.9.5+

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING 1-800-PIPELINEBLING