<script src="script.js"></script>
没有 defer
或 async
,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
有 async
<script async src="script.js"></script>
有 async,会在 HTML 文档解析时并行下载文件,并在下载完成后立即执行(暂停 HTML 解析)。
有 defer
<script defer src="myscript.js"></script>
有 defer
,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行会在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
对于 defer
,我们可以认为是将外链的 js 放在了页面底部。js 的加载不会阻塞页面的渲染和资源的加载。不过 defer 会按照原本的 js 的顺序执行,所以如果前后有依赖关系的 js 可以放心使用
async
和 defer
一样,会等待的资源不会阻塞其余资源的加载,也不会影响页面的加载。但是有一点需要注意下,在有 async
的情况下,js 一旦下载好了就会执行,所以很有可能不是按照原本的顺序来执行的。如果 js 前后有依赖性,用 async
,就很有可能出错。
动态添加的标签隐含 async
属性
Defer 和 async 的相同点
加载文件时不阻塞页面渲染
对于 inline
的 script
无效
使用这两个属性的脚本中不能调用 document.write
方法
有脚本的 onload
的事件回调
Defer 和 async 的区别
html4.0 中定义了 defer
;html5.0 中定义了 async
浏览器支持不同
加载时机:
具有 async
属性的脚本都在它下载结束之后立刻执行,同时会在 window 的 load 事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况;
具有 defer
属性的脚本都是在页面解析完毕之后,按照原本的顺序执行,同时会在 document 的 DOMContentLoaded
之前执行。
使用这两个属性会有三种可能的情况
如果 async
为 true,那么脚本在下载完成后异步执行。
如果 async
为 false,defer
为true,那么脚本会在页面解析完毕之后执行。
如果 async
和 defer
都为 false,那么脚本会在页面解析中,停止页面解析,立刻下载并且执行
如何防止 inline script 造成阻塞
在有 inline script 情况下。下载缓慢的 CSS 可能会阻碍 inline script 的执行。而这又可能阻碍之后的 async script 下载与执行
举个例子:(这里css.php下载缓慢。)
<link rel="stylesheet" href="css1.css.php" type="text/css" />
<script src="js1.js" async></script>
<script>console.log('inline script 1 ' + (+new Date - start));</script>
<link rel="stylesheet" href="css2.css.php" type="text/css"/>
<script src="js2.js" async></script>
<script>console.log('inline script 2 ' + (+new Date - start));</script>
输出结果:
external script 1 87
inline script 1 5184
external script 2 5186
inline script 2 10208
DOMContentLoaded 10216
onload 10227
原因分析:
js1 下载执行正常。但是内联 script 和第二个外部 script 因为第一个 CSS 文件(css1.css.php)的缓慢而延迟。DOMContentLoaded 也被阻塞了。
因为内联 script 可能会请求布局信息,为了使其工作,所以要等待 css 下载应用完成。而这又会 block 后续的 async script 的加载。
解决方案:
把inline script移到页面底部。虽然这仍然阻碍渲染,但是不会阻碍页面资源的下载
使用setTimeout启动长时间执行的代码
有一种方法可以使 inline script 以非 inline 的行为处理:将src指向 data:URI
。并不需要进行base64编码
把原来的内联 script:
<script>console.log('inline script 1 ' + (+new Date - start));</script>
<script async src="data:text/javascript,console.log%28%27inline%20script%201%20%27%20%2B%20%28%2Bnew%20Date%20-%20start%29%29%3B"></script>
这样就可以避免下载缓慢的 css 造成 inline script 对其它 script 文件下载的阻塞。
script中defer和async的区别
Asynchronous inline scripts via data: URIs
Positioning Inline Scripts