script标签内未设置async或者defer时：
（1）script放在<head>，会阻塞HTML代码的解析和渲染，而放在<body>底部时，不会阻塞HTML代码的解析和渲染。
（2）script放在<head>，将无法操作HTML元素，而放在<body>底部时，可以操作HTML元素。
（3）script放在<head>，无法通过脚本改变内联的CSS样式，而放在<body>底部时，可以通过脚本改变内联的CSS样式
script标签内设置async时：
- 当script脚本加载完毕后，script脚本会立即执行，此时会阻塞HTML代码的解析和渲染，并且是哪个先下载完执行哪个；
script标签设置defer时：
- 当script脚本加载完毕后，script脚本不会立即执行，会等待HTML代码的解析和渲染结束后并安装顺序再执行；
defer与async的共同点是：
- script放在<head>和放在<body>底部时没区别。script脚本会异步加载，在加载过程中不会阻塞HTML代码的解析和渲染；
defer与async的区别是：
- defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；
- async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。
- defer是“渲染完再执行”，async是“下载完就执行”。
- 另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的；
注意：如果同时指定了两个属性，则会遵从async属性而忽略defer属性
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
