SlideShare une entreprise Scribd logo
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 – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis – ici et maintenant – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros - elephpant
Aujourd'hui...Aujourd'hui...
● L'origine du commencement
● Le protocole web : Http/2
● Steaming HTTP
● WebRTC
● Les conséquences
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 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)
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>
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...
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/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
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 manière
proactive dans les caches des clients
● Possible d'indiquer au serveur les ressources les plus
importantes
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)
● Compresser les actifs
Referer, Cookie's…
● Réduire la charge
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é
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 doublure
– Concaténation
WebPerf ?WebPerf ?
● Optimisation de la couche TCP
– Plusieurs connexions en TCP
– Durée de connexion plus longue
et unique
– Plus de perte de paquets
Sécurité ?Sécurité ?
● Chiffrement
● Sécurité de la navigation
● Intérêt pour le TLS
● Chiffrement des échanges
– Serveurs ↔ navigateurs
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 ressource
Client ↔ serveur
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/
w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Point
rouge" />
http://en.wikipedia.org/wiki/Data_URI_scheme
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
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>
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
Questions
@hellosct1

Contenu connexe

En vedette

Http2 les impacts dans le web
Http2 les impacts dans le webHttp2 les impacts dans le web
Http2 les impacts dans le web
neuros
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
Damien Jubeau
 
The Case for HTTP/2
The Case for HTTP/2The Case for HTTP/2
The Case for HTTP/2
Andy Davies
 
Http2 right now
Http2 right nowHttp2 right now
Http2 right now
Daniel Stenberg
 
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
Cory Forsyth
 
What HTTP/2.0 Will Do For You
What HTTP/2.0 Will Do For YouWhat HTTP/2.0 Will Do For You
What HTTP/2.0 Will Do For You
Mark Nottingham
 
HTTP/2 Changes Everything
HTTP/2 Changes EverythingHTTP/2 Changes Everything
HTTP/2 Changes Everything
Lori MacVittie
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
Refficience
 
HTTP2 is Here!
HTTP2 is Here!HTTP2 is Here!
HTTP2 is Here!
Andy Davies
 
Las sentencias de los Juzgados de lo Social también aportan muchas y buenas r...
Las sentencias de los Juzgados de lo Social también aportan muchas y buenas r...Las sentencias de los Juzgados de lo Social también aportan muchas y buenas r...
Las sentencias de los Juzgados de lo Social también aportan muchas y buenas r...
Universidad Autónoma de Barcelona
 
Evaluación de recursos financieros para la implementación del Plan Nacional d...
Evaluación de recursos financieros para la implementación del Plan Nacional d...Evaluación de recursos financieros para la implementación del Plan Nacional d...
Evaluación de recursos financieros para la implementación del Plan Nacional d...
Gobernabilidad
 
JABES 2015 - Implémentation du RDA dans les pays germanophones : un changemen...
JABES 2015 - Implémentation du RDA dans les pays germanophones : un changemen...JABES 2015 - Implémentation du RDA dans les pays germanophones : un changemen...
JABES 2015 - Implémentation du RDA dans les pays germanophones : un changemen...
ABES
 
J:\Ejemplos De AlmacéN
J:\Ejemplos De AlmacéNJ:\Ejemplos De AlmacéN
J:\Ejemplos De AlmacéN
guest921e95
 
Deux jours pour l’appropriation du guide pour l’auto-évaluation annuelle d’un...
Deux jours pour l’appropriation du guide pour l’auto-évaluation annuelle d’un...Deux jours pour l’appropriation du guide pour l’auto-évaluation annuelle d’un...
Deux jours pour l’appropriation du guide pour l’auto-évaluation annuelle d’un...
Haute Autorité de Santé
 
Etude "badges amiante" chez les plombiers
Etude "badges amiante" chez les plombiersEtude "badges amiante" chez les plombiers
Etude "badges amiante" chez les plombiers
INRSfrance
 
Code vestimentaire pour personnel de soutien
Code vestimentaire pour personnel de soutienCode vestimentaire pour personnel de soutien
Code vestimentaire pour personnel de soutien
Ginette Salvas
 
Je voulais juste vous dire
Je voulais juste vous direJe voulais juste vous dire
Je voulais juste vous dire
ABES
 
Elementos de un sistema
Elementos de un sistemaElementos de un sistema
Elementos de un sistema
Mariela Tapia
 
