2009十二月16
含有defer属性的js脚本在IE下的执行顺序
关于JavaScript的defer属性的文档，网上一抓一大把。不过你知道含有defer属性的js脚本在IE下的执行顺序吗？
昨天找到一篇优秀的文章，里面有个很棒的例子，可是我越看越糊涂，这个defer属性的js脚本到底是按什么顺序在IE下面执行的呢？
defer现象描述
从这里了解到 http://www.websiteoptimization.com/speed/tweak/defer/ defer属性在ie下的表现是一件挺有意思的事情，具体大家可以看下面的例子。
该例子是从 http://www.websiteoptimization.com/speed/tweak/defer/test/ 这里扒下来的，不过去掉了DOCTYPE声明，因为其原来是采用XHTML声明的，与我们常用的不符，太过严格了些。
测试代码
<HTML><HEAD><TITLE>JavaScript defer attribute test page - tests deferring scripts in browsers</TITLE>
<SCRIPT language=JavaScript type=text/javascript>
<!--
var msg = "";
//-->
</SCRIPT>
<!-- 这里是内部defer 先暂缓执行，一直往下走-->
<SCRIPT language=JavaScript defer type=text/javascript>
<!--
msg += "Inline Head Deferred\n";
//-->
</SCRIPT>
<!-- 没有defer 最先被执行 -->
<SCRIPT language=JavaScript type=text/javascript>
<!--
msg += "Inline Head\n";
//-->
</SCRIPT>
<!-- 外链defer 肯定是最后执行的-->
<SCRIPT language=JavaScript src="defer.files/extjs1.js" defer
type=text/javascript></SCRIPT>
<!-- head内的外链，无所谓，从上往下被顺序执行，也就是第二个被执行的-->
<SCRIPT language=JavaScript src="defer.files/extjs2.js"
type=text/javascript></SCRIPT>
<BODY class=av>
<!--body 内的defer 先暂缓执行 程序继续往下走-->
<SCRIPT language=JavaScript defer type=text/javascript>
<!--
msg += "Inline Body Deferred\n";
//-->
</SCRIPT>
<!--body内的语句，程序执行到这里，这是第三个被执行的 -->
<SCRIPT language=JavaScript type=text/javascript>
<!--
msg += "Inline Body\n";
//-->
</SCRIPT>
<A onclick="alert(msg);return false;"
href="javascript:;">Test Defer Attribute</A>
<!-- 这里面有外链，且有defer，但是上面的defer应该执行了 这个语句接着往下放到head外链defer的下面-->
<SCRIPT language=JavaScript src="defer.files/extjs3.js" defer
type=text/javascript></SCRIPT>
<!-- 这里是外链-->
<SCRIPT language=JavaScript src="defer.files/extjs4.js"
type=text/javascript></SCRIPT>
</BODY></HTML>
<SCRIPT language=JavaScript type=text/javascript>
<!--
var msg = "";
//-->
</SCRIPT>
<!-- 这里是内部defer 先暂缓执行，一直往下走-->
<SCRIPT language=JavaScript defer type=text/javascript>
<!--
msg += "Inline Head Deferred\n";
//-->
</SCRIPT>
<!-- 没有defer 最先被执行 -->
<SCRIPT language=JavaScript type=text/javascript>
<!--
msg += "Inline Head\n";
//-->
</SCRIPT>
<!-- 外链defer 肯定是最后执行的-->
<SCRIPT language=JavaScript src="defer.files/extjs1.js" defer
type=text/javascript></SCRIPT>
<!-- head内的外链，无所谓，从上往下被顺序执行，也就是第二个被执行的-->
<SCRIPT language=JavaScript src="defer.files/extjs2.js"
type=text/javascript></SCRIPT>
<BODY class=av>
<!--body 内的defer 先暂缓执行 程序继续往下走-->
<SCRIPT language=JavaScript defer type=text/javascript>
<!--
msg += "Inline Body Deferred\n";
//-->
</SCRIPT>
<!--body内的语句，程序执行到这里，这是第三个被执行的 -->
<SCRIPT language=JavaScript type=text/javascript>
<!--
msg += "Inline Body\n";
//-->
</SCRIPT>
<A onclick="alert(msg);return false;"
href="javascript:;">Test Defer Attribute</A>
<!-- 这里面有外链，且有defer，但是上面的defer应该执行了 这个语句接着往下放到head外链defer的下面-->
<SCRIPT language=JavaScript src="defer.files/extjs3.js" defer
type=text/javascript></SCRIPT>
<!-- 这里是外链-->
<SCRIPT language=JavaScript src="defer.files/extjs4.js"
type=text/javascript></SCRIPT>
</BODY></HTML>
有图有真相
执行结果如图：
ie6_defer
firefox_defer
结论
- 内部defer 遇到 body区域中的 外链javascript语句的时候（无论该外链是否含有defer属性），会开始执行，然后才会继续执行外链的内容但是偶尔会有将外部的语句也先执行（部分情况，偶尔能碰到，情况不多）
- 外链的含有defer属性的javascript脚本最后执行（按照从上到下的顺序）
在线演示
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/12/16/1669/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
什么玩意嘛，没听说过，我又回归了，博客所在的机房又停了几天，实在是郁闷啊
[回复]
@Cherry
呵呵，我去参加婚礼了，刚回来。
PS:那个东西是js的，如果不了解也是正常啊。
[回复]