Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web 200: Anatomy of a Request
Search
John Britton
December 09, 2012
Technology
0
180
Web 200: Anatomy of a Request
What happens when you press "Go" in your browser?
John Britton
December 09, 2012
Tweet
Share
More Decks by John Britton
See All by John Britton
Marketing to Developers
johndbritton
8
2.2k
Stories from the GitHub Classroom: Changing Practice, one Pull Request at a Time
johndbritton
3
620
Ops for Everyone
johndbritton
33
8k
GitHub: Distributed, Asynchronous, and Self-directed
johndbritton
4
410
P2PU at Campus Party Mexico 2011
johndbritton
2
260
Other Decks in Technology
See All in Technology
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
3
140
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
330
Wasmで社内ツールを作って配布しよう
askua
0
150
Jitera Company Deck / JP
jitera
0
250
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
360
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
13
3.7k
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.8k
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
4
520
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
640
AIエージェントを支える設計
tkikuchi1002
11
2.2k
ユーザー理解の爆速化とPdMの価値
kakehashi
PRO
1
110
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
320
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What's in a price? How to price your products and services
michaelherold
246
12k
A Modern Web Designer's Workflow
chriscoyier
695
190k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Adopting Sorbet at Scale
ufuk
77
9.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
Building an army of robots
kneath
306
45k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
Web 200: Anatomy of a Request @johndbritton
How does this...
[enter]
...become this...
...on the internet?
Internet, how does it work?
• Driving a car • Shipping containers It’s all about
abstraction
Major players • HTTP • URI • Browser • Web
server • DNS • Operating system • Interface • Network • Router ! ! • ... among others
OSI Model • 7 Layers • We won’t cover everything
• Really boring • Required if you want some bogus certificates • Actually a useful concept
HTTP The language browsers speak
Client server model • Web page is a document •
User inputs http://example.com • The client (browser) makes a GET request • The server sends a response • The browser renders the page
URI • http://github.com/johndbritton • http - protocol • github.com -
domain • /johndbritton - resource
Request GET /johndbritton
Response <!DOCTYPE html> ...
More Requests GET /style.css GET /jquery.js GET /image.jpg GET /image2.jpg
...
More Responses (you get the idea)
Rendering • HTML - Structure • CSS - Style •
Javascript - Behavior
Telnet, Inspector, JSFiddle Let’s try them out
Browser - ONLY HTTP Doesn’t care about anything else
HTTP: methods / verbs • GET • POST • PUT
• DELETE • more: HEAD, PATCH, TRACE, OPTIONS, CONNECT
HTTP: responses • 1xx - informational • 2xx - success
• 3xx - redirect • 4xx - error • 5xx - server error
The webserver It speaks HTTP too
Two types of webapp • Static • Receive a request
• Find a file on disk • Respond with contents of the file • Dynamic • Receive a request • Run application logic • Return a dynamically generated response
DNS: name resolution Where do requests go?
github.com 207.97.227.239
Lookups are cached for improved performance
Possible cache hits • Local machine • Home router •
ISP • Upstream provider
No cache - worst case • 13 Root nameservers •
TLD nameserver • Authoritative nameserver • A record • IP address
dig github.com ; <<>> DiG 9.8.3-P1 <<>> github.com ... github.com.
2 IN A 207.97.227.239
Making a connection • Resolve name • Open a connection
• Speak HTTP
Network collection of nodes that can communicate directly
Interface connection from node to communication medium
IP address 0.0.0.0 - 255.255.255.255
Why 255? • 0 - 255 • binary, 8 bits
• 00000000 - 11111111 • 00000000.00000000.00000000.00000000 • 11111111.11111111.11111111.11111111
Network addresses • a.b.c.d/n (n = network mask / subnet)
• Private (non routable) networks • 10.0.0.0/8 • 172.16.0.0/12 • 192.168.0.0/16
Special addresses • 192.268.1.0/24 - network with subnet • 192.168.1.0
- network address • 192.168.1.255 - broadcast address
Network settings • Auto-configured via DHCP • IP: 192.168.1.101 •
Subnet Mask: 255.255.255.0 (/24) • Router: 192.168.1.1 • DNS Servers: 192.168.1.1
Network hardware • Hub - Dumb • Switch - Smarter
• Router - Smartest
Network protocols • Transport - chunks of data • TCP
• UDP • Routing - • RIP • OSPF
Transport • OS segments data, packages it up into packets
• TCP • Reliable - resend on transmission failure • UDP • Unreliable - send once
Routing • Routers connect networks, handle packets and don’t care
what’s inside • RIP • Distance vector (hop count) • OSPF • Open shortest path first (link weight)
whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239
NAT Network address translation
ifconfig 192.168.1.101 whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239
traceroute, nmap, wireshark if we have time