EUROBACK : exchange of duplicates between libraries : bilan après près de 14 ...
EUROBACK : exchange of duplicates between libraries : bilan après près de 14 ...EUROBACK : exchange of duplicates between libraries : bilan après près de 14 ...
EUROBACK : exchange of duplicates between libraries : bilan après près de 14 ...
François Renaville
 
Baobaz SES - La semaine sociale 140113
Baobaz SES - La semaine sociale 140113Baobaz SES - La semaine sociale 140113
Baobaz SES - La semaine sociale 140113
armstrong
 

En vedette (20)

Http2 les impacts dans le web
Http2 les impacts dans le webHttp2 les impacts dans le web
Http2 les impacts dans le web
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
The Case for HTTP/2
The Case for HTTP/2The Case for HTTP/2
The Case for HTTP/2
 
Http2 right now
Http2 right nowHttp2 right now
Http2 right now
 
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
 
What HTTP/2.0 Will Do For You
What HTTP/2.0 Will Do For YouWhat HTTP/2.0 Will Do For You
What HTTP/2.0 Will Do For You
 
HTTP/2 Changes Everything
HTTP/2 Changes EverythingHTTP/2 Changes Everything
HTTP/2 Changes Everything
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
 
HTTP2 is Here!
HTTP2 is Here!HTTP2 is Here!
HTTP2 is Here!
 
Las sentencias de los Juzgados de lo Social también aportan muchas y buenas r...
Las sentencias de los Juzgados de lo Social también aportan muchas y buenas r...Las sentencias de los Juzgados de lo Social también aportan muchas y buenas r...
Las sentencias de los Juzgados de lo Social también aportan muchas y buenas r...
 
Evaluación de recursos financieros para la implementación del Plan Nacional d...
Evaluación de recursos financieros para la implementación del Plan Nacional d...Evaluación de recursos financieros para la implementación del Plan Nacional d...
Evaluación de recursos financieros para la implementación del Plan Nacional d...
 
JABES 2015 - Implémentation du RDA dans les pays germanophones : un changemen...
JABES 2015 - Implémentation du RDA dans les pays germanophones : un changemen...JABES 2015 - Implémentation du RDA dans les pays germanophones : un changemen...
JABES 2015 - Implémentation du RDA dans les pays germanophones : un changemen...
 
J:\Ejemplos De AlmacéN
J:\Ejemplos De AlmacéNJ:\Ejemplos De AlmacéN
J:\Ejemplos De AlmacéN
 
Deux jours pour l’appropriation du guide pour l’auto-évaluation annuelle d’un...
Deux jours pour l’appropriation du guide pour l’auto-évaluation annuelle d’un...Deux jours pour l’appropriation du guide pour l’auto-évaluation annuelle d’un...
Deux jours pour l’appropriation du guide pour l’auto-évaluation annuelle d’un...
 
Etude "badges amiante" chez les plombiers
Etude "badges amiante" chez les plombiersEtude "badges amiante" chez les plombiers
Etude "badges amiante" chez les plombiers
 
Code vestimentaire pour personnel de soutien
Code vestimentaire pour personnel de soutienCode vestimentaire pour personnel de soutien
Code vestimentaire pour personnel de soutien
 
Je voulais juste vous dire
Je voulais juste vous direJe voulais juste vous dire
Je voulais juste vous dire
 
Elementos de un sistema
Elementos de un sistemaElementos de un sistema
Elementos de un sistema
 
EUROBACK : exchange of duplicates between libraries : bilan après près de 14 ...
EUROBACK : exchange of duplicates between libraries : bilan après près de 14 ...EUROBACK : exchange of duplicates between libraries : bilan après près de 14 ...
EUROBACK : exchange of duplicates between libraries : bilan après près de 14 ...
 
Baobaz SES - La semaine sociale 140113
Baobaz SES - La semaine sociale 140113Baobaz SES - La semaine sociale 140113
Baobaz SES - La semaine sociale 140113
 

Similaire à Le web en http 2

HTTP/2, quels impacts pour mon site WordPress ?
HTTP/2, quels impacts pour mon site WordPress ?HTTP/2, quels impacts pour mon site WordPress ?
HTTP/2, quels impacts pour mon site WordPress ?
Laurent Vergnaud
 
Drupal 8, symfony
Drupal 8, symfonyDrupal 8, symfony
Drupal 8, symfonyjeUXdiCode
 
technologie web - part3
technologie web - part3technologie web - part3
technologie web - part3Benoît Simard
 
