js中defer和async的区别

defer和async的区别

1.script的位置
1.script放在head内
（1）必须等到全部的script下载、解析、执行后才开始呈现页面（body）的内容。
（2）浏览器按照script元素在页面中出现的先后顺序对它们依次解析。
2.script放在/html前
（1）解析script代码前，页面的内容将完全呈现在浏览器中。
- defer属性
只使用外部文件脚本，嵌入代码会被忽略。
表明脚本在执行时不会影响页面的构造。
defer要等到整个页面在内存中正常渲染结束（Dom结构完全生成，以及其他脚本执行完成），才会执行。
如果有多个defer脚本，会按照它们在页面中出现的顺序加载。
- async属性
只使用外部文件脚本，嵌入代码会被忽略，会告诉浏览器立即下载文件。
指定async属性的目的是不让页面等待脚本下载和执行，从而异步加载页面其他内容。即async是下载完脚本就执行，渲染引擎会中断渲染，执行完这个脚本后，再继续渲染。
如果有多个async脚本，不能保证加载顺序，谁先下载好谁执行。