script标签中async与defer的区别_Whoopsina

网络投稿 02-07 2065

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属性

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。