Le web en http 2

1 390 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 390
Sur SlideShare
0
Issues des intégrations
0
Intégrations
850
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×