同步加载
默认的就是同步加载
同步加载: 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染。流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作,重定向,输出document等默认行为,所以同步才是最安全的。通常会把要加载的js放到body结束标签之前,使得js可在页面最后加载,尽量减少阻塞页面的渲染。这样可以先让页面显示出来。
简单来说:js的网页中加载会阻塞到未加载的css,html的加载跟渲染
异步加载
异步加载又称非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有一下几种实现方式。。。
1. async, await
这个是 ES7 中的特性,async顾名思义是“异步”的意思,async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思,就是用于等待异步完成。
2. H5 async
当浏览器解析到script脚本,有async时,浏览器会立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和main.js的加载与执行并行进行,这个过程是异步的
3. 动态创建DOM
在script标签内,用js创建一个script元素并插入到document中,这种就是异步加载js文件了。
2 (function() {
3 var s = document.createElement('script');
4 s.type &#