Clients and Servers

Computers connected to the internet are called clients and servers.

• Clients are web user interface-connected devices.

• 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,

• Internet connection: Allows to send and receive data.

• 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. It stores all the domain's IP mapping.

• 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, which are like different parts of the goods you buy from the shop. There are two main types

  • Code files: Websites are built for HTML, CSS, JavaScript etc.

  • Assets: This is a collective name for all the other stuff that makes up a website, such as images, music, video etc.

So what happens, exactly?

when you open a web address

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

3. If the server approves the client request, the server will send all the necessary data

4. The browser assembles the small chunks into a complete web page and displays it to you.

Order in which component files are parsed

When browsers send requests to servers for HTML files, those HTML files often contain links, CSS and script elements referencing external JavaScript.

• The browser parses the HTML file first and then leads to recognizing any link element referencing external CSS stylesheets and scripts.

• As the browser parses the HTML, it sends requests back to the server for any CSS from the link element, and any JavaScript files found in a script tag.

• The browser generates an in-memory DOM tree from the parsed HTML, generates an in-memory CSSOM structure from the parsed CSS, and compiles and executes the parsed JavaScript.

• As the browser builds the DOM tree and applies the styles from the CSSOM tree and executes the JavaScript, a visual representation of the page is painted on the screen.