script标签在头部时,怎么防止阻断?
给script标签 添加async
或defer
属性
在<script>元素中设置defer属性,相当于告诉浏览器立即下载js文件,
但是等到整个页面都解析完毕之后再执行js
<script src="xxxxx.js" type="text/javascript" defer>
同样与defer类似,async只适用于外部脚本文件,并告诉浏览器立即下载文件
但与defer不同的是,标记为async的脚本并不保证按照它们的先后顺序执行。
<script src="xxxxx.js" type="text/javascript"async>
就是这两个属性都会使script标签异步加载,然而执行的时机是不一样的。
看下边这张图:
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。