You are here
也谈内联脚本的位置对性能的影响
看了两篇文章（内联脚本的位置对性能的影响 ， Positioning Inline Scripts ），对自己的常规习惯有些颠覆，将信将疑，为了解开疑惑做了测试，测试代码如下：
- <body>
- <div id="debug">
- </div>
- <script type="text/javascript"><!--
- debug("["+formatDate(start)+"]"+"HTML start");
- document.write("<div id='test11'>测试</div>");
- // --><script>
- <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" />
- <style id="inlineStyle" type="text/css" onload="styleOnload('inline style')"><!--
- .hui2010{background:url(http://i0.jrjimg.cn/homev2/2010lh/lhad.gif) no-repeat;padding:0 8px 0 6px}
- .hui2010_lk{display:block;width:75%;margin-left:20px;height:29px;text-indent:-9999px;}
- .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}
- .clear{clear:both;overflow:hidden}
- #debug{font-size:14px;text-align:left;}
- #test11{position:absolute;left:500px;top:10px;width:100px;height:100px;border:1px solid red;}
- --><style><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}
- .hui2010_lk{display:block;width:75%;margin-left:20px;height:29px;text-indent:-9999px;}
- .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}
- .clear{clear:both;overflow:hidden}
- #debug{font-size:14px;text-align:left;}
- #test11{position:absolute;left:500px;top:10px;width:100px;height:100px;border:1px solid red;}</style>
- <script type="text/javascript"><!--
- debug("["+formatDate(new Date())+"]"+"inline script start");
- var injs_now = Number(new Date()); while( injs_now + (3*1000) > Number(new Date()) ) { var tmp = injs_now; }//执行持续三秒
- debug("["+formatDate(new Date())+"]"+"inline script end");
- // --><script>
- <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>
- <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>
- <img onload="imgOnload('1_100325043702_1.jpg')" src="http://www.meinvnv.com/uploads/allimg/100325/1_100325043702_1.jpg" mce_src="http://www.meinvnv.com/uploads/allimg/100325/1_100325043702_1.jpg"/>
- <mce:script type="text/javascript"><!--
- var end = new Date();
- debug("["+formatDate(end)+"]"+"html end");
- debug("页面加载时间："+ (end.getTime() - start.getTime()));
- // --><script>
- </body>
测试结果
页面加载所需时间（不包括图片用时），毫秒：
script 放在style后
ie6 ： 3250 3266 3141 3140 3250 3281 3219 3234
ff3.6 ： 3094 和发放在之前基本相同
script 放在style前
ie6 ： 3203 3250 3282 3187 3219 3141 3297 3266
ff3.6 ： 3098 3017 3137 3121 3098 3127 3157 3257 3287
分析
原文给出的分析：所有主流浏览器都会保持CSS和JavaScript的顺序。在样式表完全下载、解析及应用之后，内联脚本才能执行。
同时，必须在内联脚本执行后，剩余资源才能下载。这就使得，放在样式表和内联脚本之后的资源，下载被阻塞了。
从测试数据看script 放在style前后基本没什么差别。CSS和JavaScript确实是顺序加载，但内联脚本是否在样式表应用之后才执行，IE6和FF不同。IE6是先 执行的然后在叠加应用样式表，FF则是在样式表应用之后才执行的。这点可以从
debug("["+formatDate(start)+"]"+"HTML start");
document.write("<div id='test11'>测试</div>");
的执行可以看出，IE6先执行，过了3秒才给test11叠加样式，而FF卡了三秒才执行，且test11的输出和样式应用是同步的。
不考虑浏览器差异从原文的分析推理，内联脚本在样式表应用之后才能执行， 内联脚本执行肯定会暂停剩余资源的加载，内联脚本放在哪执行都会暂停资源下载，那么就应该先保证样式的加载应用，避免脚本执行受阻。
但是岁月如歌说的100ms的时间差可能处在什么地方，怎么后面的资源就并行下载了呢？我觉得可能是这样，内联脚本放在style前面，提前预解析脚本挂起执行，这样后面资源的加载稍微提前。