networxx

View Github Repository Open presentation in a new window

rluta

See all presentation from rluta

networxx

0 0

networxx

On Github rluta / networxx

Home Page Tapiocorp

{ "data":{"url":"data/perf-web.json"}, "mark":"line", "encoding": { "x": {"field":"percentile","type":"quantitative","axis":{"title":"Percentiles"}}, "y": {"field":"timing","type":"quantitative","axis":{"title":"Temps mesuré (ms)"}}, "color":{"field":"type","type":"nominal","legend":false,"scale":{"range":["#b10142","orange"]}} }, "config": { "mark": { "strokeWidth":5 } } }
  • Page Load
  • TTFB (Time to first byte)

Performance API

window.addEventListener('load',function () {
    var t = window.performance.timing, metrics = [];
    metrics.push({name:'ttfb',value:t.responseStart - t.fetchStart});
    metrics.push({name:'dom',value:t.loadEventStart - t.domLoading});
    metrics.push({name:'load',value:t.loadEventStart - t.fetchStart});
    var img = document.createElement('img');
    img.src = 'http://mycollector/?'
        +metrics.map(function (m) { return m.name+'='+m.value}).join('&');
    document.body.appendChild(img);
});

Comment fonctionne un navigateur ?

NetworkCSSOMDOMJavascriptLayoutPaint

Expérience Google/Blink

{ "description": "Time spent rendering page in Blink", "data": {"url":"data/blink-perf.csv","type":"csv"}, "mark": "bar", "encoding": { "y": { "field": "category", "type": "nominal", "scale": { "bandSize" : 100}, "sort": { "field": "elapsed", "op":"sum","order":"descending"} , "axis": { "title": "Catégorie" } }, "x": { "field": "elapsed", "type": "quantitative", "aggregate":"sum", "axis": { "title": "Poucentage du temps de traitement", "grid": "true" } } } }

Temps de chargement d'une page

Latence constante 60 ms, bande passante variable

{ "data":{"url":"data/plt-vary-bw.json"}, "mark":"bar", "encoding":{ "x": { "field": "bw_mbps", "type": "ordinal", "scale": { "bandSize": 100 },"axis":{"title":""}}, "y": { "field": "plt_ms", "type": "quantitative","axis":{"title":"Temps (ms)"} }, "color": {"field":"ref","type":"nominal","scale":{"range":["#b10142","orange"]},"legend":false} }, "config": { "cell": { "height": 275 } } }

Bande passante constante 5 Mbps, latence variable

{ "data":{"url":"data/plt-vary-lat.json"}, "mark":"bar", "encoding":{ "x": { "field":"lat_ms", "type": "ordinal", "scale": { "bandSize": 100 }, "sort":"descending", "axis":{"title":""} }, "y": { "field":"plt_ms", "type": "quantitative","axis":{"title":"Temps (ms)"} }, "color": {"field":"ref","type":"nominal","scale":{"range":["#b10142","orange"]},"legend":false} }, "config": { "cell": { "height": 275 } } }

HTTP 1.1

  • Mode requête-réponse
  • Synchrone
  • Parallélisme limité(6 cnx TCP par domaine)
client-http-flowOpenConnectionClientServerCloseConnection

Statistiques actuelles

  • 99 requêtes / page
  • 39 connexions TCP
  • 2 301 KB / page

Une autre vue des réseaux

Full Duplex
Bande passante
MTU
Latence
Jitter

Evolution bande passante vs latence

Echelle :
log
linear

Sur les 20 dernières années, la bande passante a évolué 1000 fois plus vite que la latence

Fondamentaux: Vitesse de la lumière

c = 300,000 km/s

(dans le vide)

De l'ordre de 190 000 km/s dans une fibre optique

soit environ 5 ms par 1,000 km

Paris - Dublin 800 km 4 ms Paris - New York 6,000 km 30 ms Paris - San Francisco 9,000 km 45 ms

Réseaux d'accès en France

Bw moy. (Mbps) RTT moy. (ms) Duplex BDP (KB) Ethernet 1,000 0.5 Full 62.5 ADSL 2 5 0.5 40 Full 25 2.5 Cable 100 5 20 Full 250 50 Fibre 200 10 Full 500 EDGE 1 400 Full 50 3G 4 150 Full 75 4G 8 120 Full 120 WiFi 3-300* 2 Half 0.75 - 75 Satellite 1-1,000 500 Any* 62.5 - 62,500

Combien de temps prend le transfert TCP d'un fichier de 300kB entre 2 ordinateurs Windows 7 sur un réseau de 24 Mbps et 10 ms de latence ?

Temps de transfert : 200 KB

  • Adsl
D.Ack
Raz
+
  • Adsl
  • Adsl Win
  • Cable
  • Ethernet
  • 3G
Bande passante (Mbps):
0
RTT (ms):
0
Rwnd (kB):
0
Cwmd (p.):
0
MTU (B):
0

Recettes webperf

  • Utiliser un CDN
  • Activer la compression des données
  • Minifier les scripts
  • Inliner les petits contenus
  • Concaténer les scripts
  • Créer des sprites
  • Minimiser le poids des images
  • Rendre les ressources non critiques asynchrones
  • Faire du sharding

Recettes webperf - version réseau

  • Améliorer la latence du réseau
  • Minimiser le nombre de requêtes
  • Minimiser le nombre d'octets transmis
  • Augmenter le nombre de connexions TCP
  • Prioriser les contenus critiques

HTTP/2

Web withnetwork sympathy

