上QQ阅读APP看书，第一时间看更新
How a Web Page Renders
How does a web page render in the browser? We've learned a lot about HTML and CSS in this chapter, but let's see how these technologies are put together by the browser to render our web page.
The following figure shows a flowchart of the process, which is further explained below:
Figure 1.37: Flow chart of the web page render process
To summarize the process:
- The user starts by navigating to a URL, possibly via a hyperlink or by typing the URL into the address bar of their browser.
- The browser will make a GET request to the disk or a network. It will read the raw bytes from that location and convert them to characters (based on character encoding such as UTF-8).
- The browser then parses these characters according to the HTML standard to find the tokens that are familiar as HTML elements, such as <html> and <body>.
- Another parse is then made to take these tokens and construct objects with their properties and based on the rules appropriate to that token. At this point, the objects are defined.
- Finally, the browser can define the relationships between these objects and construct the HTML DOM for the web page.
- At this point, we have a DOM but not a rendered web page. The next task is to construct the CSSOM. Again the browser will load any style sheet resources it needs to, which were found while parsing the document. It will then construct the styles associated with nodes in the tree structure, which gives us the CSSOM.
- With the information gathered in the DOM and the CSSOM, the browser can create a render tree. The render tree is constructed by combining information from the CSSOM and the HTML DOM. Nodes in the HTML DOM that will not be rendered (for instance, those with the display: none; style) are excluded from the render tree. Those that are rendered are enriched with their computed style rules.
- Now the browser has all the information it needs, it can begin to calculate the positions of elements in the rendered viewport. This is called the layout stage. The browser lays elements out based on their size and position within the browser viewport. This stage is often also called reflow. It means the browser must recalculate the positions of elements in the viewport when elements are added to or removed from the page or when the viewport size is changed.
- Finally, the browser will rasterize or paint each element on the page, depending on their styles, shadows, and filters to render the page the user will see.
That is a brief and simplified summary of the rendering of a web page. Think about how many resources might be loaded on a relatively complicated website and with JavaScript running events and we can see that much of this process happens frequently and not in such a linear manner. We can start to see the complexities of what a browser is doing when it renders your web page.