https://segmentfault.com/a/1190000017257370涉及到js引擎线程和渲染线程
js通过script有3种加载方式:
1.正常模式normal
2.async
3.defer
浏览器自上而下解析,渲染线程运行时:
1.遇到正常模式的script标签,渲染线程把控制权限给引擎线程,浏览器等待Js文件下载并执行才把控制权还回,因此Js阻塞了页面的渲染
2.遇到async和defer,会异步加载js文件,加载js文件和渲染html同步进行:
(1)async只要js文件下载完成就会立即执行,这个时候渲染停止,直到js文件执行完成
(2)defer等到整个html渲染完成后才执行
defer执行的顺序并不是确定的,所以一个文件最好只有一个defer
使用场景:
- js文件无依赖其他文件,设为async
- 如果你的js文件依赖其他js,使用 defer;
- js文件小且被依赖,放在async前面,normal模式(因为要这个文件先执行x,async才能在这个基础上继续操作)