Daniela Matos de Carvalho
Software Engineer @Dashlane, mother, photographer amateur, former @requirelx organiser, prev @YLDio, @zpx_interactive
Daniela Matos de Carvalho
SEIUM 2017 @Braga
sericaia
Different access
(https://www.webworldwide.io/ for details)
Different access
Different bandwidth
Different latency
(image source: High Performance Browser Networking - Ilya Gregorik)
(image source: High Performance Browser Networking - Ilya Gregorik)
DOM, CSSOM and JS
render tree
"styles at the top,
scripts at the bottom"
<link rel="dns-prefetch" href="//google.com" />
<link
href='https://fonts.google.com'
rel='preconnect'
crossorigin
/>
<link rel="prefetch" href="image.png" />
<link rel="prerender" href="https://yld.io" />
keep-alive connections
(image source: High Performance Browser Networking - Ilya Gregorik)
head-of-line blocking
multiple TCP connections
{sh1, sh2, sh3, sh4, sh5, sh6}.yld.io
myscript.js
anotherscript.js
stylesheet.css
bundle.js
.default {
background-image: url('image.png');
background-repeat: no-repeat;
width: 40px;
height: 60px;
background-position: 0 0;
}
(again!)
published in 2015
based on SPDY
extends HTTP 1.x
(image source: High Performance Browser Networking - Ilya Gregorik)
new Binary framing layer
(image source: High Performance Browser Networking - Ilya Gregorik)
1. Stream prioritization
2. Server push
3. Header compression
4. Flow control
1. Stream prioritization
1
12
1
4
1. Stream prioritization
1
12
1
4
dependencies and weights
index.html
styles.css
script1.js
script2.js
2. Server push
(image source: High Performance Browser Networking - Ilya Gregorik)
2. Server push
(image source: High Performance Browser Networking - Ilya Gregorik)
PUSH_PROMISE
RST_STREAM
SETTINGS
...
3. Header
Compression
(HPACK)
(image source: High Performance Browser Networking - Ilya Gregorik)
4. Flow Control
SETTINGS
WINDOW_UPDATE
DATA
https://github.com/http2/http2-spec/wiki/Implementations
https://github.com/http2/http2-spec/wiki/Implementations
(Dev Tools > Network tab)
(Dev Tools > Network tab)
....but, c'mon HTTPS!
1st task - 'Decrypt' TLS
2nd task - Inspect!
add env var
add key location on Wireshark SSL preferences
export SSLKEYLOGFILE=~/Users/sericaia/keys/sslkeylog.log
TCP handshake!
GET https://http2.golang.org/gophertiles?latency=200
https://http2.golang.org/gophertiles?latency=200
https://www.wireshark.org/docs/dfref/h/http2.html
DATA frame with the contents (image)
(source: https://w3techs.com/technologies/details/ce-http2/all/all)
11.3% of the trafic is served using HTTP/2
...
(https://www.chromium.org/quic)
(https://ipfs.io/)
Daniela Matos de Carvalho
SEIUM 2017 @Braga
sericaia
By Daniela Matos de Carvalho
Software Engineer @Dashlane, mother, photographer amateur, former @requirelx organiser, prev @YLDio, @zpx_interactive