Skip to content

Instantly share code, notes, and snippets.

@trietptm
Forked from stevepentler/The_Internet.md
Created December 8, 2019 00:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save trietptm/157edfbdbe03bd3d0e595414dd88df8f to your computer and use it in GitHub Desktop.
Save trietptm/157edfbdbe03bd3d0e595414dd88df8f to your computer and use it in GitHub Desktop.

The Internet

Type in "g" & Enter

  • Browser's autocomplete technology kicks in
  • Enter key closes curcuit in keyboard, converts enter to 13, passes to the operating system
  • passed to OSX WindowServer which launches an event

Parse URL

  • Protocol: HTTP = Hyper Text Transfer Protocol
  • Protocol: HTTPS = Secure
  • Google.com = Server
  • /Resource = Path within server
  • If no protocol or domain name, the browser handles the redirect

Check HSTS list

  • HSTS = HTTP Strict Transport Security, which is a list of websites that require HTTPS connection
  • If the url is included in this list, it sends a HTTPS request

DNS Lookup using ARP Protocol Process

  • Browser checks if the domain is in its cache
  • If not in cache, browser calls gethostbyname function to check if the hostname can be resolved in the local host files
  • If not cached/in hosts files, sends a request to the DNS server (Domain Name Service)

ARP Protocol Process

  • Address Resolution Protocol (ARP) turns human readable url into Internet Protocol (IP) address
  • Media Access Control (MAC) Address is a unique identifier assigned to a specific network interface (traces to specific network connection)
  • Sends an ARP Request including: SENDER MAC & IP, TARGET MAC & IP
  • Receives an ARP Request including: SENDER MAC & IP, TARGET MAC & IP
  • Now the network library ahs the IP address of the DNS server

Opening of a Socket

  • Browser now has the IP address of the destination server
  • Opens a web socket on port 80 (HTTP) or port 443(HTTPS)
  • Creates a packet
  • Sends packed from computer to MODEM, which converts binary to an analog signal for cable transmission (fiber optics sends binary)
  • Routes from Router to Router with greater specificity
  • Server & Client acknowledge a connection by altering squence number and receiver acknowledgement number
  • Data is transferred
    • As one side sends N data bytes, it increase its SEQ by that number to track data transfer
  • Once data is transferred, the closer sends a FIN packet

TLS Handshake

  • client sends ClientHello to server, server replies with ServerHello, which includes server's public certificate (Certificate Authority (CA))
  • Client references CA to see if it is on the list of trusted CA's
  • An key is exhanged and agreed upon by both client and server
  • Now all HTTP data is encrypted with the agreed key

HTTP Protocol

GET / HTTP/1.1
Host: google.com
Connection: close
[other headers]
  • other headers = colon separated key-value pairs
  • applications that do not support persist connections must have the close connection option in every message
  • browser sends a single blank newline to the server to indicate the content of the request is finished
  • headers help determine if the page requested is cached and has been unmodified since the last retrieve, if so reponds with 304 Not Modified
  • server responds with:
200 OK
[response headers]
/n
payload of HTML content

HTTP Server Request Handle

  • HTTPD( HTTP Daemon) server handles the requests/responses on the server side
  • most common are Apache & Linux
  • Server breaks down the request into Method (GET/PUT/POST/DELETE), Domain (Google.com), Requested Path (/)
  • Server verifies the request (ex: POST request is authorized by IP/authorization)

Server supplices the resources to the Browser

Browser parses HTML, CSS, JS

Browser constructs and renders DOM

Browser

  • browser's functionality is to present the web resources
    • HTML doc, PDF, image, or other content
  • The way the browser interprets and displays using the W3C standards

Browser components

  • User interface: The user interface includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.
  • Browser engine: The browser engine marshals actions between the UI and the rendering engine.
  • Rendering engine: The rendering engine is responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.
  • Networking: The networking handles network calls such as HTTP requests, using different implementations for different platforms behind a platform-independent interface.
  • UI backend: The UI backend is used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
  • JavaScript engine: The JavaScript engine is used to parse and execute JavaScript code.
  • Data storage: The data storage is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.

Rendering Engine / HTML Parser

  • parse the HTML into a tree of DOM (Document Object Model) element and attribute nodes
  • root of the tree is the "Document" object
  • AFTER HTML is parsed, fetches external resources (CSS/Images/JS)
  • Browser marks the document as parsed and begins to execute JS
Modified from this gist
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment