http://www.jb51.net/article/77920.htm
探析浏览器执行JavaScript脚本加载与代码执行顺序
附上源代码:动态脚本技术和ajax没有测试
<!DOCTYPE html>
<html>
<head>
<title>js async</title>
<script type="text/javascript">
var s3=document.createElement(‘script‘);
s3.src=‘3.js‘;
var s4=document.createElement(‘script‘);
s4.src=‘4.js‘;
var head=document.getElementsByTagName(‘head‘)[0];
//文档流
document.write("<script type=‘text/javascript‘ src=‘1.js‘><\/script>");
document.write("<script type=‘text/javascript‘ src=‘2.js‘><\/script>");
//内部脚本
document.write("<script type=‘text/javascript‘>console.log(‘in3‘)<\/script>");
console.log(‘in1‘);
document.write("<script type=‘text/javascript‘>console.log(‘in4‘)<\/script>");
//文档流
head.append(s3);
head.append(s4);
</script>
<script type="text/javascript">
document.addEventListener(‘DOMContentLoaded‘,function(){
console.log(‘hahaha‘);
console.log(document.readyState);
})
console.log(‘in2‘);
</script>
</head>
<body>
<h1>js是顺序执行解析</h1>
<p>in1 in2 in3 in4一定在hahaha,interactive之前</p>
<p>out1 out2 out3 out4异步加载,位置不确定,尽管看起来和文档流有关系</p>
<p>in3 in4的写法要注意文档流的输出和位置,确定为1342</p>
</body>
</html>