javascript 文件的同步加载与异步加载实现原理


Posted in Javascript onDecember 13, 2012

HTML 4.01 的script属性
charset: 可选。指定src引入代码的字符集,大多数浏览器忽略该值。
defer: boolean, 可选。延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行。除IE和较新版本的Firefox外,其他浏览器并未支持。
language: 已废弃。大部分浏览器会忽略该值。
src: 可选。指定引入的外部代码文件,不限制后缀名。
type: 必选。指定脚本的内容类型(MIME类型)。现实中通常不指定该值也可以,浏览器会默认当作text/javascript类型来解释执行。

HTML5中的script属性
script 标签在HTML5中除了具备HTML5新标准定义的属性以外,和HTML4.01相比移除了language属性,修改了type属性为可选的(默认text/javascript),并新增了一个属性async。
async :boolean, 属性的作用,定义脚本是否异步执行,取值true或false。
如果 async 设为 true ,会忽略 defer 属性。
异步执行的 js 文件被假定为不使用 document.write() 向加载中的 document 写入内容,因此不要在 异步执行的 js 文件的加载执行过程中使用 document.write()
除了 script 标签属性外,页面引入 js 文件的方式影响其加载执行方式:
任何以添加 script 节点(例如 appendChild(scriptNode) ) 的方式引入的js文件都是异步执行的 (scriptNode 需要插入document中,只创建节点和设置 src 是不会加载 js 文件的,这跟 img 的预加载不能类比 )
html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的
html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的
html文件中的<script>标签src属性所引用的js文件的代码内再使用document.write()方式引入的js文件是同步执行的
使用 Image 对象异步预加载 js 文件(不会被执行)

不要使用类似下面这种做法,这样并不会发起加载 js 文件的请求:
divNode.innerHTML = '<script src="xxx.js"></script>';
window.onload 事件会在 js 文件加载完毕才触发(即使是异步加载)
=====================================================
1、
<script>
//同步加载执行的代码
</script>
2、
<script src="xx.js"></script> //同步加载执行xx.js中的代码
3、
<script>
document.write('<script src="xx.js"><\/script>'); //异步加载执行xx.js中的代码
</script>
4、
<script src="xx.js"></script>
xx.js中有下面代码:

document.write('<script src="11.js"><\/script>'); 
document.write('<script src="22.js"><\/script>');

则xx.js和11.js、22.js 都是同步加载和执行的。
如果 xx.js 、11.js 和 22.js 以插入 script 节点方式异步加载,则 11.js 和 22.js 是异步加载的,
如果 xx.js 以script 节点方式异步加载, 11.js 和 22.js 以 document.write(script) 方式加载,则 11.js 和 22.js 是同步加载的(经最新的浏览器测试, 在chrome 下,xx.j 异步加载执行已经无法使用 document.write() 向文档写入内容的 ,但是 firefox 和IE 却可以在 document 关闭之前写入(方法是在 html 中alert阻止文档关闭))
测试:在11.js中 alert()(不要用 for 循环,浏览器是单线程执行的,持续执行任何一段代码都会导致其余代码被阻塞) , 22.js 中 console.log() ,可以看到 22.js中的代码被阻塞
5、
下面这种方式,xx.js会在appendChild执行之后异步加载执行
var script = document.createElement("script"); 
script.setAttribute("src","xx.js"); 
documenrt.getElementsByTagName("head")[0].appendChild(script);

6、使用 Image 对象异步预加载 js 文件(不会被执行)
Image 的 src 被赋值时即发起请求,而且对文件类型不挑剔(图片也可能是有脚本动态创建的,比如验证码),因此可以将 js 文件的 url 赋给 image.src, js 加载之后被浏览器缓存.
var img = new Image(); 
img.onload = function(){ alert(1); } ; //由于返回的js文件 MIME 不是图片,onload回调函数并不会被触发 
img.src = 'http://localhost/test/loadjs/try.2.js'; 
var s = document.createElement("script"); 
var h = document.getElementsByTagName("head")[0]; 
//执行 js 
s.src=img.src; 
h.appendChild(s);

