码迷,mamicode.com
首页 > Web开发 > 详细

浏览器js加载和执行顺序

时间:2017-09-06 14:28:48      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:eve   源代码   list   ajax   state   异步加载   creat   name   doc   

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>

 

浏览器js加载和执行顺序

标签:eve   源代码   list   ajax   state   异步加载   creat   name   doc   

原文地址:http://www.cnblogs.com/callmeguxi/p/7484253.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!