第11题：script标签中defer和async的区别? 设置它们有什么用？

[rupoly]

区别主要在于一个执行时间,defer会在文档解析完之后执行,并且多个defer会按照顺序执行,而async则是在js加载好之后就会执行,并且多个async,哪个加载好就执行哪个

有async的话,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。 有derer的话,加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成

[zxdfe]

script ：会阻碍 HTML 解析，下载好并执行完脚本才会继续解析 HTML。 async script ：async表示异步，解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。 defer script：defer表示延迟，完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。

Typically you want to use async where possible, then defer then no attribute. Here are some general rules to follow: If the script is modular and does not rely on any scripts then use async. If the script relies upon or is relied upon by another script then use defer. If the script is small and is relied upon by an async script then use an inline script with no attributes placed above the async scripts.

1. async vs defer attributes
2. 图解 script 标签中的 async 和 defer 属性

[WLNCJL]

defer和async是script标签里面的两个属性
1. 浏览器执行代码是从上到下的，如果script标签里面没有这两个属性，当执行到script标签的时候，会将JS代码加载完
再接着加载后面的代码，导致浏览器出现长时间的空白和延迟
2. <script defer></script> 有了defer属性，当执行到script标签的时候，JS代码和后续文档会同时加载（异步），
当所有代码加载完后再执行JS代码
3. <script async></script> 有了async属性，当执行到script标签的时候，JS代码和后续文档会同时加载（异步），
JS代码加载完后会立即执行，可能会阻碍后续文档的加载

[szgyFE]

1、js脚本会阻塞DOM解析； 2、defer和async 属性都会异步加载js 脚本， 3、defer会在DOMContentLoaded事件触发之前执行脚本，也就是DOM树构建完成之前触发（所有这里做DOM操作时不会引起回流和重绘）， 4、async则是下载完js脚本就直接执行，不管是在哪个时间点，所以不适合做DOM操作，可能会引起回流重绘