javascript异步加载

✪憑星月✪

已于 2022-05-10 20:37:43 修改

阅读量727

点赞数

分类专栏： javascript学习笔记文章标签： javascript 前端

于 2022-05-10 20:15:54 首次发布

本文链接：https://blog.csdn.net/qq_61716556/article/details/124674143

版权

javascript学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这里先解释html在浏览器的一般加载流程。

用户输入搜索内容，浏览器发送搜索内容到服务器，服务器返回html文件。这个过程十分复杂，包含多个层次的数据传输。这里只讨论js代码加载，不再展开。
浏览器加载html文档，也就是绘制DOM树。绘制DOM树按照深度优先原则，在html标签的基础上，先加载head标签，再加载head标签中的meta标签，mate标签内部没有其他元素，再加载title标签·····
在加载到head标签内部的link标签时，浏览器向指定的服务器请求css文件，等待服务器返回css文件。这里注意，一直到css文件下载完成后浏览器才会进行针对CSS的渲染，这个下载CSS的过程中浏览器会继续进行html文档的加载(DOM树的绘制)。
在加载到img标签引入的图片时，浏览器向服务器发送请求，同时进行图片的下载和后续文档的加载。这时浏览器已经加载出了img元素，但图片并未下载。在后续文档加载的某一刻，图片下载完成，浏览器重新整理以上因图片出现而改变的页面样式。
在加载到js代码时，浏览器直接下载并执行js代码，执行完毕后继续进行后续页面加载。js下载和执行过程中DOM树停止绘制。若这里js代码改变html页面或样式时，浏览器重新渲染页面。
页面加载完毕后，若某js事件改变页面样式，浏览器重新渲染页面。

这里有笔者的一篇笔记(从另一角度说明js加载)

js加载时间线

1. 创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’。

2. 遇到link外部css，创建线程加载，并继续解析文档。

3. 遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。

4. 遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）

5. 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。

6. 当文档解析完成，document.readyState = ‘interactive’。

7. 文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）;

8. document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

9. 当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window对象触发load事件。

10. 从此，以异步响应方式处理用户输入、网络事件等。

同步加载与异步加载

同步加载：如js代码的加载，加载js代码时浏览器不会进行dom树的加载。直到js代码加载并执行完毕后才会继续进行后续加载。一段时间只是进行一件事，不同时做多件事。

异步加载：异步加载模式下浏览器会一边进行js代码的下载，另一边进行DOM树的加载。同时进行多件事的处理。

异步加载js代码好处

页面加载速度影响用户体验。用户应优先看到页面内容和样式渲染后的效果，针对js代码的行为效果不应优先加载，优先度低于html和css。异步加载使js代码在页面加载后才进行加载，会优化用户体验，加快加载速度。

实现异步加载方式

async 只适用于外部引入的script代码。使用方式就是在script标签中加上这个属性。
通过自定义函数实现异步加载。
defer 在script标签中加上defer属性。就可以使js代码在DOM文档加载完后加载执行，也就是实现了异步加载。这个方式只限ie浏览器，微软公式宣布ie浏览器在2022年6月15日正式关闭，这个方式也就成为历史了。

代码如下

    <script async></script>
	<script async="async"></script>

        var js=document.createElement("script");
		js.type="type/javascript";
		js.src="js代码的路径";
		document.head.appendChild(js);

查看html页面加载状态

我们可以通过document.readyState来查看页面加载进度。页面加载进度分为

uninitalized-未开始加载；
loading-正在加载；
interactive-已加载，用户可以交互。DOM树完成加载，触发DOMContentLoaded事件；这时图片,link引入的css等文件还未加载完成。
complete-加载完成；

以上状态除了uninitialized不能显示出来外，其他状态都可以通过document.readyState显示。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#dd{
			width: 100px;
			height: 100px;
			background-color: #000;
		}
	</style>
</head>
<body>
	<div id="dd">

	</div>
	<script>
		console.log(document.readyState);//加载到这里时，浏览器加载script代码，属于加载中 loading
		var dd=document.getElementById("dd");
		dd.onclick=function(){
			console.log(document.readyState);//点击事件触发时，页面已经全部加载完成 为complete
		}
		document.addEventListener("DOMContentLoaded",function(){
			console.log(document.readyState);
		})
	</script>
</body>
</html>