Successfully reported this slideshow.
Le Web en HTTP/2Le Web en HTTP/2
Christophe Villeneuve
@hellosct1
Qui... est Christophe Villeneuve ?Qui... est Christophe Villeneuve ?
<<
afup – lemug.fr – mysql – mariadb – drupal – demos...
Aujourd'hui...Aujourd'hui...
● L'origine du commencement
● Le protocole web : Http/2
● Steaming HTTP
● WebRTC
● Les conséq...
Les datesLes dates
1999 HTTP/1.1
2015 HTTP/2.0
1996 HTTP/1.0
1991 HTTP/0.9
HTTP/1.0HTTP/1.0
La fin du HTTP/1.1 (1/2)La fin du HTTP/1.1 (1/2)
● 15 ans existance
● Le Poids des pages a augmenté
● Nouvelles façon de c...
La fin du HTTP/1.1 (2/2)La fin du HTTP/1.1 (2/2)
● Streaming media
– Différents protocoles
– RTMP : Flash
– Utilisation pa...
HTTP/2, qu'est ce ?HTTP/2, qu'est ce ?
● Développé par IETF (HTTP Working Group)
● Basé sur SPDY
– Protocole développé par...
HTTP/2 IllustréHTTP/2 Illustré
Intérêt HTTP/2
HTTP/2 : Multiplexage (1/3)HTTP/2 : Multiplexage (1/3)
● Multiplexage des requêtes au serveur
● Plusieurs informations/dem...
HTTP/2 : Multiplexage (2/3)HTTP/2 : Multiplexage (2/3)
HTTP/2 : Multiplexage (3/3)HTTP/2 : Multiplexage (3/3)
● HTTP/1.1
● HTTP/2
HTTP/2 : Stream dependencies (1/2)HTTP/2 : Stream dependencies (1/2)
● Permet aux serveurs de 'pousser' les réponses de ma...
HTTP/2 : Stream dependencies (2/2)HTTP/2 : Stream dependencies (2/2)
HTTP/2 : HeadersHTTP/2 : Headers
● Compression des requêtes et des réponses
● Binaire (avant c'était du textuelle)
● Compr...
HTTP/2 : Server push (1/2)HTTP/2 : Server push (1/2)
● Plusieurs connexions (parallélisme)
● Le plus pour les Systèmes d'i...
HTTP/2 : Server push (1/2)HTTP/2 : Server push (1/2)
Et… La réalité
On évite...On évite...
● Quelques fonctionnalités HTTP/1.1
– Domaine fragmentation
– L'image spriting
– Ressources en doub...
WebPerf ?WebPerf ?
● Optimisation de la couche TCP
– Plusieurs connexions en TCP
– Durée de connexion plus longue
et uniqu...
Sécurité ?Sécurité ?
● Chiffrement
● Sécurité de la navigation
● Intérêt pour le TLS
● Chiffrement des échanges
– Serveurs...
Let's GO...Let's GO...
● Compatibilité
– Akamai
– Les Navigateurs
● Chrome 40, Firefox 36, IE 11
– Curl
– Langage
Les impacts pour nous
DéveloppementDéveloppement
● Compatibilité avec API HTTP
● Très peu de changements
● Meilleurs résultats au niveau de la r...
PHPPHP
● CURL
Request
$this->proxy->request
Reponse
$this->proxy->response
Debug
$this->proxy->debug_str
Image HTMLImage HTML
<img
src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/
w3...
CSS avec plusieurs imagesCSS avec plusieurs images
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') ...
HTTP URIHTTP URI
GET / HTTP/1.1
Host: server.example.com
Connection: Upgrade, HTTP2-Settings
Upgrade: h2c
HTTP2-Settings: ...
ServeurServeur
Support
HTTP/2
Demo AkamaiDemo Akamai
● Affiche une image (environ 750 ko)
demo concept inspired by Golang's Gophertiles
Débug DevTools FirefoxDébug DevTools Firefox
https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/Key_Log_Format
MerciMerci
● Plus loin
– https://http2.github.io/
– http://daniel.haxx.se/http2/
–
● Sources
– Ed Burns
– Mark Nottingham
...
Le web en http 2
Prochain SlideShare
Chargement dans…5
×

Le web en http 2

1 631 vues

Publié le

Présentation à Alchimie 0xb (novembre 2015) par Christophe Villeneuve (Hello / Sector One)

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Le web en http 2

  1. 1. Le Web en HTTP/2Le Web en HTTP/2 Christophe Villeneuve @hellosct1
  2. 2. Qui... est Christophe Villeneuve ?Qui... est Christophe Villeneuve ? << afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis – ici et maintenant – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros - elephpant
  3. 3. Aujourd'hui...Aujourd'hui... ● L'origine du commencement ● Le protocole web : Http/2 ● Steaming HTTP ● WebRTC ● Les conséquences
  4. 4. Les datesLes dates 1999 HTTP/1.1 2015 HTTP/2.0 1996 HTTP/1.0 1991 HTTP/0.9
  5. 5. HTTP/1.0HTTP/1.0
  6. 6. La fin du HTTP/1.1 (1/2)La fin du HTTP/1.1 (1/2) ● 15 ans existance ● Le Poids des pages a augmenté ● Nouvelles façon de consommer le Web ● Emissions de multi-requêtes en parallèles ● Le Web et les API métiers Webservices ● Pb : Trop de connexions ● HTTP a trop d'options – Mal utilisé (taille de transferts – Latence – ... (c) Oracle and Orits affiliates Le poids des pages 2010 : 702 KB (70 requetes) 2014 : 2 MB (100 requetes)
  7. 7. La fin du HTTP/1.1 (2/2)La fin du HTTP/1.1 (2/2) ● Streaming media – Différents protocoles – RTMP : Flash – Utilisation partielle du HTTP – Utilisation du Javascript ● Prévoir différents formats dans une page web ● Nombreuses pertes de paquets <video controls> <source src="movie/video1.webm"> <source src="movie/video1.mp4"> <source src="movie/video1.flv"> </video>
  8. 8. HTTP/2, qu'est ce ?HTTP/2, qu'est ce ? ● Développé par IETF (HTTP Working Group) ● Basé sur SPDY – Protocole développé par Google (2009) – Résoudre les limites de HTTP/1.1 – Gain important sur Firefox, nginx ● Contributeurs : – Firefox, Chrome, – Twitter, CURL, – Akamai...
  9. 9. HTTP/2 IllustréHTTP/2 Illustré
  10. 10. Intérêt HTTP/2
  11. 11. HTTP/2 : Multiplexage (1/3)HTTP/2 : Multiplexage (1/3) ● Multiplexage des requêtes au serveur ● Plusieurs informations/demandes – dans la même connexion TCP ● Exécution de requêtes en simultanés par le navigateur – Ex : CSS, images, JS… ● Avant Ordre et blocage ● Connexion en parallèle ● Sharding sur plusieurs domaines pour faire des requetes en parallèle/enlever les cookies
  12. 12. HTTP/2 : Multiplexage (2/3)HTTP/2 : Multiplexage (2/3)
  13. 13. HTTP/2 : Multiplexage (3/3)HTTP/2 : Multiplexage (3/3) ● HTTP/1.1 ● HTTP/2
  14. 14. HTTP/2 : Stream dependencies (1/2)HTTP/2 : Stream dependencies (1/2) ● Permet aux serveurs de 'pousser' les réponses de manière proactive dans les caches des clients ● Possible d'indiquer au serveur les ressources les plus importantes
  15. 15. HTTP/2 : Stream dependencies (2/2)HTTP/2 : Stream dependencies (2/2)
  16. 16. HTTP/2 : HeadersHTTP/2 : Headers ● Compression des requêtes et des réponses ● Binaire (avant c'était du textuelle) ● Compresser les actifs Referer, Cookie's… ● Réduire la charge
  17. 17. HTTP/2 : Server push (1/2)HTTP/2 : Server push (1/2) ● Plusieurs connexions (parallélisme) ● Le plus pour les Systèmes d'informations ● Serveur peut envoyer des ressources vers l'internaute avant de les demandés – Images, CSS, Javascript ● Utilisation du cache ● Equilibrer les performances et l'utilité
  18. 18. HTTP/2 : Server push (1/2)HTTP/2 : Server push (1/2)
  19. 19. Et… La réalité
  20. 20. On évite...On évite... ● Quelques fonctionnalités HTTP/1.1 – Domaine fragmentation – L'image spriting – Ressources en doublure – Concaténation
  21. 21. WebPerf ?WebPerf ? ● Optimisation de la couche TCP – Plusieurs connexions en TCP – Durée de connexion plus longue et unique – Plus de perte de paquets
  22. 22. Sécurité ?Sécurité ? ● Chiffrement ● Sécurité de la navigation ● Intérêt pour le TLS ● Chiffrement des échanges – Serveurs ↔ navigateurs
  23. 23. Let's GO...Let's GO... ● Compatibilité – Akamai – Les Navigateurs ● Chrome 40, Firefox 36, IE 11 – Curl – Langage
  24. 24. Les impacts pour nous
  25. 25. DéveloppementDéveloppement ● Compatibilité avec API HTTP ● Très peu de changements ● Meilleurs résultats au niveau de la ressource Client ↔ serveur
  26. 26. PHPPHP ● CURL Request $this->proxy->request Reponse $this->proxy->response Debug $this->proxy->debug_str
  27. 27. Image HTMLImage HTML <img src="data:image/png;base64,iVBORw0KGgoAAA ANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/ w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Point rouge" /> http://en.wikipedia.org/wiki/Data_URI_scheme
  28. 28. CSS avec plusieurs imagesCSS avec plusieurs images #prev { left: 63px; width: 43px; background: url('img_navsprites.gif') -47px 0; } #next { left: 129px; width: 43px; background: url('img_navsprites.gif') -91px 0; }http://www.w3schools.com/css/css_image_sprites.asp
  29. 29. HTTP URIHTTP URI GET / HTTP/1.1 Host: server.example.com Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: <base64url encoding of HTTP/2 SETTINGS payload>
  30. 30. ServeurServeur Support HTTP/2
  31. 31. Demo AkamaiDemo Akamai ● Affiche une image (environ 750 ko) demo concept inspired by Golang's Gophertiles
  32. 32. Débug DevTools FirefoxDébug DevTools Firefox https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/Key_Log_Format
  33. 33. MerciMerci ● Plus loin – https://http2.github.io/ – http://daniel.haxx.se/http2/ – ● Sources – Ed Burns – Mark Nottingham Questions @hellosct1

×