也谈内联脚本的位置对性能的影响

最新推荐文章于 2024-08-19 12:54:24 发布

不杂当下

最新推荐文章于 2024-08-19 12:54:24 发布

阅读量2.4k

点赞数

分类专栏： javascript 文章标签：脚本 2010 stylesheet date javascript 测试

本文链接：https://blog.csdn.net/wangjj_016/article/details/5498824

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

看了两篇文章（内联脚本的位置对性能的影响， Positioning Inline Scripts ），对自己的常规习惯有些颠覆，将信将疑，为了解开疑惑做了测试，测试代码如下：<body> <div id="debug"> </div> <script type="text/javascript"><script> <link rel="stylesheet" id="skin" type="text/css" οnlοad="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" οnlοad="styleOnload('inline style')"><style><style id="inlineStyle" type="text/css" οnlοad="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"><script> <mce:script οnlοad="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 οnlοad="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 οnlοad="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"><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前面，提前预解析脚本挂起执行，这样后面资源的加载稍微提前。