Emil Stenstrom put together an excellent high-level overview of the rendering process in the context of a modern web application; Now let’s go through an edited and updated version by Stanford.
1. You begin by typing a URL into address bar in your preferred browser or clicking a link.
2. The browser parses the URL to find the protocol, host, port, and path.
3. If HTTP was specified, it forms a HTTP request.
4. To reach the host, it first needs to translate the human readable host into an IP address,and it does this by doing a DNS lookup on the host.
5. Then a socket needs to be opened from the user’s computer to that IP address, on the port specified (most often port 80 for HTTP).
6. When a network connection is open, the HTTP request is sent to the host. The details
of this connection are specified in the 7-layer OSI model.
7. The host forwards the request to the server software (most often Apache) configured to
listen on the specified port.
8. The server inspects the request (most often only the path), and the subsequent behavior
depends on the type of site.
For Static content:
– The HTTP response does not change as a function of the user, time of day, geographic location, or other parameters (such as HTTP Request headers).
– In this case a fast static web server like nginx can rapidly serve up the same HTML/CSS/JS and binary files (jpg, mp4, etc.) to each visitor.
– Academic webpages are good examples of static content: the experience is the same for each user and there is no login.
For Dynamic content:
– The HTTP response does change as a function of the user, time of day, geographical
location, or the like.
– In this case you will usually forward dynamic requests from a web-server like nginx (or Apache) to a constantly running server-side daemon (like mod_wsgi hosting Django or node.js behind nginx), with the static requests intercepted and returned by nginx (or even before via caching layers).
– To construct the HTTP response a relational database is often accessed. You can think of a relational database as a set of tables similar to Excel tables, with links between rows (example database schema).
– While sometimes raw SQL is used to access the database, modern web frameworks allow engineers to access data via so-called Object-Relational Mappers (ORMs), such as sequelize.js (for node.js) or the Django ORM (for Python).
The ORM provides a high-level way of manipulating data within your language after defining some models. (Example models / instances in sequelize.js).
– The specific data for the current HTTP request is often obtained via a database search using the ORM (example), based on parameters in the path (or data) of the request.
– The objects created via the ORM are then used to template an HTML page (server-side templating), to directly return JSON (for usage in APIs or clientside templating ), or to otherwise populate the body of the HTTP Response.
This body is then conceptually put in an envelope with HTTP Response headers as metadata labeling that envelope.
– The web framework then returns the HTTP response back to the browser.
9. The browser receives the response. Assuming for now that the web framework used server-side templating and return HTML, this HTML is parsed. Importantly, the browser must be robust to broken or misformatted HTML.
10. A Document Object Model (DOM) tree is built out of the HTML. The DOM is a tree structure representation of a webpage. This is confusing at first as a webpage may look planar rather than hierarchical, but the key is to think of a webpage as composed of chapter headings, subsections, and subsubsections (due to HTML’s ancestry as a
descendant of SGML, used for formatting books).
13. CSS is parsed, and used to annotate each node in the DOM tree with style information on how it should render. CSS controls appearance.
15. The browser renders the page on the screen according to the DOM tree and the final style information for each node.
16. You see the webpage and can interact with it by clicking on buttons or submitting forms.Every link you click or form you submit sends another HTTP request to a server, and the process repeats.
To recap, this is a good overview of what happens on the server and then the client (in this case the browser) when you navigate to a URL. Quite a miracle, and that’s just what happens when you click a link.
How to build a scalable web application using Microservices Architecture
Millions of people worldwide stream more than two billion hours worth of video from Netflix each month. Another example is Facebook, which roughly had 2.85 billion active users in the first quarter of 2021. Talking about the e-commerce giant, Amazon receives more than 66 thousand orders per hour, and 18.5 orders per second. Whoooo! So, […]
Flutter vs React Native: What to choose in 2021
If Flutter vs React Native is your burgeoning question for this year 2021, guess what you are not alone. We no longer need statistics to know about the ever-growing popularity of mobile apps across the world. According to the latest report, global consumers are now spending an average of 4.2 hours per day using apps […]
React Native App development: Top Reasons to Choose It in 2021
The promising cross-platform app development framework aka React Native has garnered huge popularity in recent times. The technology enables simultaneous mobile app development for multiple platforms using a single and a fraction of resources required for native development. The react native framework has emerged to be a popular choice among businesses to fulfill their cross-platform […]