Home > Developer > Web Develop
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);
</script>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.
Suggestions: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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
