nAcademy  Le 31 mars 2015 Neuros ­ 
HTTP/2
Les impacts dans le Web
Christophe Villeneuve
nAcademy  Le 31 mars 2015 Neuros ­ 
Aujourd'hui...
● L'origine du commencement
● Le protocole web : Http/2
● Les conséquences
nAcademy  Le 31 mars 2015 Neuros ­ 
Les dates
1999  HTTP/1.1
2015  HTTP/2.0
1996  HTTP/1.0
1991  HTTP/0.9
nAcademy  Le 31 mars 2015 Neuros ­ 
HTTP/1.0
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
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...
nAcademy  Le 31 mars 2015 Neuros ­ 
HTTP/2 Illustré
nAcademy  Le 31 mars 2015 Neuros ­ 
Intérêt HTTP/2
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
nAcademy  Le 31 mars 2015 Neuros ­ 
HTTP/2 : Multiplexage (2/3)
nAcademy  Le 31 mars 2015 Neuros ­ 
HTTP/2 : Multiplexage (3/3)
● HTTP/1.1
● HTTP/2
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
nAcademy  Le 31 mars 2015 Neuros ­ 
HTTP/2 : Stream dependencies (2/2)
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
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é
nAcademy  Le 31 mars 2015 Neuros ­ 
HTTP/2 : Server push (1/2)
nAcademy  Le 31 mars 2015 Neuros ­ 
Et… La réalité
nAcademy  Le 31 mars 2015 Neuros ­ 
On évite...
● Quelques fonctionnalités HTTP/1.1
– Domaine fragmentation
– L'image spriting
– Ressources en doublure 
– Concaténation
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
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↔
nAcademy  Le 31 mars 2015 Neuros ­ 
Let's GO...
● Compatibilité
– Akamai
– Les Navigateurs
● Chrome 40, Firefox 36, IE 11
– Curl
– Langage
nAcademy  Le 31 mars 2015 Neuros ­ 
Les impacts pour nous
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↔
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!
nAcademy  Le 31 mars 2015 Neuros ­ 
PHP
● CURL
Request
$this­>proxy­>request
Reponse
$this­>proxy­>response
Debug
$this­>proxy­>debug_str
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
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
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>
nAcademy  Le 31 mars 2015 Neuros ­ 
Serveur
Support HTTP/2
nAcademy  Le 31 mars 2015 Neuros ­ 
nAcademy  Le 31 mars 2015 Neuros ­ 
Demo Akamai
● Affiche une image (environ 750 ko)
demo concept inspired by Golang's Gophertiles
nAcademy  Le 31 mars 2015 Neuros ­ 
Débug DevTools Firefox
https://developer.mozilla.org/en­US/docs/Mozilla/Projects/NSS/Key_Log_Format
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
nAcademy  Le 31 mars 2015 Neuros ­ 
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

Http2 les impacts dans le web