首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 文件的同步加载与异步加载实现原理

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
Vue.js仿Metronic高级表格（二）数据渲染
Apr 19 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
小白教程|一小时上手最流行的前端框架vue（推荐）
Apr 10 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
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
expdp(1) 腾讯云(1) Foreign Key(1) Vite(1) 内存池(1) queue(1) JDK(1) 数据备份(2) 外键约束(1) 云服务器(1)
You might like
模拟SQLSERVER的两个函数：dateadd(),datediff()
2006/10/09 PHP
php循环输出数据库内容的代码
2008/05/24 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
使用JS监听键盘按下事件（keydown event）
2019/11/07 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Python中matplotlib中文乱码解决办法
2017/05/12 Python
python enumerate函数的使用方法总结
2017/11/15 Python
使用python编写监听端
2018/04/12 Python
Python制作exe文件简单流程
2019/01/24 Python
Python shelve模块实现解析
2019/08/28 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
基于python3的socket聊天编程
2020/02/17 Python
python绘制高斯曲线
2021/02/19 Python
英国领先的票务代理商之一：The Ticket Factory
2019/02/09 全球购物
日本乐天德国站：Rakuten.de
2019/05/16 全球购物
会计大学生职业生涯规划书范文
2014/01/13 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
小区文明倡议书
2014/05/16 职场文书
网站出售协议书范文
2014/10/10 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2014年监理个人工作总结
2014/12/11 职场文书