How the web works for beginners in 5m

You will learn a simplified view of what happens when you view a webpage in a web browser on your computer or phone.

Clients and servers

Computers connected to the internet are called clients and servers. A simplified

• Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi) and web-accessing software available on those devices (usually a web browser like Chrome).
• Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.

In addition to the client and the server, we also need to say hello to:

• Your internet connection: Allows you to send and receive data on the web.

• TCP/IP: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the internet.

• DNS: Domain Name System is like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the website's IP address before it can retrieve the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below).

• HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other.

• Component files: A website is made up of many different files, These files come in two main types:

  • Code files: Websites are built primarily from HTML, CSS, and JavaScript.
  • Assets: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.

When you type a web address into your browser

1. The browser goes to the DNS server, and finds the real address of the server that the website lives on
2. The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client. This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
3. If the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets
4. The browser assembles the small chunks into a complete web page and displays it to you.

Order of File Parsing

• HTML Parsing: The browser starts by parsing the HTML file, detecting <link> tags for external CSS and <script> tags for JavaScript.

• Fetching CSS and JavaScript: While parsing HTML, the browser sends requests to the server for the referenced CSS and JavaScript files.

• Parsing and Compiling:

  • HTML generates the DOM tree (Document Object Model).
  • CSS generates the CSSOM tree (CSS Object Model).
  • JavaScript is compiled and executed.

• Page Rendering: The browser combines the DOM and CSSOM to style the content and executes JavaScript, painting the visual representation of the page to the screen, allowing user interaction.

What is DNS (Domain Name System)?

Real web addresses aren't the nice, memorable strings you type into your address bar to find your favorite websites. They are special numbers that look like this: 192.0.2.172.

This is called an IP address, and it represents a unique location on the web. However, it's not very easy to remember, is it? That's why the Domain Name System was invented. This system uses special servers that match up a web address you type into your browser (like "mozilla.org") to the website's real (IP) address.

Resources:

• MDN Web Docs