Where will the CSS block, and where the JS block will appear?

jBlocking characteristics of S:

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 changing the DOM tree, other downloads and renders are blocked.

* Embedded 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 resources.

This means that external styles do not block the loading of external scripts, but they block the execution of external scripts.

How does a CSS block load?

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 appear blocking the download of the resources behind the situation;

* And when embedding 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 embedded in the JS before the execution of the load, parse out.

* While Embedded JS will block the subsequent loading of resources, so there will be 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. Using defer (ie only)

4, do not in the embedded JS call long-running function, if must be used, you can use ' setTimeout ' to invoke

Where will the CSS block, and where the JS block will appear?