CSS blocking and JS blocking

JS Blocking

All browsers in the download JS, will block all other activities, such as the download of other resources, content rendering and so on.
Until JS downloads, parses, executes, and then continues to download additional resources and render the content in parallel.
In order to improve the user experience, the next generation of browsers support parallel download js, but JS download will still block the download of other resources (such as. Pictures, CSS files, etc.).

Because the browser needs to rebuild the DOM tree in order to prevent JS from modifying the DOM tree, other downloads and renders are blocked.

Embedding JS will block the rendering of all content, while external JS will only block the display of subsequent content,

2 ways will block the subsequent download of the resource. This means that external styles do not block the loading of external scripts, but they block the execution of external scripts.

CSS Blocking

CSS can be downloaded in parallel, under what circumstances will be blocked loading (in the test observation, IE6 under the CSS is blocked loading)

When the CSS is followed by the embedded JS, the CSS will be blocked after the download of the resource situation. When you put the embedded JS in front of the CSS, there will be no blocking situation.

Root cause: Because the browser will maintain the HTML in the order of CSS and JS, the stylesheet must be loaded before the embedded JS execution, parsing finished. Embedded JS will block the subsequent loading of resources, so the above CSS blocking download situation.

Where should embed JS be placed?
1, at the bottom, although placed at the bottom will still block all rendering, but will not block the download of resources.
2, if embedded JS placed in the head, please put embedded JS in the CSS head.
3, the use of defer (ie only support) ANYSC
4, do not in the embedded JS call long-running function, if must be used, you can use ' setTimeout ' to invoke

JavaScript non-blocking loading concrete way
Place the script at the bottom. <link> is placed in the head to ensure that the normal display of the page can be loaded before JS is loaded. <script> tags are placed before </body>.
Group script: because the page parsing process is blocked when each <script> tag is downloaded, limiting the total <script> count of pages can also improve performance. Applies to inline scripts and external scripts.

Non-blocking scripts: when the page finishes loading, the JS code is loaded. That is, the code is downloaded after the Window.onload event has been issued.
(1) Defer properties: Supports IE4 and fierfox3.5 later browsers
(2) Dynamic scripting elements: the Document Object Model (DOM) allows you to dynamically create almost all the document content of HTML using JS. The code is as follows:

<script>var script=document.createelement ("script"), script.type= "Text/javascript"; script.src= "file.js"; document.getElementsByTagName ("Head") [0].appendchild (script);</script>

This is equivalent to inserting a script tag underneath the head. When the corresponding file of SCRIPT.SRC is downloaded, it is then executed.

The point of this technique is that no matter where the download is initiated, the file volume is downloaded and run without blocking other page processing processes. Even in the head (except for the HTTP link used to download the file).

CSS blocking and JS blocking