默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
(1) defer，只支持IE
defer属性的定义和用法
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。
如果您的脚本不会改变文档的内容，可将 defer 属性加入到
(2) async：
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用，则会异步执行。
示例： 代码如下:
//async 属性仅适用于外部脚本（只有在使用 src 属性时）。
//有多种执行外部脚本的方法：
•如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
•如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
•如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：
代码如下:
function loadScript(url, callback){
var script = document.createElement_x("script");
script.type = "text/javascript";
if (script.readyState){
//IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||script.readyState == "complete"){
script.onreadystatechange = null;callback();
}
};
} else {
//Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){callback();
};
}
script.src = url;
document.body.appendChild(script);
}
第二个---关于异步加载js的几种方式：
一般而言，javascript脚本一般是建议放在body标签的底部，因为使用script标签加载js时，会停止加载后面的内容而停下来解析脚本并对页面进行渲染，使用src属性加载外部脚本也会造成这样的情况，这样的话，如果在head或者body的前面放入过多的script标签，并且内容很多的时候，会造成页面在解析完所有script标签的内容前有短暂的时间整个页面空白，给用户的体验会很差。但是如果所有的脚本都放在底部，又会造成dom加载完毕后有一段时间页面虽然能看到，但是和用户的交互却很差，因此需要让一些脚本与页面异步加载。
1.在html5中，script新增了async的属性，script添加了该属性之后，下载脚本时将可以与页面其他内容并行下载，但是该属性必须在ie9以上的浏览器中才可以使用，并且只能用于加载外部js脚本。
2.同样，在html4中也有一个defer属性，该属性的兼容性更好一点，但是与async一样，可以让js脚本实现异步加载，同样只能用于加载外部js脚本。
asyc与defer属性的不同点是，async会让脚本在加载完可用时立即执行，而defer脚本则会在dom加载完毕后执行，defer脚本的执行会在window.onload之前，其他没有添加defer属性的script标签之后。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<script> window.onload = function() { console.log("window.onload"); }</script>
<script src="js/defer.js" defer></script>
<script> console.log("normal");</script>
<body>
</body>
</html>
显示的顺序为：normal defer window.onload
3.利用XHR异步加载js内容并执行，
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<script>
var xhr = new XMLHttpRequest();
xhr.open("get", "js/defer.js",true) ;
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
eval(xhr.responseText);
}
}
</script>
<body></body>
</html>
4.动态创建script标签，主要代码如下
var script = document.createElement("script");
script.src = "js/test.js";
document.head.appendChild(script);
该方式还可以通过script的onreadyState监视加载的状态。
5.iframe方式，利用iframe加载一个同源的子页面，让子页面内的js影响当前父页面的一种方式。
第三个----关于js异步加载的几种方式
原文链接 - http://www.cnblogs.com/huangcong/p/3747038.html
方案一、$(document).ready()
需要引入jquery
兼容所有浏览器
$(document).ready(function() {
alert("加载完成！");
});
方案二、<script>标签的async="async"属性
1.async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持
2.async属性规定一旦脚本可用，则会异步执行
3.async属性仅适用于外部脚本
4.此方法不能保证脚本按顺序执行
<script type="text/javascript" src="xxx.js" async="async"></script>
方案三、<script>标签的defer="defer"属性
1.defer属性规定是否对脚本执行进行延迟，直到页面加载为止
2.如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度
3.兼容所有浏览器
4.此方法可以确保所有设置了defer属性的脚本按顺序执行
方案四、动态创建<script>标签
兼容所有浏览器
(function(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://code.jquery.com/jquery-1.7.2.min.js";
var tmp = document.getElementsByTagName('script')[0];
tmp.parentNode.insertBefore(script, tmp);
})();
网友评论