<script>
浏览器在 html解析过程中,遇到scripe,会阻塞html页面渲染,发送页面请求,过去js脚本代码,然后交给js引擎去执行代码,当执行完毕后,浏览器会继续解析html。可以看出,script阻塞了HTML解析,如果此时js脚本内容收到网络波动,迟迟未得到相应,或者JS解析时间过长,会导致页面白屏。
图解:
<script async>
浏览器解析HTML时,当遇到有async属性的script标签,此时异步请求JS脚本内容,不会阻塞HTML解析。当请求完成之后,如果此时HTML还未解析完,浏览器会暂停解析,先执行js代码,执行完毕后再解析HTML,当请求完成之后,HTLM已经解析完成完成,那就直接执行JS代码即可。
应用场景:脚本不关心页面中DOM元素。
图解:
<script defer>
当遇到有defer>属性的script标签,不会阻塞浏览器解析,异步执行请求脚本内容,请求完成后,如果页面还没渲染完成,也不会阻塞页面渲染,会继续HTML渲染,指导HTML渲染完成,再去执行JS脚本内容。
应用场景:脚本代码依赖于页面DOM,或者被其他脚本依赖。(掘金源码)
图解: