javascript 文件同步加载与异步加载有什么不同？

类型：同步备份大小：33.2M语言：中文评分：10.0
标签：

立即下载

js文件同步加载

须先加载的js文件的尾部，加上如下相关代码，可以达到同步加载多个js文件的效果：
var oHead = document.getElementsByTagName('body').item(0);
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = "../middleService/deptEnter/js/UI_index.js";
oHead.appendChild(oScript

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 文件的方式影响其加载执行方式：

任何以appendChild(scriptNode) 的方式引入的js文件都是异步执行的 (scriptNode 需要插入document中，只创建节点和设置 src 是不会加载 js 文件的，这跟 img 的预加载不能类比 )

html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的

html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的

html文件中的<script>标签src属性所引用的js文件的代码内再使用document.write()方式引入的js文件是同步执行的

不要使用类似下面这种做法，这样并不会发起加载 js 文件的请求：

divNode.innerHTML = '<script src="xxx.js"></script>';

=====================================================

1、

//同步加载执行的代码

</script>

2、

3、

document.write('<script src="xx.js"><\/script>'); //异步加载执行xx.js中的代码

</script>

4、

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 仍然是同步加载的（异步中的同步，即，这2个文件的加载是分先后次序的）

测试：在11中 alert, 22中 document.write() ,可以看到 22中写入语句被阻塞

5、

下面这种方式，xx.js会在appendChild执行之后异步加载执行

var script = document.createElement("script");

script.setAttribute("src","xx.js");

documenrt.getElementsByTagName("head")[0].appendChild(script);

一个加载 js 文件的函数：

对于第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