CSS blocking and JS blocking __js

JS blocking features: All browsers in the download JS, will prevent all other activities, such as other resources download, content rendering and so on. It is not until JS downloads, parses, and executes that it continues to download other resources in parallel and renders content. In order to improve the user experience, the next generation of browsers support the parallel download JS, but JS downloads will still block other resources download (for example, pictures, CSS files, etc.).

Because browsers need to rebuild the DOM tree in order to prevent JS from modifying the DOM tree, other downloads and rendering are blocked.

Embedding JS blocks the rendering of all content, and external JS only blocks the display of subsequent content, and 2 ways will block subsequent downloads of resources. That is, the external style does not block the loading of the external script, but it blocks the execution of the external script.

How can CSS block load. CSS can be downloaded in parallel, under what circumstances will be blocked load (in the test observation, IE6 under the CSS are blocked loading)

When the CSS followed by embedded JS, the CSS will be blocked after the download of resources. And when the embedded JS in front of the CSS, there will be no blocking situation.

Root cause: Because browsers maintain the order of CSS and JS in HTML, stylesheets must be loaded and parsed before the embedded JS is executed. and embedded JS will block the subsequent load of resources, so there will be the above CSS blocking downloads.

Embed JS should be placed in what position.

   1, put at the bottom, although put at the bottom will block all rendering, but will not block the resource download.

   2, if embedded in the head of JS, please embed JS in the CSS header.

   3, the use of defer (only support IE)

   4, do not embed in the JS to invoke a long run of functions, if you must use, you can use ' settimeout ' to call