JS的异步与加载时间线

一、JS同步和异步

1、同步模式：又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续文件的加载、渲染、代码执行（即如果加载到js文件要等到文件加载完成后执行，才能继续执行后面的代码）。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把 < script > 标签放在< body>结尾处，这样尽可能减少页面阻塞。
2、异步模式：按需加载，用到的时候再加载，不用到就不需要加载，例如回调函数。（异步在加载的过程中产生一个子进程去加载当前程序，自己去执行下一个程序）
特点：单线程的异步就是多线程，只不过用异步的方式表现出来了
3、同步和异步的区别：JavaScript 为单线程，所以同步为单线程，异步为模拟多线程；同步和异步的区别在于在执行程序的顺序不同。
4、异步三种方式
（1）defer在DOM文档解析完成之后才执行js文件，IE独有
在IE低版本中 defer 可以让script请求的文件异步加载

<script  defer>
console.log("hello");
</script>

（2）async 针对其他浏览器，加载完就执行,只能加载外部脚本
不能把js代码写在js文件里

<script  src = "load.js" async>
</script>
```css
在这里插入代码片

（3）创建一个script标签，插入DOM中，加载完毕后就callback,兼容性是最好的

<script  type = "text/javascript">
	var script = document.createElement("script");//创建一个script标签
	script.type = "text/javascript";//添加属性并赋值
	if(script.readyState){//判断此时的状态
	//如果IE浏览器上面有oScript.onreadystatechange码那么就是IE浏览器
		script.onreadystatechange = function(){//onreadystatechange检测状态码
		//处理兼容性问题 complete loaded 都表示script加载完成
			if(script.readyState == "complete" || script.readyState= "loaded"){
				obj[callback]();
			}
		}
	}else{//谷歌高本版
		sctipt.onload = function(){//资源事件监测dom.js下载完毕就触发此事件
			obj[callback]();
		}
	}
	script.src= url;//下载文件的地址
	document.head.appendChild(script);//挂在到DOM树上，执行代码
}
</script>

二、加载时间线

1、创建document对象。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’。Document.readyStyle表示DOM数生成到什么状态了
2、如果遇到link外部css文件，浏览器会创建新线程加载，同时继续解析文档。
3、如果遇到外部js文件，并且没有设置async、defer，浏览器会加载js文件,阻塞主线程，等待js文件加载完成并执行该文件，然后继续解析文档。
4、如果遇到外部js文件，并且设置有async、defer是工具类的JS文件需要异步加载，浏览器会创建新线程加载js文件，同时继续解析文档。对于async属性的js文件，会在js文件加载完成后立即执行。
5、如果遇到img,iframe等，浏览器在解析dom结构时，会异步加载src，同时继续解析文档。
6、当DOM文档解析完成，document.readyState = 'interactive’。
7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。
8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window对象触发load事件。
10、从此，页面以异步响应方式处理用户输入，网络事件等。

总结：主要分成三步：
（1）document.readyState = ‘loading’
（2）document.readyState = 'interactive’
（3）document.readyState = ‘complete’

 console.log(document.readyState);  // loading
 //当状态码发生改变是触发函数
document.onreadystatechange = function(){
	console.log(document.readyState,1);//interactive还未加载完毕，complete加载完成
};

来源：CSDN

作者：CSH_lucky

链接：https://blog.csdn.net/CSH_lucky/article/details/104794695

标签

js代码

脚本