InterCon 2016 - HTTP/2 for Web Application Developers
1 like995 views
The document discusses the technical aspects of HTTP/2.0, including its advantages over HTTP/1.1 such as multiplexing, improved compression, and server push features, aiming to enhance web performance. It outlines optimization strategies for web resources, like combining CSS and JS files and reducing HTTP requests. Furthermore, it emphasizes the importance of prioritizing content delivery and utilizing advanced features of HTTP/2.0 for better user experience.
![$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Escape character is '^]'.
GET / HTTP/1.1
Host: www.alura.com.br
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding,User-Agent
Content-Language: pt-br
Date: Thu, 01 Apr 2017 18:37:18 GMT
Server: Google Frontend
Cache-Control: private
<!DOCTYPE html><html><head><title>Caelum</title>](https://image.slidesharecdn.com/10h00sergiolopes-161027121120/85/InterCon-2016-HTTP-2-for-Web-Application-Developers-4-320.jpg)
![TEXTO
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Escape character is '^]'.
GET / HTTP/1.1
Host: www.alura.com.br
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding,User-Agent
Content-Language: pt-br
Date: Thu, 01 Apr 2017 18:37:18 GMT
Server: Google Frontend
Cache-Control: private
<!DOCTYPE html><html><head><title>Caelum</title>](https://image.slidesharecdn.com/10h00sergiolopes-161027121120/85/InterCon-2016-HTTP-2-for-Web-Application-Developers-5-320.jpg)
![REQUEST
RESPONSE
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Escape character is '^]'.
GET / HTTP/1.1
Host: www.alura.com.br
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding,User-Agent
Content-Language: pt-br
Date: Thu, 01 Apr 2017 18:37:18 GMT
Server: Google Frontend
Cache-Control: private
<!DOCTYPE html><html><head><title>Caelum</title>](https://image.slidesharecdn.com/10h00sergiolopes-161027121120/85/InterCon-2016-HTTP-2-for-Web-Application-Developers-6-320.jpg)
![...ESPERA...
REQUEST
RESPONSE
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Escape character is '^]'.
GET / HTTP/1.1
Host: www.alura.com.br
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding,User-Agent
Content-Language: pt-br
Date: Thu, 01 Apr 2017 18:37:18 GMT
Server: Google Frontend
Cache-Control: private
<!DOCTYPE html><html><head><title>Caelum</title>](https://image.slidesharecdn.com/10h00sergiolopes-161027121120/85/InterCon-2016-HTTP-2-for-Web-Application-Developers-7-320.jpg)
![MÉTODO E URL
STATUS
RESPOSTA
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Escape character is '^]'.
GET / HTTP/1.1
Host: www.alura.com.br
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding,User-Agent
Content-Language: pt-br
Date: Thu, 01 Apr 2017 18:37:18 GMT
Server: Google Frontend
Cache-Control: private
<!DOCTYPE html><html><head><title>Caelum</title>](https://image.slidesharecdn.com/10h00sergiolopes-161027121120/85/InterCon-2016-HTTP-2-for-Web-Application-Developers-8-320.jpg)
![HEADERS
HEADERS
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Escape character is '^]'.
GET / HTTP/1.1
Host: www.alura.com.br
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding,User-Agent
Content-Language: pt-br
Date: Thu, 01 Apr 2017 18:37:18 GMT
Server: Google Frontend
Cache-Control: private
<!DOCTYPE html><html><head><title>Caelum</title>](https://image.slidesharecdn.com/10h00sergiolopes-161027121120/85/InterCon-2016-HTTP-2-for-Web-Application-Developers-9-320.jpg)
InterCon 2016 - HTTP/2 for Web Application Developers
- 1. HTTP 2.0
- 3. REVIEW HTTP
- 4. $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- 5. TEXTO $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- 6. REQUEST RESPONSE $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- 7. ...ESPERA... REQUEST RESPONSE $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- 8. MÉTODO E URL STATUS RESPOSTA $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- 9. HEADERS HEADERS $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- 10. texto request > espera > response headers HTTP
- 11. cliente servidor cliente servidor HTTP 1.1 CONEXÃO TCP REQUEST REQUEST CONEXÃO TCP
- 12. cliente servidor REQUEST REQUEST #2 REQUEST #3 CONEXÃO TCP
- 13. cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 de 4 a 8 conexões
- 14. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES diminuir requests diminuir tráfego paralelizar requests
- 15. O NOVO HTTP/2
- 16. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Cache-Control: private <!DOCTYPE html><html><head><title>Alura</title> <meta name=viewport content=width=device-width> <meta name=description content="Cursos online de tecnologia, programação, front-end, mobile, design, ux, infra e muito mais"><style> HTTP/1.1
- 17. GET / HTTP/1.1 Host: www.alura.com.br Accept-Encoding: gzip HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Cache-Control: private Content-Encoding: gzip Vary: Accept-Encoding ??[mŚ???,l?T?%.?JI?;1?R0??E?д?H{{?un??Tm??:?U?5DI??su? L??!???ӵm?_?{-??bՓ?u??6?1,W??N?C.?0?f*??ꮘ?BV?????!#m|? x???L? Q???֝?U?.?MZ跘?M?JN_?I??RNN???}Y??????cM?<?T?l U????8?Π???id?c?8)E8??%:?$D*ⰹ?????$4???j?F? ((R2[??O?;s???ާy??Fd⒙HK?x?-?$???ȈȈ??????????O GZIP HTTP/1.1
- 21. :method: GET :path: / Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :method: GET :path: /style.css Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 HTTP/1.1
- 22. :method: GET :path: / Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :method: GET :path: /style.css Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 HTTP/1.1
- 23. :method: GET :path: / Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :path: /style.css HTTP/2.0
- 24. :method: GET :path: / Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :path: /style.css :path: /main.js :path: /imagem.jpg Host: images.caelum.com.br HTTP/2.0
- 25. HEADER TABLES MENOS BYTES REQUEST e RESPONSE STATEFUL
- 26. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
- 27. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
- 28. HTTP 1.1 com Keep-Alive cliente servidor
- 29. HTTP 1.1 com Pipelining* cliente servidor
- 30. HTTP 1.1 com Pipelining* cliente servidor
- 31. HTTP 1.1 com Pipelining* Head of Line Blocking ... ... cliente servidor
- 32. HTTP 2.0 multiplexing cliente servidor
- 37. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
- 38. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
- 39. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES diminuir requests diminuir tráfego paralelizar requests
- 41. priorizar conteúdo <!DOCTYPE html> <html> <head> <style> /* estilo para o ATF */ </style> <script> /* javascript importante */ </script> /* javascript pra depois */ <script src="secundario.js" async></script> </head> <body> ... </body> </html>
- 42. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="estilo.css"> <script src="app.js" async></script> </head> <body> <img src="foto.jpg"> ... <script src="jquery.js"></script> <script src="plugin.js"></script> </body> </html> priorizar conteúdo
- 43. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="estilo.css"> <script src="app.js" async></script> </head> <body> <img src="foto.jpg"> ... <script src="jquery.js"></script> <script src="plugin.js"></script> </body> </html> priorizar conteúdo
- 44. index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 12 8 8 4 4 8 priorizar conteúdo
- 49. index.html style.css index.html icone.png index.html style.css index.html icone.png cliente servidor cliente servidor Server Push Cancelável
- 52. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
- 53. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES