How a webpage is loaded and displayed

Posted 2020-10-14 每天更强一点...

References

[1] https://varvy.com/pagespeed/display.html

Steps of a webpage being displayed

1. Request: A request is made when a link is clicked

2. Response: The page and its resources (files) are downloaded

3. Build: Te web browser uses the page resources to build the page

4. Render: The page then is rendered (displayed) to the user

Request

1) Link is clicked

2) Page is refreshed

3) Navigation bar is used

(Html) files will be requested via HTTP

Response

The web server then provides the file to the web browser (html, javascript, css, images)

Parsing

When a computer reads a file looking for something, it is called parsing.

Web browser reads (html) file to find resources and requests found resources from server.

The web browser looks at the entire HTML document and looks for any css, javascript and images that are referenced by the page. If resources are found in the HTML the web browser then requests each of those resource files from the webserver. The images, css, and javascript that the HTML file references will be downloaded by the browser.

The Build

Once the web browser has the required resources it can start building the page.

The way a web browser builds the page is by combining the information found in the document (the original HTML file) and the information found in the resources.

There are basically three steps that the browser takes to build a page.

• Build the DOM
• Build the CSSOM
• Build the Render Tree

Building the DOM

DOM stands for "Document Object Map". It is basically a map of where things are displayed on a page according to the HTML. The DOM represents what the HTML is saying by mapping out the page in a relational manner.

Building the CSSOM

CSSOM stands for "CSS Object Map". It is basically a map of what styles should be applied to different parts of the page according to the CSS. The CSSOM maps out the way things should be presented using styles.

Building the render tree

The render tree essentially takes the DOM and the CSSOM and combines them to create a full map of how the page will actually be laid out and painted.

The Render

After all of the above steps have been performed the browser can now finally put something up on the screen.

There are two main things that happen here...

• Layout / Reflow
• Paint

Layout/Reflow

The browser at this point knows what it should display (the DOM) and in what manner to display it (the CSSOM) and the relationship between those two (the render tree).

What it does not know is the size in which to display everything and where everything will end up on a screen.

This part is called the layout or the reflow, and it is basically where the browser determines how big a screen is and how that will affect the way the page is displayed.

Paint

Now that all the calculations are done, the browser can actually display something on the screen.

In this final stage the browser will convert each node in the render tree to actual pixels on the screen.