Home > Developer > Web Develop
1. The order of the head is as follows, considering how the request will be affected:
A. External JS in front of CSS
<script src= "1.js" ></script> <link rel= "stylesheet" type= "Text/css" href= "1.css?sleep=5s" > < Linkrel= "stylesheet" type= "Text/css" href= "2.css?sleep=5s" >
B. External JS behind the CSS
<link rel= "stylesheet" type= "Text/css" href= "1.css?sleep=5s" > <link rel= "stylesheet" type= "Text/css" href= " 2.css?sleep=5s "> <script src=" 1.js "></script>
C. Internal JS in front of CSS
<script>/do something </script> <link rel= "stylesheet" type= "Text/css" href= "1.css?sleep=5s" >< Link rel= "stylesheet" type= "Text/css" href= "2.css?sleep=5s" >
D. Internal JS behind the CSS
<link rel= "stylesheet" type= "Text/css" href= "1.css?sleep=5s" > <link rel= "stylesheet" type= "Text/css" href= " 2.css?sleep=5s "> <script>//do something </script>
E. Inline CSS in front of external CSS
<style> body {background:red;} </style> <link rel= "stylesheet" type= "Text/css" href= "1.css?sleep=5s" >F. Inline CSS behind external CSS
<link rel= "stylesheet" type= "Text/css" href= "1.css?sleep=5s" > <style> body {background:red;} </style>Results:
A,b–head in the presence of the external JS, regardless of put, CSS files can not and the request in the body parallel. Add: Dom rendering in body depends on JS execution in head. (Fig. 1)
Inline JS in c–head the CSS file can be parallel to the request in the body as long as it is in front of all the inline CSS (Figure 2)
Inline JS in D–head as long as it is behind any of the outside CSS, the CSS file cannot be parallel to the request in the body. Add: The reason is also to wait for JS to finish (Figure 1)
E–firefox/ie, wait until the 1.CSS load is complete. Safari/chrome, then take effect first, then load 1.CSS
F – and so on 1.css loaded after the effective
2. Inline JS to wait for all the external CSS files in front of it to be executed after loading. Previously wrote a note on the principle of sub-resources.
<link rel= "stylesheet" type= "Text/css" href= "1.css?sleep=5s" > <script> s_time = +new Date; It is not executed until 5s, so it is inaccurate to record the start time here. </script>
3. The external JS is placed at the end of the page, the advanced browser will automatically optimize. Such as:
Firefox/chrome/safari loading is similar to optimized processing. See Figure 3.
4. Inline long execution time JS, regardless of place on the page, will affect the entire page rendering. Test files, such as:
<body> <button id= "bn" >button</ Button><script type= "Text/javascript" > Document.getelementbyidx_x (' bn '). onclick = function () {alert (1);}// Normal render Time Document.body.appendChild (document.createTextNode (+new date-s_time + ' ms));</script> <script>// Perform 5s. Reopen the page (not refresh), the entire page blank 5s. The front DOM structure is rendered normally, but not displayed, and so on after 5s is displayed. </script> </body>In the initial execution phase of the page if there is a long execution time inline JS, the impact on performance is very very serious! However, if the implementation of the 5s JS on the outside will not have the above effect, or moved to Domreay/onload after the execution can be.
According to the above conclusions, the CSS and JS in the Organization page will be more reasonable.
The sequence relation of JS and CSS and the optimization of JS loading execution
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
