Http:2.0 101 introduction (workshop) - Bastian Hofmann
•
1 like•255 views
The document provides an overview of the evolution of the HTTP protocol from versions 0.9 to 2.0. It summarizes the key features and changes between each version, including HTTP/1.1, and describes how HTTP/2 aims to address performance limitations in HTTP/1.1 by allowing multiple requests to be multiplexed over a single TCP connection, supporting server push, and enabling header compression. It also discusses how these new capabilities could impact web performance best practices and application development.
Report
Share
Http:2.0 101 introduction (workshop) - Bastian Hofmann
- 15. 20 years ago
- 24. The internet gets slower and slower
- 26. Slow connections
- 27. High latency
- 29. It’s hard work to keep a page fast
- 30. Lots of hacks around HTTP needed
- 31. It needs to get better
- 32. SPDY
- 36. Old truths may not be valid anymore
- 38. User enters URL
- 39. DNS lookup
- 40. TCP connection
- 41. TLS handshake
- 44. DNS caching
- 47. Finally: HTTP
- 48. HTTP request
- 52. HTTP response
- 55. HTTP/2
- 56. For the user it works the same
- 57. No changes in Headers, Semantics etc
- 58. Almost no changes in Headers, Semantics etc
- 59. Protocol (h2) is established during TLS handshake
- 62. TLS only
- 64. Multiple requests are multiplexed over one TCP connection
- 65. Server Push
- 68. Less roundtrips
- 69. Headers are received early (1st packet)
- 71. HTML response
- 72. DOM parsing
- 73. Rendering
- 75. Asset fetching
- 76. Applying CSS
- 77. Executing JS
- 80. CSS
- 81. JS
- 83. JS can manipulate the DOM
- 84. JS can access attributes set by CSS
- 85. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <link href="main.css" > <link href="profile.css" > <script src="library.js" /> <script src="app.js" /> <script> // some JS </script> </head> <body>
- 87. Lots of assets
- 88. HTTP/1.1
- 89. Every request one TCP connection
- 94. Domain sharding
- 99. TCP Slow Start
- 103. Page sizes
- 104. Less content
- 105. GZIP
- 106. Image compression
- 107. Minification
- 108. JS
- 109. CSS
- 110. HTML
- 111. Debugging problems
- 113. Sourcemaps
- 114. Less requests
- 115. Concatenation
- 118. Spritemaps
- 120. How to bundle
- 121. Over fetching
- 122. 90% CSS unused
- 123. Cache invalidation
- 124. Under fetching
- 125. HTTP/2
- 126. Only 1 connection
- 127. Fully multiplexed
- 129. Low overhead for a request
- 138. What is visible?
- 140. What is critical?
- 142. HTTP/1.1
- 144. Either inline always
- 145. Caching?
- 146. First request
- 147. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <styles> … your critical css </styles> </head> <body> <div>content</div> load main.css async set cookie that other css was loaded </body> </html>
- 148. Subsequent request (if Cookie set)
- 149. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <link href="main.css" > // loaded from cache </head> <body> <div>content</div> </body> </html>
- 151. Traditional approach
- 152. Browser Server GET css & js HTTP/1.1 200 OK Content-Type: text/html <html> <head><link ..><script ..> GET /foo.html </head><body></body></html>
- 156. Browser Server GET /foo.html <body></body> </html> HTTP/1.1 200 OK Content-Type: text/html <html> <head><link ..><script ..></head> GET css & js
- 158. Problems
- 160. Redirects
- 163. Proxies, servers, load balancers may buffer content
- 164. Browsers may wait before starting to render HTML
- 165. AJAX?
- 166. JSON
- 173. HTTP/2
- 174. Server push
- 176. Browser Server Push CSS & JS :status: 200 Content-Type: text/html <html> <head><link ..><script ..> </head><body></body></html> GET /foo.html
- 177. spdy.createServer(options, function(req, res) { // push JavaScript asset (/main.js) to the client res.push( '/main.js', {'content-type': ‚application/javascript'}, function(err, stream) { stream.end('alert("hello from push stream!")'); } ); // write main response body and terminate stream res.end( 'Hello World! <script src=��/main.js"></script>' ); }).listen(443); https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/
- 179. Automated learning
- 180. Great
- 181. When can I use it?
- 182. Browser support
- 184. Server support
- 187. Who is using it already?
- 190. Monitor and test
- 192. Stay up to date