什么是同步加载
加载到js文件时会等js文件加载完成并且执行完成再继续执行后面的代码,因此,在加载数据时仍然执行其他程序,一般加载时是不执行程序的,不得不等进度条,因为很多程序在没有加载数据时,可能是无法运行的,所以通常会加载完之后才运行。
同步模式,又称”阻塞模式“,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载图像、渲染、代码执行。
什么是异步加载
异步加载,又称“非阻塞”,按需加载,用到的时候再加载,不用到不加载
同步加载与异步加载得区别
优点:
同步:管理起来方便,调用比较简单
异步:速度快,与主线程无关,
缺点:
同步:没有异步快
异步:调用比较麻烦
异步加载得三种方案
- defer异步加载,IE专用(IE9以下)
- async 异步加载, 加载完就执行,只能加载外部脚本
- 创建一个script标签,插入到DOM中,加载完毕后callback 兼容性最好
1:defer异步加载
<script src="lndex.js" defer></script>
<script defer>
var wxw = 10;
</script>
2:async 异步加载
<script async>
// 高版本的浏览器中可以这么些,但是标准中不不允许的
var a = 12;
</script>
3. 创建script,插入到DOM中,加载完毕后callBack
<script>
//callback名字叫做回调函数,在事件里面的绑定的事件处理函数就是回调函数,回调函数其实就是当满足一定条件才调用的函数。
function loadScript (url, callback){
// url是异步下载的js文件
//callback是异步下载的js文件中的某一个函数
var script = document.createElement('script');
script.type = "text/javascript";
script.src = url;//异步下载的js文件
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == "complete" || script.readyState == "loaded"){
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
document.head.appendChild(script);
}
</script>
js时间线
1、创建document对象,开始解析web页面。创建HTMLHtmlElement对象,添加到document中。这个阶段document.readyState = ‘loading’。
2、遇到link外部css,创建线程加载,继续解析文档。
3、遇到script外部js时,且没有设置async、defer,浏览器创建线程加载,并阻塞,等待js加载完成并执行该脚本,然后继续解析文档。js拥有修改dom的能力–>domcument.write此时是禁止使用得。
4、遇到script外部js,并且设置有async、defter,浏览器创建线程加载,并继续解析文档。
async属性的脚本,脚本加载完成后立即执行。domcument.write此时是禁止使用得。
defter==丢置尾部。
document.createElement(‘script’)的方式动态插入script元素来模拟async属性,实现脚本异步加载和执行。
5、遇到img等,浏览器创建线程加载,并继续解析文档。
6、当文档解析完成,document.readyState = ‘interactive’ 活跃。
7、文档解析完成后,所有设置有defer的脚本会按照顺序执行。(注意与async的不同)
8、document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段。
9、当所有async的脚本加载完成并执行后、img等加载完成后,document.readyState = ‘complete’,window对象触发load事件。
10、从此,以异步响应方式处理用户输入、网络事件等。