头图

普通script:立即请求文件,并且阻塞渲染引擎,js文件加载完成后阻塞渲染引擎并立即执行文件内容

async属性:立即请求文件,但不阻塞渲染引擎,js文件加载完成后阻塞渲染引擎并立即执行文件内容(多个使用async引入的脚本不保证按引入顺序执行)

defer属性:立即请求文件,但不阻塞渲染引擎,等到html解析完成后(DOMContentLoaded事件调用前)再执行文件内容(多个使用defer引入的脚本会按引入顺序执行)

type="module"属性:浏览器按照ECMA Script 6标准将文件当做模块进行解析,默认阻塞效果同defer,也可以配合async在请求完成后立即执行

具体效果如图:

绿色的线表示解析html,蓝色的线表示请求文件,红色的线表示执行script代码


heath_learning
1.4k 声望31 粉丝