Présentation à la nAcademy (Mars 2015) : Http/2 les impacts dans le web par Christophe Villeneuve

1. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2
Les impacts dans le Web
Christophe Villeneuve

2. nAcademy Le 31 mars 2015 Neuros ­
Aujourd'hui...
● L'origine du commencement
● Le protocole web : Http/2
● Les conséquences

3. nAcademy Le 31 mars 2015 Neuros ­
Les dates
1999 HTTP/1.1
2015 HTTP/2.0
1996 HTTP/1.0
1991 HTTP/0.9

4. nAcademy Le 31 mars 2015 Neuros ­
HTTP/1.0

5. nAcademy Le 31 mars 2015 Neuros ­
La fin du HTTP/1.1
● 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
(c) Oracle and Orits affiliates

6. nAcademy Le 31 mars 2015 Neuros ­
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...

7. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 Illustré

8. nAcademy Le 31 mars 2015 Neuros ­
Intérêt HTTP/2

9. nAcademy Le 31 mars 2015 Neuros ­
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

10. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Multiplexage (2/3)

11. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Multiplexage (3/3)
● HTTP/1.1
● HTTP/2

12. nAcademy Le 31 mars 2015 Neuros ­
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

13. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Stream dependencies (2/2)

14. nAcademy Le 31 mars 2015 Neuros ­
HTTP/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

15. nAcademy Le 31 mars 2015 Neuros ­
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é

16. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Server push (1/2)

17. nAcademy Le 31 mars 2015 Neuros ­
Et… La réalité

18. nAcademy Le 31 mars 2015 Neuros ­
On évite...
● Quelques fonctionnalités HTTP/1.1
– Domaine fragmentation
– L'image spriting
– Ressources en doublure
– Concaténation

19. nAcademy Le 31 mars 2015 Neuros ­
WebPerf ?
● Optimisation de la couche TCP
– Plusieurs connexions en TCP
– Durée de connexion plus longue
et unique
– Plus de perte de paquets

20. nAcademy Le 31 mars 2015 Neuros ­
Sécurité ?
● Chiffrement
● Sécurité de la navigation
● Intérêt pour le TLS
● Chiffrement des échanges
– Serveurs navigateurs↔

21. nAcademy Le 31 mars 2015 Neuros ­
Let's GO...
● Compatibilité
– Akamai
– Les Navigateurs
● Chrome 40, Firefox 36, IE 11
– Curl
– Langage

22. nAcademy Le 31 mars 2015 Neuros ­
Les impacts pour nous

23. nAcademy Le 31 mars 2015 Neuros ­
Développement
● Compatibilité avec API HTTP
● Très peu de changements
● Meilleurs résultats au niveau de la ressource
Client serveur↔

24. nAcademy Le 31 mars 2015 Neuros ­
Java
● JEP 110 http://openjdk.java.net/jeps/110
● Easy to use API
● Covers only the most common use cases
● Supports both HTTP/1.1 and 2
● Builds on Java API classes going back to
Java 1.2!

25. nAcademy Le 31 mars 2015 Neuros ­
PHP
● CURL
Request
$this­>proxy­>request
Reponse
$this­>proxy­>response
Debug
$this­>proxy­>debug_str

26. nAcademy Le 31 mars 2015 Neuros ­
Image HTML
<img
src="data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/
w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Point
rouge" />
http://en.wikipedia.org/wiki/Data_URI_scheme

27. nAcademy Le 31 mars 2015 Neuros ­
CSS 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_sprite
s.asp

28. nAcademy Le 31 mars 2015 Neuros ­
HTTP URI
GET / HTTP/1.1
Host: server.example.com
Connection: Upgrade, HTTP2­Settings
Upgrade: h2c
HTTP2­Settings: <base64url encoding of HTTP/2
SETTINGS payload>

29. nAcademy Le 31 mars 2015 Neuros ­
Serveur
Support HTTP/2

30. nAcademy Le 31 mars 2015 Neuros ­

31. nAcademy Le 31 mars 2015 Neuros ­
Demo Akamai
● Affiche une image (environ 750 ko)
demo concept inspired by Golang's Gophertiles

32. nAcademy Le 31 mars 2015 Neuros ­
Débug DevTools Firefox
https://developer.mozilla.org/en­US/docs/Mozilla/Projects/NSS/Key_Log_Format

33. nAcademy Le 31 mars 2015 Neuros ­
Merci
● Plus loin
– https://http2.github.io/
– http://daniel.haxx.se/http2/
–
● Sources
– Ed Burns
– Mark Nottingham
Questions
@hellosct1
@neuro_paris