JavaScript中script标签async与defer的区别

async:与后续元素渲染异步执行,乱序执行,若js文件之间存在依赖关系,容易产生错误,只适用于完全没有依赖的文件,文档解析过程中异步下载,下载完成之后立即执行。

defer:(H5规范中,defer是有序执行的,但实际不一定是有序执行的)与后续渲染异步执行,延迟到界面文档解析完成之后执行,即为立即下载,延迟执行。所有执行均在DOMContentLoaded 事件触发之前完成。 

不带属性:加载到script立即下载并执行,阻塞后续渲染的执行。

最佳方案:外部引用文件放在</body>之前执行

对比图如下:

<script/>放在<head/>与<body/>中的区别?

区别:加载顺序的不同,在页面加载之前下载,HTML加载顺序是由上至下

<head/>:会在文档加载前加载结束。

<body/>:不能保证哪个先加载结束(文档?引用文件?)性能更优

注:内嵌的脚本也不要紧跟在<link>标签之后,否则会导致页面阻塞去等待样式表的下载。

猜你喜欢

转载自blog.csdn.net/weixin_42441117/article/details/80705134