CSS, JS blocking each other

Source: Internet
Author: User

Prerequisites: An external style exists before the script

The following tests, although under Chrome, are also available for ie8+ and other browsers.

1. Inline script (HTTP://JSBIN.COM/MUDAB/1)

<! DOCTYPE html>"Utf-8"> <title>js bin</title> <script>varStart = +NewDate;</script> <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2"Rel="stylesheet"> <script>
varEnd = +NewDate;
Console.log (End-start);

Console printing results >2000, it can be concluded that the external style will block the execution of the later inline script.

2. Blocked external script (HTTP://JSBIN.COM/QELIRI/1)

<!DOCTYPE HTML><HTML><Head>  <MetaCharSet= "Utf-8">  <title>JS Bin</title>  <Script>varStart= +NewDate;</Script>  <Linkhref= "http://udacity-crp.herokuapp.com/style.css?rtt=2"rel= "stylesheet">  </Head>  <Body>Test<Scriptsrc= "Http://udacity-crp.herokuapp.com/time.js?rtt=1&a"></Script>  <DivID= "Result"></Div>  <Script>varEnd= +NewDate;document.getelementbyid ("result"). InnerHTML=End-start;</Script>  </Body></HTML>

Waterfall flow can be seen in the script and CSS parallel loading, but from the JS execution results (JS execution results and print time basically at the same time, can be equivalent to JS execution time) greater than 2000, you can conclude: the external style does not prevent the subsequent external script loading, However, the execution of the external script must wait until the CSS has finished loading. This means that external styles do not block the loading of external scripts, but they block the execution of external scripts.

3. Asynchronous execution external script (HTTP://JSBIN.COM/VELAT/1)

Note: Ie6-9 does not support async (ie supports defer).

<!DOCTYPE HTML><HTML><Head>  <MetaCharSet= "Utf-8">  <title>JS Bin</title>  <Script>varStart= +NewDate;</Script>  <Linkhref= "http://udacity-crp.herokuapp.com/style.css?rtt=2"rel= "stylesheet">  </Head>  <Body>Test<Scriptsrc= "Http://udacity-crp.herokuapp.com/time.js?rtt=1&a"Async></Script>  <DivID= "Result"></Div>  <Script>varEnd= +NewDate;document.getelementbyid ("result"). InnerHTML=End-start;</Script>  </Body></HTML>

Script execution Results >1000&&<2000, from the waterfall stream you can see that the script is loaded in parallel with CSS, indicating that there is no blocking at this time. for scripts with async attributes, the external CSS is not blocked.

4. Asynchronous-loaded external script (HTTP://JSBIN.COM/ZUVUCE/1)

<!DOCTYPE HTML><HTML><Head>  <MetaCharSet= "Utf-8">  <title>JS Bin</title>  <Script>varStart= +NewDate;</Script>  <Linkhref= "http://udacity-crp.herokuapp.com/style.css?rtt=2"rel= "stylesheet">  </Head>  <Body>Test<Script>     varScript=Document.createelement ('Script'); SCRIPT.SRC= "Http://udacity-crp.herokuapp.com/time.js?rtt=1&a"; document.getElementsByTagName ('Head')[0].appendchild (script); </Script>  <DivID= "Result"></Div>  <Script>varEnd= +NewDate;document.getelementbyid ("result"). InnerHTML=End-start;</Script>  </Body></HTML>

Script execution results are greater than 3000, as can be seen from the waterfall stream, under the influence of the inline script is blocked (1), JS start loading time after the CSS loaded. Conclusion as in the first article.


1, the script should be placed in front of the external CSS, whether the script is inline or external;

2, if possible, the external CSS is best to directly inline to the page.

Ps:css does not block downloads of resources such as images, but it can affect the rendering of the body content (HTTP://JSBIN.COM/JOKOPA/1).

Reference article:

script-injected "Async Scripts" considered harmful

The effect of the location of JS and CSS on the loading order of other resources

The sequential relationship between JS and CSS

Properly including stylesheets and scripts

To remove JavaScript that is blocking rendering

Thinking Async

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.