What happens in between the time you type a URL in your browser and the time you see the fully rendered page.
URL to HTMLa minute in the life of a webpageFrançois Marier @fmariermozilla
View Slide
mozilla newmarket
8 engineers
8 engineers1 designer
8 engineers1 designer1 manager
video & mediamarketplacecloud servicescrash investigation
video & mediafirefox uxcloud servicescrash investigation
video & mediafirefox uxsecurity & privacycrash investigation
video & mediafirefox uxsecurity & privacylayout
> 1,000 employees world-wide
>
1. Learn HTML2. ?3. Profit !
abstractions
asbtractionconstruct used to understand acomplicated topic at a high level
asbtractionextra layer added to avoid writingthe same code over and over
drawSquare()
drawLine()
if you don't understand thelayers below, you won't know whatto do when the abstraction breaks
masteryrequires a high-level understandingof the rest of the stack
web performance
web performancehow bytes make it to the user
web performancehow bytes make it to the userhow the browser renders the page
URLDNSIPTCPHTTP / TLSHTML
URLuniform ressource locator
http://www.example.com
http://www.example.com/articles/
http://www.example.com/articles/tutorial.cgi
http://www.example.com/articles/tutorial.cgi?showsolutions=0&topic=web
http://www.example.com/articles/tutorial.cgi?showsolutions=0&topic=web#part5
http://www.example.com:80/articles/tutorial.cgi?showsolutions=0&topic=web#part5
http://username:[email protected]www.example.com:80/articles/tutorial.cgi?showsolutions=0&topic=web#part5
DNSdomain name system
$ cat /etc/resolv.confnameserver 208.67.222.222nameserver 208.67.220.220
www.cs.auckland.ac.nz
www.cs.auckland.ac.nz130.216.158.22
$ dig nz NS @199.7.83.42
$ dig nz NS @199.7.83.42; <<>> DiG 9.8.1-P1 <<>> nz NS @199.7.83.42;; global options: +cmd;; Got answer:;; ->>HEADER<;; flags: qr rd; QUERY: 1, ANSWER: 0, AUTHORITY: 7, ADD;; WARNING: recursion requested but not available;; QUESTION SECTION:;nz. IN NS;; AUTHORITY SECTION:nz. 172800 IN NS ns1.dns.net.nz.nz. 172800 IN NS ns2.dns.net.nz.nz. 172800 IN NS ns3.dns.net.nz.nz. 172800 IN NS ns4.dns.net.nz.nz. 172800 IN NS ns5.dns.net.nz.nz. 172800 IN NS ns6.dns.net.nz.nz. 172800 IN NS ns7.dns.net.nz.
$ dig ac.nz NS @ns1.dns.net.nz
$ dig ac.nz NS @ns1.dns.net.nz; <<>> DiG 9.8.1-P1 <<>> ac.nz NS @ns1.dns.net.nz;; global options: +cmd;; Got answer:;; ->>HEADER<;; flags: qr aa rd; QUERY: 1, ANSWER: 7, AUTHORITY: 0,;; WARNING: recursion requested but not available;; QUESTION SECTION:;ac.nz. IN NS;; ANSWER SECTION:ac.nz. 86400IN NS ns7.dns.net.nz.ac.nz. 86400IN NS ns4.dns.net.nz.ac.nz. 86400IN NS ns2.dns.net.nz.ac.nz. 86400IN NS ns1.dns.net.nz.ac.nz. 86400IN NS ns6.dns.net.nz.ac.nz. 86400IN NS ns3.dns.net.nz.ac.nz. 86400IN NS ns5.dns.net.nz.
$ dig auckland.ac.nz NS @ns1.dns.net.nz
$ dig auckland.ac.nz NS @ns1.dns.net.nz; <<>> DiG 9.8.1-P1 <<>> auckland.ac.nz NS @ns1.dns.net;; global options: +cmd;; Got answer:;; ->>HEADER<;; flags: qr rd; QUERY: 1, ANSWER: 0, AUTHORITY: 3, ADD;; WARNING: recursion requested but not available;; QUESTION SECTION:;auckland.ac.nz. IN NS;; AUTHORITY SECTION:auckland.ac.nz. 86400IN NS pubsec.domainz.net.nz.auckland.ac.nz. 86400IN NS dns1.auckland.ac.nz.auckland.ac.nz. 86400IN NS dns2.auckland.ac.nz.;; ADDITIONAL SECTION:dns1.auckland.ac.nz.86400IN A 130.216.1.2dns2.auckland.ac.nz.86400IN A 130.216.1.1
$ dig cs.auckland.ac.nz NS @dns1.auckland.ac.nz
$ dig cs.auckland.ac.nz NS @dns1.auckland.ac.nz; <<>> DiG 9.8.1-P1 <<>> cs.auckland.ac.nz NS @dns1.auc;; global options: +cmd;; Got answer:;; ->>HEADER<;; flags: qr aa rd; QUERY: 1, ANSWER: 4, AUTHORITY: 0,;; WARNING: recursion requested but not available;; QUESTION SECTION:;cs.auckland.ac.nz. IN NS;; ANSWER SECTION:cs.auckland.ac.nz. 10800 IN NS dns2.auckland.ac.nz.cs.auckland.ac.nz. 10800 IN NS kronos2.cs.auckland.ac.ncs.auckland.ac.nz. 10800 IN NS dns1.auckland.ac.nz.cs.auckland.ac.nz. 10800 IN NS kronos1.cs.auckland.ac.n;; ADDITIONAL SECTION:dns1.auckland.ac.nz.1800 IN A 130.216.1.2
$ dig www.cs.auckland.ac.nz @kronos1.cs.auckland.ac.nz
$ dig www.cs.auckland.ac.nz @kronos1.cs.auckland.ac.nz; <<>> DiG 9.8.1-P1 <<>> www.cs.auckland.ac.nz A @krono;; global options: +cmd;; Got answer:;; ->>HEADER<;; flags: qr aa rd; QUERY: 1, ANSWER: 1, AUTHORITY: 4,;; WARNING: recursion requested but not available;; QUESTION SECTION:;www.cs.auckland.ac.nz. IN A;; ANSWER SECTION:www.cs.auckland.ac.nz. 10800 IN A 130.216.158.22;; AUTHORITY SECTION:cs.auckland.ac.nz. 10800IN NS kronos2.cs.auckland.ac.nzcs.auckland.ac.nz. 10800IN NS dns2.auckland.ac.nz.cs.auckland.ac.nz. 10800IN NS dns1.auckland.ac.nz.cs.auckland.ac.nz. 10800IN NS kronos1.cs.auckland.ac.nz
l.root-servers.netns1.dns.net.nzns1.dns.net.nzdns1.auckland.ac.nzkronos1.cs.auckland.ac.nz
IPinternet protocol
www.bbc.co.uk212.58.246.94
$ mtr 212.58.246.941. 192.168.1.12. llu.bng1.tvc.orcon.net.nz3. xe-3-3-0.cre1.sky.orcon.net.nz4. 121.98.9.1375. ae1-0.cre2.nct.odyssey.net.nz6. ORCON-INTER.bar1.SanFrancisco1.Level3.net7. xe-5-0-0.bar1.SanFrancisco1.Level3.net8. ae-0-11.bar2.SanFrancisco1.Level3.net9. ae-6-6.ebr2.SanJose1.Level3.net10. ae-62-62.csw1.SanJose1.Level3.net11. ae-61-61.ebr1.SanJose1.Level3.net12. ae-2-2.ebr2.NewYork1.Level3.net13. ae-62-62.csw1.NewYork1.Level3.net14. ae-61-61.ebr1.NewYork1.Level3.net15. ae-43-43.ebr2.London1.Level3.net16. ae-57-222.csw2.London1.Level3.net17. ae-229-3605.edge4.London1.Level3.net18. BBC-TECHNOL.edge4.London1.Level3.net19. ???20. ???21. ae0.er01.cwwtf.bbc.co.uk22. 132.185.255.16523. bbc-vip015.cwwtf.bbc.co.uk
130.216.158.22212.58.246.94
130.216.158.22212.58.246.94router drops packetspackets arrive in wrong order
130.216.158.22212.58.246.94router drops packetscable is cutpackets arrive in wrong order
ideal network actual network
TCPtransmission control protocol
guarantees in-orderdelivery of packets
abstraction of a reliable point-to-pointconnection with built-in re-try logic
applications have a lotless errors to deal with
UDPuser datagram protocol
TCP UDP
reminder: abstractions are leaky
3-way handshakeestablishing a new connection
client server
clientSYNx=42server
clientSYNx=42SYN+ACKy=10,x=43server
clientSYNx=42SYN+ACKy=10,x=43ACKy=11server
HTTPhypertext transfer protocol
clear text protocol
clientrequestserver
clientrequestresponseserver
Host: www.example.comUser-Agent: Mozilla/5.0 (rv:29.0) Firefox/29.0DNT: 1
Content-Type: text/htmlDate: Thu, 22 May 2014 05:34:47 GMTLast-Modified: Fri, 09 Aug 2013 23:54:35 GMTContent-Length: 1270Example DomainExample DomainThis domain is established to be used fordomain in examples without prior coordination
200 OK
404 Not Found
$ curl http://www.example.comExample DomainExample DomainThis domain is established to be used fordomain in examples without prior coordinatio
$ curl --head http://www.example.comHTTP/1.1 200 OKAccept-Ranges: bytesCache-Control: max-age=604800Content-Type: text/htmlDate: Thu, 22 May 2014 05:42:26 GMTEtag: "359670651"Expires: Thu, 29 May 2014 05:42:26 GMTLast-Modified: Fri, 09 Aug 2013 23:54:35 GMTServer: ECS (cpm/F858)X-Cache: HITx-ec-custom-error: 1Content-Length: 1270
verbs(fancy word for commands)
GET
POST
GET /article/43228
GET /article/43228GET /article/43228
GET /article/43228POST /article/delete/last
GET /article/43228POST /article/delete/lastPOST /article/delete/last
GET /article/43228POST /item/20/buyPOST /item/20/buy$$$$$$
TLStransport layer security
SSLsecure sockets layer
HTTPShypertext transfer protocol secure
secure(sometimes)
client server(pk, sk)
clienthello!server(pk, sk)
clienthello!hello!pubkeyserver(pk, sk)
clienthello!hello!pubkeyserver(pk, sk)session key
clienthello!hello!pubkeyi'm done!encryptpk(session key)server(pk, sk)session key
clienthello!hello!pubkeyi'm done!encryptpk(session key)server(pk, sk)session keysession key
man-in-the-middle
client server(pk, sk)NSA(pk, sk)
clienthello!server(pk, sk)NSA(pk, sk)
clienthello!server(pk, sk)NSA(pk, sk)hello!
clienthello!hello!pubkeyserver(pk, sk)NSA(pk, sk)hello!
clienthello!hello!pubkeyserver(pk, sk)NSA(pk, sk)hello!hello!pubkey
clienthello!hello!pubkeyserver(pk, sk)keyNSA(pk, sk)hello!hello!pubkey
clienthello!hello!pubkeyi'm done!encrypt(key)server(pk, sk)keyNSA(pk, sk)hello!hello!pubkey
clienthello!hello!pubkeyi'm done!encrypt(key)server(pk, sk)keyNSA(pk, sk)hello!hello!pubkeykey
clienthello!hello!pubkeyi'm done!encrypt(key)server(pk, sk)keyNSA(pk, sk)hello!hello!pubkeyi'm done!encrypt(key)key
clienthello!hello!pubkeyi'm done!encrypt(key)server(pk, sk)keyNSA(pk, sk)hello!hello!pubkeyi'm done!encrypt(key)keykey
authentication(of the server)
clienthello!hello!signed pubkeyserver(pk, sk)session keyverifysignature
clienthello!hello!signed pubkeyserver(pk, sk)session keyverifysignaturei'm done!encryptpk(session key)session key
clienthello!hello!signed pubkeyserver(pk, sk)NSA(pk, sk)hello!hello!signed pubkeykey
clienthello!hello!signed pubkeyserver(pk, sk)NSA(pk, sk)hello!hello!signed pubkeykeyabort!
how can you tell you'retalking to the right person?(and not to the NSA)
trusted third-partycertificate authority
EFF has foundmore than650certificateauthoritiesin the wild
*.google.com
*.google.com 7 different domains
$100
$1,000$100
$1,000$1,000$100
HTMLhypertext markup language
parsing
.png.jpg .js .css
resolve all hostnamesestablish TCP connectionsnegotiate TLS sessionURLDNSIPTCPHTTP / TLSHTML
@fmarier [email protected]questions?
wanna know more?https://github.com/alex/what-happens-when/blob/master/README.rstUSB protocolARP resolutionbrowser networking stackrendering engineHTML parsingCSS interpretation
Copyright © 2015 Francois Marier This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.leaky pipe: https://www.flickr.com/photos/ifl/3920636654leaky pipe with elephant: https://www.flickr.com/photos/rcrhee/10785374875sky tower: https://www.flickr.com/photos/elisfanclub/6120863439golden gate: https://www.flickr.com/photos/jeffgunn/6663212147san jose: https://www.flickr.com/photos/the_tahoe_guy/3183673224statue of liberty: https://www.flickr.com/photos/suewaters/7574642942big ben: https://www.flickr.com/photos/timmorris/3103896345bbc house: https://www.flickr.com/photos/redvers/532073098fingers crossed: https://www.flickr.com/photos/bearpark/6861722073prince charles : http://en.wikipedia.org/wiki/File:Prince_Charles_2012.jpgsouthern cross cable: https://en.wikipedia.org/wiki/File:Southern_Cross_Cable_route.svgimage credits
fmarier
gunnarmorling
kentaroutakeda
weddingpark
okashoi
itsmedreamwalker
guvalif
youliangdao
kubotak
dicoding
mpyw
mraible
a4lg
eitanlees
dougneiner
hannesfritz
roundedbygravity
samlambert
holman
addyosmani
shpigford
colly
mclloyd
morganepeng
jcasabona