I read two articles (the impact of inline script location on performance)
,
Positioning inline scripts
), I'm a little excited about my regular habits and will be skeptical. To solve the problem, I did a test. The test code is as follows:<Body> <br/> <Div id = "debug"> <br/> </div> <br/> <SCRIPT type = "text/JavaScript"> <! -- </P> <p> debug ("[" + formatdate (start) + "]" + "HTML start"); <br/> document. write ("<Div id = 'test11'> test </div> "); <br/> // --> <SCRIPT> <br/> <LINK rel = "stylesheet" id = "skin" type = "text/CSS" onLoad = "linkonload (' skin ') "href =" http://www.jrj.com.cn/homev2/main/css.css "mce_href =" http://www.jrj.com.cn/homev2/main/css.css "/> <br/> <style id =" inlinestyle "type =" text/CSS "onLoad =" styleonload ('inlinestyle') "> <! -- <Br/>. hui2010 {Background: URL (http://i0.jrjimg.cn/homev2/2010lh/lhad.gif) No-Repeat; padding: 0 8px 0 6px} <br/>. hui2010_lk {display: block; width: 75%; margin-left: 20px; Height: 29px; text-indent:-9999px ;}< br/>. hui2010. in {Background: URL (http://i0.jrjimg.cn/homev2/2010lh/bglhad.gif) Repeat-X; Height: 141px; padding: 9px 0 0 9px; Border: 1px solid # febf29; overflow: hidden} <br/>. clear {clear: Both; overflow: hidden} <Br/> # debug {font-size: 14px; text-align: Left ;}< br/> # test11 {position: absolute; left: 500px; top: 10px; width: 100px; Height: 100px; Border: 1px solid red ;} <br/> --> <style id = "inlinestyle" type = "text/CSS" onLoad = "styleonload ('inline style ') "mce_bogus =" 1 ">. hui2010 {Background: URL (http://i0.jrjimg.cn/homev2/2010lh/lhad.gif) No-Repeat; padding: 0 8px 0 6px} <br/>. hui2010_lk {display: block; width: 75%; margin-le FT: 20px; Height: 29px; text-indent:-9999px ;}< br/>. hui2010. in {Background: URL (http://i0.jrjimg.cn/homev2/2010lh/bglhad.gif) Repeat-X; Height: 141px; padding: 9px 0 0 9px; Border: 1px solid # febf29; overflow: hidden} <br/>. clear {clear: Both; overflow: hidden} <br/> # debug {font-size: 14px; text-align: Left ;}< br/># test11 {position: absolute; left: 500px; top: 10px; width: 100px; Height: 100px; Border: 1px solid red ;}</style> <br /> <SCRIPT type = "text/JavaScript"> <! -- <Br/> debug ("[" + formatdate (new date () + "]" + "inline script start "); <br/> var injs_now = Number (new date (); While (injs_now + (3*1000)> Number (new date () {var TMP = injs_now ;} // The execution lasts for three seconds <br/> debug ("[" + formatdate (new date () + "]" + "inline script end "); <br/> // --> <SCRIPT> <br/> <MCE: script onload = "scriptonload ('jquery ', this)" onreadystatechange = "scriptonload ('jquery ', this) "src =" http://js.jrj.com. CN/lib/jquery. JS "mce_src =" http://js.jrj.com.cn/lib/jquery.js "> </MCE: SCRIPT> <br/> <MCE: script onload =" scriptonload ('searchbox', this) "onreadystatechange =" scriptonload ('searchbox', this) "src =" http://js.jrj.com.cn/lib/ui/SearchBox-min.js "mce_src =" http://js.jrj.com.cn/lib/ui/SearchBox-min.js "> </MCE: SCRIPT> <br/> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> var end = new date (); <br/> debug ("[" + formatdate (end) + "]" + "HTML end "); <br/> debug ("page loading time:" + (end. gettime ()-start. gettime (); <br/> // --> <SCRIPT> <br/> </body>
Test Results
Time required for page loading (excluding images), in milliseconds:
Put the script behind the style
IE6: 3250 3266 3141 3140 3250 3281 3219 3234
Ff3.6: 3094 is basically the same as before.
Put the script before the style
IE6: 3203 3250 3282 3187 3219 3141 3297 3266
Ff3.6: 3098 3017 3137 3121 3098 3127 3157 3257
Analysis
Analysis given in the original article: all mainstream browsers maintain the CSS and JavaScript order. Inline scripts can be executed only after the style sheet is completely downloaded, parsed, and applied.
At the same time, the remaining resources can be downloaded only after the inline script is executed. This makes the download of resources placed after the style sheet and inline script blocked.
From the test data, there is basically no difference between the script and the style. CSS and JavaScript are loaded sequentially, but whether the inline script is executed after the style sheet is applied is different from IE6 and ff. IE6 is executed first and then superimposed on the apply style sheet, FF is executed only after the apply style sheet. This can be achieved from
Debug ("[" + formatdate (start) + "]" + "HTML start ");
Document. Write ("<Div id = 'test11'> test </div> ");
We can see that IE6 is executed first. After 3 seconds, the style is superimposed on test11, and FF is executed three seconds, and the output and style application of test11 are synchronized.
Without considering the analysis and reasoning of browser differences from the original text, the inline script can be executed only after the style sheet is applied. The Inline script execution will definitely pause the loading of the remaining resources, when an inline script is placed, resource download will be suspended. Therefore, you should first ensure that the style is loaded to the application to avoid blocking script execution.
However, where is the time difference of MS, as Song said? How can resources be downloaded in parallel? I think this may be the case. The Inline script is placed in front of the style, and the pre-parsing script is suspended for execution in advance, so that the subsequent resource loading is a little ahead of schedule.
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