HTTP/2: Principes de fonctionnement

  • Connexion TCP unique
  • Protocole binaire
  • Encapsulation HTTP/1.1
  • Flux multiplexés et priorisés
  • Compression des en-têtes
  • Push serveur
HTTP/1.1
HTTP/2 flux binaire
TLS (Optionnel)
TCP
IP

Variantes HTTP/2

h2
  • https://
  • TLS 1.2
  • Négocation ALPN
h2c
  • http://
  • TCP en clair
  • HTTP/1.1 Upgrade

Protocole binaire

POST /request HTTP/1.1
Host: localhost:9000
Accept: text/html, image/jpeg, */*
User-Agent: Infiltrator
Content-Type: application/json

{"name":"Bauer","role":"Captain"}
HEADER
:authority       localhost:9000:method          POST:path            /request:scheme          httpsUser-Agent       InfiltratorContent-Type     application/json
DATA 
{"name":"Bauer","role":"Captain"}

Flux HTTP/2

Utiliser barre d'espace pour cycler les scénarios

Demo (non dispo sur Github)

HTTP/1.1
HTTPS
H2
H2+PUSH

Recettes http/1.1

  • Utiliser un CDN
  • Activer la compression des données
  • Minifier les scripts
  • Inliner les petits contenus
  • Concaténer les scripts
  • Créer des sprites
  • Minimiser le poids des images
  • Rendre les ressources non critiques asynchrones
  • Faire du sharding

Recettes http/2

  • Utiliser un CDN
  • Activer la compression des données
  • Minifier les scripts
  • Inliner les petits contenus
  • Concaténer les scripts
  • Créer des sprites
  • Minimiser le poids des images
  • Rendre les ressources non critiques asynchrones
  • Faire du sharding

Home Page Tapiocorp

{ "data":{"url":"data/perf-web-fixed.json"}, "mark":"line", "encoding": { "x": {"field":"percentile","type":"quantitative","axis":{"title":"Percentiles"}}, "y": {"field":"timing","type":"quantitative","axis":{"title":"Temps mesuré (ms)"}}, "color":{"field":"type","type":"nominal","legend":false,"scale":{"range":["#b10142","orange"]}} }, "config": { "mark": { "strokeWidth":5 } } }
  • Page Load HTTP/1.1
  • Page Load HTTP/2

A retenir

  • La latence est le facteur limitant de la performance Web
  • HTTP/2 améliore la performance sur des réseaux lents
  • Adapter son site pour en maximiser le bénéfice

Et maintenant ?

Retour à networxx

Outils pour sauver le monde

Diagnostic de communication

Diagnostic de connexion

  • ping
  • traceroute

Benchmark de performance

  • iperf

Etat d'un système

  • netstat
  • ss
  • sar -n TCP,ETCP 1

Quelle est la bande passante effective de votre portable sur son interface locale ?

Localhost

raphael$ ifconfig lo0
lo0: flags=8049<UP,LOOPBACK,RUNNING,MULTICAST> mtu 16384
raphael$ ping localhost
PING localhost (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.050 ms
raphael$ iperf -s -p 8888
...
[ ID] Interval       Transfer     Bandwidth
[  4]  0.0-10.0 sec  43.6 GBytes  37.4 Gbits/sec

Pas de benchmark sur localhost !

Simuler la latence et la bande passante

  • Chrome dev tools
  • Charles proxy
  • Network Link Conditioner
  • tc (linux)
  • pfctl & dnctl (mac)
  • netsh (win)

TC pour gérer la latence

Ajouter un delai constant

  • sudo tc qdisc add dev eth0 root netem delay 20ms

Ajouter de la jigue

  • sudo tc qdisc change dev eth0 root netem delay 20ms 5ms 15%

Nettoyer la configuration

  • sudo tc qdisc del dev eth0 root

Un petit tuning pour la route ?

Gérer beaucoup de connexions

Vérifier les limites de file descriptor

  • Nombre max de FD pour système /proc/sys/fs/file-max
  • Nombre max de FD par user ulimit

Augmenter les limites de connexion

  • Nax nouvelles connexions par port net.core.somaxconn
  • Max global nouvelles connexions net.ipv4.tcp_max_syn_backlog
  • Max paquets en attente sur intf. net.core_netdev_backlog
  • Max ports TCP disponibles net.ipv4.ip_local_port_range

Recycler plus vite les ports

  • Durée de TIME_WAIT_2 net.ipv4.tcp_fin_timeout
  • Réutiliser socket en TIME_WAIT net.ipv4.tcp.tcp_tw_reuse

Améliorer sa performance TCP (front)

Minimiser slow-start

  • Désactiver after idle net.ipv4.tcp_slow_start_after_idle

Ajustement de fenêtres et buffers

  • Vérifier net.ipv4.tcp_window_scaling
  • Buffers TCP cnx (read) net.ipv4.tcp_rmem
  • Buffers TCP cnx (write) net.ipv4.tcp_wmem
  • Mémoire max pour TCP net.ipv4.tcp_mem

Améliorer sa performance TCP (back)

Fail fast

  • Retries SYN net.ipv4.tcp_syn_retries
  • Retries SYN-ACK net.ipv4.tcp_synack_retries

Ajuster keep-alive TCP

  • Temps attente min net.ipv4.tcp_keepalive_time
  • Intervalle entre probe net.ipv4.tcp_keepalive_intvl
  • Nombre de probes avant échec net.ipv4.tcp_keepalive_probes

#DevoxxFR