1.阻塞加载:
平常默认使用的都是阻塞加载。例如:
阻塞加载会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染。为了这样可以让页面先显示出来,我们通常会把要加载的js放到body结束标签之前,使得js可在页面最后加载,尽量减少阻塞页面的渲染。
2.延迟加载:
延迟加载是脚本延迟到文档被完全解析和显示之后再执行。有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的,这个时候我们就可以通过延迟加载来执行这些不是立刻就需要的模块,就像图片的延迟加载,在图片出现在可视区域内时才加载显示图片。当页面有大量数据的时候使用延迟加载可以加快页面加载速率,给用户良好的体验。
3.异步加载:
异步加载是立即下载js'脚本的同时又不妨碍页面中的其他操作。
延迟加载和异步加载的相同点和不同点
延迟加载 | 异步加载 | |
相同点 | 并发执行 | |
只支持外部引入方式 | ||
不同点 | 多个js,按定义顺序执行 | 多个js,不一定按定义顺序执行 |
文档解析完才执行 | 加载完就找机会执行,在load事件之前 | |
在DOMContentLoaded事件之前执行完 | 在load事件之前执行完 |