Embedded webserver implementation and usage - DroidCon Paris 2014
Embedded webserver implementation and usage - DroidCon Paris 2014Embedded webserver implementation and usage - DroidCon Paris 2014
Embedded webserver implementation and usage - DroidCon Paris 2014
Paris Android User Group
 
technologie web
technologie webtechnologie web
technologie web
Benoît Simard
 
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASHTutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
Cyril Concolato
 
[FR] Les requêtes HTTP de l'extrême
[FR] Les requêtes HTTP de l'extrême[FR] Les requêtes HTTP de l'extrême
[FR] Les requêtes HTTP de l'extrême
OVHcloud
 
ServeurWeb-ProtocoleHttpdefinitionet.pdf
ServeurWeb-ProtocoleHttpdefinitionet.pdfServeurWeb-ProtocoleHttpdefinitionet.pdf
ServeurWeb-ProtocoleHttpdefinitionet.pdf
nebibieg
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
Aymeric Bouillat
 
Communications Réseaux et HTTP avec PHP
Communications Réseaux et HTTP avec PHPCommunications Réseaux et HTTP avec PHP
Communications Réseaux et HTTP avec PHPjulien pauli
 
Cours 8 squid.pdf
Cours 8 squid.pdfCours 8 squid.pdf
Cours 8 squid.pdf
FayalBougherbal
 
08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web
Noël
 
Introduction à HDFS
Introduction à HDFSIntroduction à HDFS
Introduction à HDFS
Modern Data Stack France
 
Http2 les impacts dans le web
Http2 les impacts dans le webHttp2 les impacts dans le web
Http2 les impacts dans le web
Christophe Villeneuve
 
Serveur http embarqué dans une application Android. Usages et implémentations
Serveur http embarqué dans une application Android.  Usages et implémentationsServeur http embarqué dans une application Android.  Usages et implémentations
Serveur http embarqué dans une application Android. Usages et implémentations
Guilhem Duché
 
Meetup Google Cloud
Meetup Google CloudMeetup Google Cloud
Meetup Google Cloud
Pierre Coste
 
Technologie Web.pptx
Technologie Web.pptxTechnologie Web.pptx
Technologie Web.pptx
hashiramasenju65
 
Soirée webperf du 29 nov 2010 - Latence et CDN
Soirée webperf du 29 nov 2010 - Latence et CDNSoirée webperf du 29 nov 2010 - Latence et CDN
Soirée webperf du 29 nov 2010 - Latence et CDNEric D.
 
Intro grpc.net
Intro  grpc.netIntro  grpc.net
Intro grpc.net
MSDEVMTL
 
Presentation websockets
Presentation websocketsPresentation websockets
Presentation websockets
Bert Poller
 

Similaire à Le web en http 2 (20)

HTTP/2, quels impacts pour mon site WordPress ?
HTTP/2, quels impacts pour mon site WordPress ?HTTP/2, quels impacts pour mon site WordPress ?
HTTP/2, quels impacts pour mon site WordPress ?
 
Drupal 8, symfony
Drupal 8, symfonyDrupal 8, symfony
Drupal 8, symfony
 
technologie web - part3
technologie web - part3technologie web - part3
technologie web - part3
 
Embedded webserver implementation and usage - DroidCon Paris 2014
Embedded webserver implementation and usage - DroidCon Paris 2014Embedded webserver implementation and usage - DroidCon Paris 2014
Embedded webserver implementation and usage - DroidCon Paris 2014
 
technologie web
technologie webtechnologie web
technologie web
 
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASHTutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
 
[FR] Les requêtes HTTP de l'extrême
[FR] Les requêtes HTTP de l'extrême[FR] Les requêtes HTTP de l'extrême
[FR] Les requêtes HTTP de l'extrême
 
ServeurWeb-ProtocoleHttpdefinitionet.pdf
ServeurWeb-ProtocoleHttpdefinitionet.pdfServeurWeb-ProtocoleHttpdefinitionet.pdf
ServeurWeb-ProtocoleHttpdefinitionet.pdf
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
Communications Réseaux et HTTP avec PHP
Communications Réseaux et HTTP avec PHPCommunications Réseaux et HTTP avec PHP
Communications Réseaux et HTTP avec PHP
 
Cours 8 squid.pdf
Cours 8 squid.pdfCours 8 squid.pdf
Cours 8 squid.pdf
 
08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web
 
