<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>defer attribute test</title> <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript">var test = "";</script> <script src="https://www.jb51.net/defer1.js" type="text/javascript" defer="defer"></script> <script src="https://www.jb51.net/article/1.js" type="text/javascript"></script> <script defer="defer"> test += "我是head延迟内部脚本\n"; </script> <script> test += "我是head内部脚本\n"; </script> </head> <body> <button>点击一下</button> <script src="https://www.jb51.net/defer2.js" type="text/javascript" defer="defer"></script> <script src="https://www.jb51.net/article/2.js" type="text/javascript"></script> </body> <script src="https://www.jb51.net/defer3.js" type="text/javascript" defer="defer"></script> <script src="https://www.jb51.net/article/3.js" type="text/javascript"></script> <script> $(function(){ test += "我是DOMContentLoaded里面的脚本\n"; }) window.onload = function(){ test += "我是window.onload里面的脚本\n"; var button = document.getElementById("test"); button.onclick = function(){ alert(test); } } </script> </html>
代码中，为了方便实现DOMContentLoaded事件，我们引入了jQuery(之后的文章还会再介绍如何自己实现兼容的DOMContentLoaded)，然后，我们在脚本的head内、body内部和body外部分别引入延迟脚本和正常脚本，并且通过一个全局的字符串来记录每一段代码的执行状态，我们看一下各个浏览器中的执行结果：
IE7
IE9
IE10
CHROME
firefox
我是head外部脚本 我是head外部脚本 我是head外部脚本 我是head外部脚本
我是head内部脚本
我是body外部脚本
我是底部外部脚本
我是head外部延迟脚本
我是head延迟内部脚本
我是body外部延迟脚本
我是底部外部延迟脚本
我是DOMContentLoaded里面的脚本
我是window.onload里面的脚本
我是head内部脚本
我是body外部脚本
我是底部外部脚本
我是head外部延迟脚本
我是head延迟内部脚本
我是body外部延迟脚本
我是底部外部延迟脚本
我是DOMContentLoaded里面的脚本
我是window.onload里面的脚本
我是head延迟内部脚本
我是head内部脚本
我是body外部脚本
我是底部外部脚本
我是head外部延迟脚本
我是body外部延迟脚本
我是底部外部延迟脚本
我是DOMContentLoaded里面的脚本
我是window.onload里面的脚本
我是head延迟内部脚本
我是head内部脚本
我是body外部脚本
我是底部外部脚本
我是head外部延迟脚本
我是body外部延迟脚本
我是底部外部延迟脚本
我是DOMContentLoaded里面的脚本
我是window.onload里面的脚本
我是head外部脚本
我是head延迟内部脚本
我是head内部脚本
我是body外部脚本
我是底部外部脚本
我是head外部延迟脚本
我是body外部延迟脚本
我是底部外部延迟脚本
我是DOMContentLoaded里面的脚本
我是window.onload里面的脚本
从输出的结果中我们可以确定，只有IE9及以下浏览器支持内部延迟脚本，并且defer后的脚本都会在DOMContentLoaded事件之前触发，因此也是会堵塞DOMContentLoaded事件的。
2.4 DEMO：IE<=9的defer特性bug