（十六）JavaScript 异步加载JS 、时间线

最新推荐文章于 2023-03-05 18:54:50 发布

BossNoNo

最新推荐文章于 2023-03-05 18:54:50 发布

阅读量224

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weicy1510/article/details/84817913

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JS 默认是同步加载的，会阻断html、css等后续脚本的加载。

异步加载js时，避免使用 document.write()

实现JS的异步加载：

（1）defer 异步加载，但要等到`dom文档解析完才会被执行`。也可以将代码写在内部。

只有IE能用。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="tools.js" defer="defer"></script>
</head>
<body>
<!-- 或将代码写在内部 -->
<script type="text/javascript" defer="defer">
	console.log('ok');
</script>
</body>
</html>

（2）aysnc 异步加载，`加载完就立即执行`。只能加载外部脚本，不能把js代码写在script标签里。

W3C标准，IE9、现代浏览器支持

<script type="text/javascript" src="tools.js" aysnc="aysnc"></script>

defer 和 aysnc 方法，执行时都不会阻塞页面

（3）动态创建 script

var demo = document.createElement('script');
demo.type = 'text/javascript';
demo.src = 'tools.js'; // 异步 预下载了 tools.js 
document.head.appendChild(demo); // 异步 解析执行 tools.js 里的代码

假如tools.js文件里面有工具方法test()。需要 demo load 之后才能调用。
但是 IE 在script标签上没有 load 事件。

var demo = document.createElement('script');
demo.type = 'text/javascript';

if(demo.readyState){ //IE
	demo.onreadystatechange = function(){ // 绑定事件 readystatechange
		if (demo.readyState == "complete" || demo.readyState == "loaded") {
			test();
		}
	}
}else{ // Chrome、Firefox、Safari、Opera
	demo.onload = function(){ //绑定事件 load
		test();
	}
}

demo.src = 'tools.js'; // 异步预下载了 tools.js 
document.head.appendChild(demo); // 异步解析执行 tools.js 里的代码

封装方法

function loadScripts(url, callback){
	var demo = document.createElement('script');
	demo.type = 'text/javascript';
	if (demo.readyState){ //IE
		demo.onreadystatechange = function(){
			if (demo.readyState == "complete" || demo.readyState == "loaded"){
				callback();
			}
		}
	}else{ // Chrome、Firefox、Safari、Opera
		demo.onload = function(){
			callback();
		}
	}
	demo.src = url;
	document.head.appendChild(demo);
}
// 调用
loadScripts('tools.js', function(){
	test();
});

另一种形式：
假如tools.js文件如下，

var tools = {
	test : function(){
		console.log(1111);
	},
	test2 : function(){
		console.log(2222);
	}
}

function loadScripts(url, callback){
	var demo = document.createElement('script');
	demo.type = 'text/javascript';
	if (demo.readyState){
		demo.onreadystatechange = function(){
			if (demo.readyState == "complete" || demo.readyState == "loaded"){
				tools[callback]();
			}
		}
	}else{
		demo.onload = function(){
			tools[callback]();
		}
	}
	demo.src = url;
	document.head.appendChild(demo);
}
// 调用
loadScripts('tools.js', 'test'); //1111

时间线

（一）创建 Document 对象，开始解析web页面。这个阶段 `document.readyState = 'loading'` 。

（1）遇到link外部css，创建线程加载，并继续解析文档
（2）遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档
（3）遇到script外部js，并且设有async、defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。
（4）遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。

（二）当文档解析完成（DOM树构建完毕），`document.readyState ='interactive'` 。

（1）文档解析完成后，所有设置有defer的脚本会安装顺序执行。
（2）document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段

（三）所有东西加载并执行完之后（所有async的脚本加载完成并执行后、img等加载完成后），`document.readyState ='complete'` ，window对象触发load事件。

console.log(document.readyState);
document.onreadystatechange = function(){
	console.log(document.readyState);
}
document.addEventListener('DOMContentLoaded',function(){
	console.log('DOM树构建完成');
});
//loading
//interactive
//DOM树构建完
//complete