Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web 200: Anatomy of a Request

Avatar for John Britton John Britton
December 09, 2012
Technology
0
180

Web 200: Anatomy of a Request

What happens when you press "Go" in your browser?

Avatar for John Britton

John Britton

December 09, 2012
Tweet

More Decks by John Britton

See All by John Britton
Marketing to Developers
Avatar for John Britton johndbritton
8
2.3k
Stories from the GitHub Classroom: Changing Practice, one Pull Request at a Time
Avatar for John Britton johndbritton
3
630
Ops for Everyone
Avatar for John Britton johndbritton
33
8.1k
GitHub: Distributed, Asynchronous, and Self-directed
Avatar for John Britton johndbritton
4
420
P2PU at Campus Party Mexico 2011
Avatar for John Britton johndbritton
2
270

Other Decks in Technology

See All in Technology
MariaDB Connector/C のcaching_sha2_passwordプラグインの仕様について
Avatar for kubo ayumu boro1234
0
1.1k
Everything As Code
Avatar for わいわい yosuke_ai
0
110
MySQLとPostgreSQLのコレーション / Collation of MySQL and PostgreSQL
Avatar for とみたまさひろ tmtms
1
1.4k
Connection-based OAuthから学ぶOAuth for AI Agents
Avatar for GMO Flatt Security flatt_security
0
420
ECS_EKS以外の選択肢_ROSA入門_.pdf
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
110
Building Serverless AI Memory with Mastra × AWS
Avatar for vvatanabe vvatanabe
1
730
投資戦略を量産せよ 2 - マケデコセミナー(2025/12/26)
Avatar for tomo gamella
0
510
20251219 OpenIDファウンデーション・ジャパン紹介 / OpenID Foundation Japan Intro
Avatar for OpenID Foundation Japan oidfj
0
540
戰略轉變：從建構 AI 代理人到發展可擴展的技能生態系統
Avatar for Bo-Yi Wu appleboy
0
140
[Data & AI Summit '25 Fall] AIでデータ活用を進化させる！Google Cloudで作るデータ活用の未来
Avatar for kirimaru kirimaru
0
4.1k
Snowflake導入から1年、LayerXのデータ活用の現在 / One Year into Snowflake: How LayerX Uses Data Today
Avatar for Civitaspo civitaspo
0
2.5k
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
440

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
76
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
76
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
830
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
0
320
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
110
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k

Transcript

  1. Web 200: Anatomy of a Request @johndbritton

  2. How does this...

  3. [enter]

  4. ...become this...

  5. ...on the internet?

  6. Internet, how does it work?

  7. • Driving a car • Shipping containers It’s all about

    abstraction

  8. Major players • HTTP • URI • Browser • Web

    server • DNS • Operating system • Interface • Network • Router ! ! • ... among others

  9. OSI Model • 7 Layers • We won’t cover everything

    • Really boring • Required if you want some bogus certificates • Actually a useful concept

  10. HTTP The language browsers speak

  11. 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

  12. URI • http://github.com/johndbritton • http - protocol • github.com -

    domain • /johndbritton - resource

  13. Request GET /johndbritton

  14. Response <!DOCTYPE html> ...

  15. More Requests GET /style.css GET /jquery.js GET /image.jpg GET /image2.jpg

    ...

  16. More Responses (you get the idea)

  17. Rendering • HTML - Structure • CSS - Style •

    Javascript - Behavior

  18. Telnet, Inspector, JSFiddle Let’s try them out

  19. Browser - ONLY HTTP Doesn’t care about anything else

  20. HTTP: methods / verbs • GET • POST • PUT

    • DELETE • more: HEAD, PATCH, TRACE, OPTIONS, CONNECT

  21. HTTP: responses • 1xx - informational • 2xx - success

    • 3xx - redirect • 4xx - error • 5xx - server error

  22. The webserver It speaks HTTP too

  23. 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

  24. DNS: name resolution Where do requests go?

  25. github.com 207.97.227.239

  26. Lookups are cached for improved performance

  27. Possible cache hits • Local machine • Home router •

    ISP • Upstream provider

  28. No cache - worst case • 13 Root nameservers •

    TLD nameserver • Authoritative nameserver • A record • IP address

  29. dig github.com ; <<>> DiG 9.8.3-P1 <<>> github.com ... github.com.

    2 IN A 207.97.227.239

  30. Making a connection • Resolve name • Open a connection

    • Speak HTTP

  31. Network collection of nodes that can communicate directly

  32. Interface connection from node to communication medium

  33. IP address 0.0.0.0 - 255.255.255.255

  34. Why 255? • 0 - 255 • binary, 8 bits

    • 00000000 - 11111111 • 00000000.00000000.00000000.00000000 • 11111111.11111111.11111111.11111111

  35. 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

  36. Special addresses • 192.268.1.0/24 - network with subnet • 192.168.1.0

    - network address • 192.168.1.255 - broadcast address

  37. 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

  38. Network hardware • Hub - Dumb • Switch - Smarter

    • Router - Smartest

  39. Network protocols • Transport - chunks of data • TCP

    • UDP • Routing - • RIP • OSPF

  40. Transport • OS segments data, packages it up into packets

    • TCP • Reliable - resend on transmission failure • UDP • Unreliable - send once

  41. 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)

  42. whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239

  43. NAT Network address translation

  44. ifconfig 192.168.1.101 whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239

  45. traceroute, nmap, wireshark if we have time