关于同步加载与异步加载的区别
同步加载:同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。
异步加载:异步加载又叫非阻塞,浏览器在下载执行 js 同时,还会继续进行后续页面的处理。
为何使用异步加载原因:
优化脚本文件的加载提高页面的加载速度,一直是提高页面加载速度很重要的一条。因为涉及到各个浏览器对解析脚本文件的不同机制,以及加载脚本会阻塞其他资源和文件的加载,因此更多的采用异步加载。
使用异步加载的方式:
1.动态生成script标签
加载方式在加载执行完之前会阻止 onload 事件的触发,而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等,所以还是会阻塞部分页面的初始化处理
阻止onload事件的触发 this is a test
2.解决了阻塞 onload 事件触发的问题
解决了阻塞onload事件触发的问题 this is a test
3.在支持async属性的浏览器
使用async属性 this is a test
补充:
DOMContentLoaded : 页面(document)已经解析完成,页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。
OnLoad:页面的所有资源都加载完毕(包括图片)。浏览器的载入进度在这时才停止。
图解执行过程:
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。