JS must be placed at the bottom of the body?

JS must be placed at the bottom of the body?time 2016-01-12 02:00:02 Write code of small Dukja Originalhttp://delai.me/code/js-and-performance/ThemesJavaScript CSSFirst, 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 people 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?

leave a blank White to make you think of a want to

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- 既然Dom树完全生成好后才能显示“没有图片的首屏” this sentence 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 first, we need to understand a few 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. Both DOM and CSSOM generate the Bytes → characters → tokens → nodes → object model. final data in such a way. 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. Specifically, here's what you see

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 requests, whether they are 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 the misunderstanding that many people have when they understand the rendering mechanism.

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 has been able to know which nodes in the Web page, the CSS definition of 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, Painting : Layout, the browser already know which nodes to display (which nodes is visible), the CSS properties of 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 be updated 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, to /js/jquery.js do the deferred 2s return processing, and put in the <script src="http://127.0.0.1:8080/js/jquery.js"></script> navigation bar below, 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
• JS download and execution will block the construction of the DOM tree, so the script tag in the first screen of the HTML code snippet may affect the content of the first screen.
• 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: it does not affect but it is possible to truncate the contents of the first screen so that it shows only 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.

JS must be placed at the bottom of the body?