script标签async与defer

script标签内未设置async或者defer时：

1. script放在，会阻塞HTML代码的解析和渲染，而放在底部时，不会阻塞HTML代码的解析和渲染。
2. script放在，将无法操作HTML元素，而放在底部时，可以操作HTML元素。
3. script放在，无法通过脚本改变内联的CSS样式，而放在底部时，可以通过脚本改变内联的CSS样式

script标签内设置async时：

当script脚本加载完毕后，script脚本会立即执行，此时会阻塞HTML代码的解析和渲染，并且是哪个先下载完执行哪个；

script标签设置defer时：

当script脚本加载完毕后，script脚本不会立即执行，会等待HTML代码的解析和渲染结束后并安装顺序再执行；

defer与async的共同点是：

script放在和放在底部时没区别。script脚本会异步加载，在加载过程中不会阻塞HTML代码的解析和渲染；

defer与async的区别是：

• defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；
• async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。
• defer是“渲染完再执行”，async是“下载完就执行”。

另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的； 注意：如果同时指定了两个属性，则会遵从async属性而忽略defer属性