一个加载 js 文件的 函数:
var loadJS = function(url,callback){ 
var head = document.getElementsByTagName('head'); 
if(head&&head.length){ 
head = head[0]; 
}else{ 
head = document.body; 
} 
var script = document.createElement('script'); 
script.src = url; 
script.type = "text/javascript"; 
head.appendChild( script); 
script.onload = script.onreadystatechange = function(){ 
//script 标签,IE 下有 onreadystatechange 事件, w3c 标准有 onload 事件 
//这些 readyState 是针对IE8及以下的,W3C 标准的 script 标签没有 onreadystatechange 和 this.readyState , 
//文件加载不成功 onload 不会执行, 
//(!this.readyState) 是针对 W3C标准的, IE 9 也支持 W3C标准的 onload 
if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ 
callback(); 
} 
}//end onreadystatechange 
}

对于第4点的测试(同步加载)(其中插入 alert 很容易看到加载时的阻塞)
tryjs.html
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="tryjs.js" 
onload="if(!document.all){console.log('outer js callback, not IE');}" 
onreadystatechange="console.log('outer js callback ',this.readyState,' IE');"></script> 
<body> 
</body> 
</html>

tryjs.js
console.log('write begin'); 
document.write('<script src="try.1.js" onreadystatechange="console.log(\'file 1 callback \',this.readyState,\' IE\');" onload="if(!document.all){console.log(\'file 1 callback,NOT IE \');}"><\/script>'); 
document.write('<script src="try.2.js" onreadystatechange="console.log(\'file 2 callback \',this.readyState,\' IE\');" onload="if(!document.all){console.log(\'file 2 callback,NOT IE \');}"><\/script>'); 
console.log('write finished');

try.1.js
console.log('loadjs 1 begin'); 
console.log('loadjs 1 finished');

try.2.js
console.log('loadjs 2 begin'); 
console.log('loadjs 2 finished');

测试结果(file 2 和 file 1 的 callback complete 在IE7\8\9次序不确定)
IE 7:
日志: outer js callback loading IE
日志: outer js callback loaded IE
日志: write begin
日志: write finished
日志: outer js callback complete IE
日志: file 1 callback loading IE
日志: file 2 callback loading IE
日志: loadjs 1 begin
日志: loadjs 1 finished
日志: loadjs 2 begin
日志: loadjs 2 finished
日志: file 2 callback complete IE
日志: file 1 callback complete IE

IE8:
日志: outer js callback loading IE
日志: outer js callback loaded IE
日志: write begin
日志: write finished
日志: outer js callback complete IE
日志: file 1 callback loading IE
日志: file 2 callback loading IE
日志: loadjs 1 begin
日志: loadjs 1 finished
日志: loadjs 2 begin
日志: loadjs 2 finished
日志: file 2 callback complete IE
日志: file 1 callback complete IE

IE9:
日志: write begin
日志: write finished
日志: outer js callback complete IE
日志: file 1 callback loading IE
日志: file 2 callback loading IE
日志: loadjs 1 begin
日志: loadjs 1 finished
日志: loadjs 2 begin
日志: loadjs 2 finished
日志: file 1 callback complete IE
日志: file 2 callback complete IE

FIREFOX:
write begin
write finished
outer js callback, not IE
loadjs 1 begin
loadjs 1 finished
file 1 callback,NOT IE
loadjs 2 begin
loadjs 2 finished
file 2 callback,NOT IE

CHROME:
write begin
write finished
outer js callback, not IE
loadjs 1 begin
loadjs 1 finished
file 1 callback,NOT IE
loadjs 2 begin
loadjs 2 finished
file 2 callback,NOT IE

Javascript 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
javaScript复制功能调用实现方案
Dec 13 #Javascript
js遍历td tr等html元素
Dec 13 #Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 #Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 #Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 #Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 #Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 #Javascript
You might like
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python引用计数操作示例
2018/08/23 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
django框架创建应用操作示例
2019/09/26 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
2015年小学图书室工作总结
2015/05/18 职场文书
红歌会主持词
2015/07/02 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技