Publicité
Como o HTTP/2 vai mudar sua vida
30 May 2015•0 j'aime•5,444 vues
29 j'aime
Soyez le premier à aimer ceci
afficher plus
vues
Nombre de vues
0
Sur Slideshare
0
À partir des intégrations
0
Nombre d'intégrations
0
Télécharger pour lire hors ligne
Signaler
Technologie
Palestra de Sérgio Lopes, na Web.br 2015 e MobileConf Rio 2015 sobre HTTP/2, SPDY e as novas otimizações Web.
CaelumSuivre
CaelumPublicité
Publicité
Publicité
Recommandé
Escalabilidade e performance da infraestrutura Plone/Zope com CacheFU e VarnishLucas Brasilino
Hyper Text Transfer Protocol (HTTP)elliando dias
Aumente a performance de seu site de maneira disciplinadaHenrique Lima
Metodologias de Programação IV - Aula 2, Secção 2 - Sequência pedido-resposta...Leonel Morgado
Alta Performance de Aplicações Web em PHP - NginxThiago Paes
De 1 a 1.000.00 de usuáriosFelipe Klerk Signorini
Como o HTTP/2 vai mudar sua vida
- HTTP/2
- @sergio_caelum sergiolopes.org
- review HTTP em 5 slides
- $ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.caelum.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, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache-‐Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- $ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.caelum.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, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache-‐Control: private <!DOCTYPE html><html><head><title>Caelum</title> TEXTO
- REQUEST RESPONSE $ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.caelum.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, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache-‐Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- REQUEST RESPONSE ...ESPERA... $ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.caelum.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, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache-‐Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- MÉTODO E URL STATUS RESPOSTA $ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.caelum.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, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache-‐Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- HEADERS HEADERS $ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.caelum.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, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache-‐Control: private <!DOCTYPE html><html><head><title>Caelum</title>
- http texto request > espera > response headers
- cliente servidor cliente servidor HTTP 1.1 CONEXÃO TCP REQUEST REQUEST CONEXÃO TCP
- cliente servidor Keep-Alive REQUEST REQUEST #2 REQUEST #3 CONEXÃO TCP
- 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
- otimizações web
- otimizações web diminuir requests
- otimizações web diminuir requests diminuir tráfego
- otimizações web diminuir requests diminuir tráfego paralelizar requests
- otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS diminuir requests diminuir tráfego paralelizar requests
- 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
- otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
- o fantástico mundo do HTTP/2 (e do SPDY)
- GET / HTTP/1.1 Host: www.caelum.com.br HTTP/1.1 200 OK Content-‐Type: text/html; charset=utf-‐8 Content-‐Language: pt-‐br Date: Thu, 03 Apr 2015 18:37:18 GMT Cache-‐Control: private <!DOCTYPE html><html><head><title>Caelum</title> <meta name=viewport content=width=device-‐width> <meta name=description content="A Caelum tem os cursos de Java, Android, Scrum, Rails, .NET, HTML e CSS mais reconhecidos no mercado"><style> http 1.1
- GET / HTTP/1.1 Host: www.caelum.com.br Accept-‐Encoding: gzip HTTP/1.1 200 OK Content-‐Type: text/html; charset=utf-‐8 Content-‐Language: pt-‐br Date: Thu, 03 Apr 2015 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 http 1.1 GZIP
- 0101010101010101010101 010101010101 0101010101010 101010101010 0101010101010 ??[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 http 2.0 BINÁRIO GZIP
- ?c?8)E8??%:?$ ?T?%.?JI?;1?R ,l?T?%.?JI?;1?R ?c?8)E8??%:?$ ??[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 http 2.0 BINÁRIO HPACK GZIP
- ????????? ??????? ???????? ???????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ????????????????????????????????????????????????????????? http 2.0 BINÁRIO HPACK GZIP TLS TLS
- HEADER BINÁRIO GZIP / HPACK TLS*
- cliente servidor HTTP 1.1 com Keep-Alive
- cliente servidor HTTP 1.1 com Pipelining*
- cliente servidor HTTP 1.1 com Pipelining*
- cliente servidor HTTP 1.1 com Pipelining* Head of Line Blocking ... ...
- cliente servidor HTTP 2.0 multiplexing
- multiplexing 1 CONEXÃO TCP ASSÍNCRONO
- otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
- otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
- otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
- otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
- :method: GET :path: / Host: www.caelum.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.caelum.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
- :method: GET :path: / Host: www.caelum.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.caelum.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
- :method: GET :path: / Host: www.caelum.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
- :method: GET :path: / Host: www.caelum.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
- header tables MENOS BYTES REQUEST e RESPONSE STATEFUL
- otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
- otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
- inline diminuir requests priorizar conteúdo
- 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>
- priorizar conteúdo <!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 <!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>
- index.html priorizar conteúdo
- index.html estilo.css priorizar conteúdo
- index.html estilo.css app.js priorizar conteúdo
- index.html estilo.css jquery.jsapp.js priorizar conteúdo
- index.html estilo.css jquery.jsapp.js foto.jpg priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 12 priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 12 8 priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 12 8 8 priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 12 8 8 4 priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 12 8 8 4 8 priorizar conteúdo
- index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 12 8 8 4 4 8 priorizar conteúdo
- index.html cliente servidor priorizar conteúdo
- index.html cliente servidor priorizar conteúdo
- index.html cliente servidor priorizar conteúdo
- index.html estilo.css cliente servidor priorizar conteúdo
- index.html estilo.css cliente servidor priorizar conteúdo
- index.html app.js estilo.css cliente servidor priorizar conteúdo
- index.html app.js estilo.css cliente servidor priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js estilo.css priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js estilo.css priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js estilo.css jquery.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js estilo.css jquery.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js app.js estilo.css jquery.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js app.js estilo.css jquery.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js app.js estilo.css jquery.js plugin.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js app.js estilo.css jquery.js plugin.js priorizar conteúdo
- index.html app.js estilo.css cliente servidor foto.jpg jquery.js plugin.js app.js estilo.css foto.jpg jquery.js plugin.js priorizar conteúdo
- index.html cliente servidor
- index.html cliente servidor
- index.html cliente servidor espera
- index.html cliente servidor index.html bloqueante espera
- index.html cliente servidor Server Push
- index.html cliente servidor Server Push
- index.html cliente servidor Server Push
- index.html cliente servidor app.js estilo.css foto.jpg jquery.js plugin.js Server Push
- index.html cliente servidor app.js estilo.css foto.jpg jquery.js plugin.js Server Push
- cliente servidor index.html style.css index.html icone.png cliente servidor index.html style.css index.html icone.png Server Push Cancelável
- server push PRIORIZAÇÃO CANCELÁVEL CACHEÁVEL
- otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
- otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
- http 2
- http 2 BINÁRIO
- http 2 COMPRESSÃO BINÁRIO
- http 2 COMPRESSÃO CRIPTOGRAFIA BINÁRIO
- http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING BINÁRIO
- http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING PRIORIZAÇÃO BINÁRIO
- http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO BINÁRIO
- http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +PERFORMANCE BINÁRIO
- http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +PERFORMANCE BINÁRIO
- http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +FÁCIL+PERFORMANCE BINÁRIO
- http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +FÁCIL+PERFORMANCE BINÁRIO +COMPATÍVEL
- http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +FÁCIL+PERFORMANCE BINÁRIO +COMPATÍVEL +LEVE
- http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +FÁCIL+PERFORMANCE BINÁRIO +COMPATÍVEL +SEGURO +LEVE
- otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃO JS,CSS,HTML COMPRESSÃO DE IMAGENS
- otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃO JS,CSS,HTML COMPRESSÃO DE IMAGENS SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE otimizar renderização
- otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃO JS,CSS,HTML COMPRESSÃO DE IMAGENS SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE otimizar renderização CDNs QUIC diminuir latência
- USE HTTP/2 HOJE (ou SPDY)
- @sergio_caelum obrigado!
- links adicionais: ● The Effect of Network and Infrastructural Variables on SPDY's Performance. ● Livro High Performance Browser Networking ● Especificação HTTP2 ● http://daniel.haxx.se/http2/
Publicité