Introduction à HDFS
Introduction à HDFSIntroduction à HDFS
Introduction à HDFS
 
Http2 les impacts dans le web
Http2 les impacts dans le webHttp2 les impacts dans le web
Http2 les impacts dans le web
 
Serveur http embarqué dans une application Android. Usages et implémentations
Serveur http embarqué dans une application Android.  Usages et implémentationsServeur http embarqué dans une application Android.  Usages et implémentations
Serveur http embarqué dans une application Android. Usages et implémentations
 
Meetup Google Cloud
Meetup Google CloudMeetup Google Cloud
Meetup Google Cloud
 
Technologie Web.pptx
Technologie Web.pptxTechnologie Web.pptx
Technologie Web.pptx
 
Soirée webperf du 29 nov 2010 - Latence et CDN
Soirée webperf du 29 nov 2010 - Latence et CDNSoirée webperf du 29 nov 2010 - Latence et CDN
Soirée webperf du 29 nov 2010 - Latence et CDN
 
Intro grpc.net
Intro  grpc.netIntro  grpc.net
Intro grpc.net
 
Presentation websockets
Presentation websocketsPresentation websockets
Presentation websockets
 

Plus de Christophe Villeneuve

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
Christophe Villeneuve
 
La boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxLa boîte à outils de développements dans Firefox
La boîte à outils de développements dans Firefox
Christophe Villeneuve
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
Christophe Villeneuve
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
Christophe Villeneuve
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
Christophe Villeneuve
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
Christophe Villeneuve
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
Christophe Villeneuve
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
Christophe Villeneuve
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
Christophe Villeneuve
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
Christophe Villeneuve
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
Christophe Villeneuve
 
Foxfooding
FoxfoodingFoxfooding
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
Christophe Villeneuve
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
Christophe Villeneuve
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
Christophe Villeneuve
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
Christophe Villeneuve
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
Christophe Villeneuve
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
Christophe Villeneuve
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
Christophe Villeneuve
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
Christophe Villeneuve
 

Plus de Christophe Villeneuve (20)

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
 
La boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxLa boîte à outils de développements dans Firefox
La boîte à outils de développements dans Firefox
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
 
Foxfooding
FoxfoodingFoxfooding
Foxfooding
 
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
 

Le web en http 2

  • 1. Le Web en HTTP/2Le Web en HTTP/2 Christophe Villeneuve @hellosct1
  • 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. Aujourd'hui...Aujourd'hui... ● L'origine du commencement ● Le protocole web : Http/2 ● Steaming HTTP ● WebRTC ● Les conséquences
  • 4. Les datesLes dates 1999 HTTP/1.1 2015 HTTP/2.0 1996 HTTP/1.0 1991 HTTP/0.9
  • 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. 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. 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...
  • 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. HTTP/2 : Multiplexage (2/3)HTTP/2 : Multiplexage (2/3)
  • 13. HTTP/2 : Multiplexage (3/3)HTTP/2 : Multiplexage (3/3) ● HTTP/1.1 ● HTTP/2
  • 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. HTTP/2 : Stream dependencies (2/2)HTTP/2 : Stream dependencies (2/2)
  • 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. 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. HTTP/2 : Server push (1/2)HTTP/2 : Server push (1/2)
  • 20. On évite...On évite... ● Quelques fonctionnalités HTTP/1.1 – Domaine fragmentation – L'image spriting – Ressources en doublure – Concaténation
  • 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. Sécurité ?Sécurité ? ● Chiffrement ● Sécurité de la navigation ● Intérêt pour le TLS ● Chiffrement des échanges – Serveurs ↔ navigateurs
  • 23. Let's GO...Let's GO... ● Compatibilité – Akamai – Les Navigateurs ● Chrome 40, Firefox 36, IE 11 – Curl – Langage
  • 25. DéveloppementDéveloppement ● Compatibilité avec API HTTP ● Très peu de changements ● Meilleurs résultats au niveau de la ressource Client ↔ serveur
  • 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. 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>
  • 31.
  • 32. Demo AkamaiDemo Akamai ● Affiche une image (environ 750 ko) demo concept inspired by Golang's Gophertiles
  • 33. Débug DevTools FirefoxDébug DevTools Firefox https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/Key_Log_Format
  • 34. MerciMerci ● Plus loin – https://http2.github.io/ – http://daniel.haxx.se/http2/ – ● Sources – Ed Burns – Mark Nottingham Questions @hellosct1