Turn---JS must be placed at the bottom of the Body? Talk about the browser rendering mechanism

Mr Delay

segmentfault.com/a/1190000004292479

If you have a good article to submit, please click here to learn more

First, from a face of the question.

In front of the interview I like to ask questions that seem to be common sense. For example: Why do you generally put <script src= "" ></script> such code at the bottom of the body? (For the sake of communication efficiency, I will agree with each other in advance of all the discussions with Chrome as an example)

The candidate will generally answer: because the browser generates a DOM tree in a row of HTML code, the script tag on the last side will not affect the previous page rendering.

I am a chicken thief to continue to ask: Since the DOM tree is fully generated after the page can be rendered, the browser must read all the HTML to generate a complete DOM tree, the script tag is not placed on the bottom of the body is not the same?

Stay

One

Paragraph

Empty

White

Let

You

First

Think

One

Think

What does "page render" mean?

Strictly speaking, my last question is ambiguous: we need to unify what we often say "page rendering"-Refers to "the first screen is displayed" or "the page is fully Loaded" (hereafter collectively referred to as STEPC)?

If the first screen is displayed, then the problem comes again: Assume that the first screen of the page has a picture, where the "first screen" refers to "show the first screen of all Pictures" (hereafter collectively referred to as STEPB) or "No picture of the first screen" (hereafter collectively referred to as STEPA).

Make sure "page rendered" refers to which of Stepa, STEPB, Stepc is critical (although no one has tried to do so so far), if "page rendered" refers to Stepc, then my last question is yes- The script tag is not placed at the bottom of the body and does not slow down the full load time of the page.

Obviously, we tend to be more concerned about the first screen time, so if the "page rendered out" specifically "no picture of the first screen", then my last question becomes the following, and how to answer it?

Now that the DOM tree is fully generated to display the "No picture of the first screen", the browser must read all the HTML to generate the full DOM tree, the script tag is not placed on the bottom of the body is not the same?

Trap

However, there is still a trap in the above question-since the DOM tree is fully generated before the "first screen without pictures" is deceptive, "the first screen without pictures" is not necessary to "complete dom tree". In other words: in the process of generating the DOM tree, as long as certain conditions are available, "No picture of the first screen" can be displayed.

So, aside from these ambiguities and pitfalls, my question becomes:

Does the location of the script tag affect the first screen time?

The answer is not so obvious, however, from the browser's rendering mechanism. (again: The browser mentioned in this article refers to Chrome)

Second, the browser rendering mechanism

Google Web Fundamentals is a great document that covers everything from the web to the browser to the front end. I summarize the contents of the Ilya Grigorik Critical rendering path Browser rendering mechanism section below:

Several concepts

1, dom:document Object Model, the browser parses HTML into a tree-shaped data structure, referred to as DOM.

2, Cssom:css Object Model, the browser parses the CSS code into a tree-shaped data structure.

3, DOM and CSSOM are all based on bytes→characters→tokens→nodes→object model. This way, the final data is generated. As shown in the following:

The construction of the DOM tree is a deep traversal process: All the child nodes of the current node are built before the next sibling node of the current node is built.

4. Render Tree:dom and CSSOM after merging to generate the render Tree, such as:

The Render tree, like the DOM, preserves the CSS properties of each node, the attributes of the node itself, and the child nodes of the node as a multi-pronged tree.

Note: The Display:none node will not be added to the Render Tree, and Visibility:hidden will, so if a node is not displayed at the beginning, setting it to Display:none is better. (see here for details)

The browser's rendering process

1. Create/update Dom and request Css/image/js: After the browser requests to the HTML code, at the beginning of the generation DOM (should be bytes→characters), the parallel launch of CSS, pictures, JS request, Whether they're in the head or not.

   Note: The download request for the JS file does not require the DOM to process the script node, for example: simple regular matching can do this, although in fact it does not necessarily pass the regular:). This is a lot of people in understanding the rendering mechanism of the existence of the misunderstanding.

2. Create/update Render cssom:css File Download complete, start building CSSOM

3. Create/update Render tree: All the CSS files are downloaded, and after the Cssom is built, the render tree is generated with the DOM.

4. Layout: With the render Tree, the browser can already know what nodes are in the Web page, the CSS definitions for each node, and their dependencies. The next step, called Layout, is to calculate the position of each node in the screen as the name implies.

5. After Painting:layout, the browser already knows which nodes to display (which nodes is visible), what CSS properties are for each node (their computed styles), where each node is located in the screen (geometry). Entered the final step: Painting, according to the calculated rules, through the video card, the content to the screen.

All of the previous five steps in the first 3 steps are all using "create/update" because the DOM, CSSOM, and Render tree may have been updated several times after the first painting, such as JS modifying the DOM or CSS properties.

Layout and Painting will also be repeated, in addition to the DOM, Cssom update reasons, the picture download will need to call layout and Painting to update the page.

See Timeline, at a glance

I picked up a piece of code that liked the PC home page and ran it through node. node as the server side, the/js/jquery.js did a delay of 2s return processing, and the <script src= "Http://127.0.0.1:8080/js/jquery.js" ></script > put it below the navigation bar and the result is this:

From the above timeline we can see:

• There is no definite relationship between the first screen time and the Domcontentload event.

• Early loading of all CSS is the key to reducing the first screen time

• The download and execution of JS blocks the construction of the DOM tree (which is strictly interrupted by an update of the DOM tree), so the script tag will truncate the contents of the first screen in the HTML snippet in the first-screen range.

• Normal script tags are placed at the bottom of the body, do not do with async or defer processing, will not affect the first screen time, but affect the time of domcontentload and load, and thus affect the execution of the code dependent on the start time.

Iii. answers to the questions

Back to the previous question:

Does the location of the script tag affect the first screen time?

The answer is: no impact (if the first screen here refers to the page from the Whiteboard to the web screen-that is, the first time painting), but it is possible to truncate the first screen content, so that it only shows the above section.

Iv. further

So, finally, we know the common sense. However, the design and development may encounter difficult to put all the JS to the bottom of the page situation. For example: Your page is a sub-module to write, each module has its own HTML, JS and even CSS, when these modules into a page will appear JS naturally appear in the middle part of the HTML.

We also had this problem, so we made an open-source project: Tiny-loader--a small Loader that load css/js on best way for page performance easy to use.

Answer the questions mentioned in the question, JS must be placed at the bottom of the body? If the use of TINY-LOADER,JS can not be placed at the bottom of the body:)

Turn---JS must be placed at the bottom of the Body? Talk about the browser rendering mechanism