async与defer

时间:2023-09-20 23:53:56

<script>元素的几种常见属性:

async  异步加载,立即下载,不应妨碍页面其他操作,标记为 async 的异步脚本并不保证按照指定的先后顺序执行,因此异步脚本不应该在加载期间修改DOM,异步脚本一定会在页面的 load 事件前执行,不一定在 DOMContentLoaded 事件前后触发,js有依赖性时,用async很容易出错,async 是无序执行,自身加载完就会执行;

DOMContentLoaded 事件于window的onload事件不同:

onload事件是UI事件,是window对象的onload,当页面完全加载后(包括所有的图片、JS文件、CSS文件等外部资源),就会触发window的onload事件

DOMContentLoaded事件是HTML5事件,本来是document对象的事件,会冒泡到window对象,形成了完整DOM树之后就会触发(不理会图片、JS文件、CSS文件或其它资源是否已经下载完毕)

defer 延迟脚本,异步加载,立即下载,但脚本会延迟到整个页面都解析完毕后再运行,HTML5规范要求按照出现的前后顺序执行,并且会先于 DOMContentLoaded 事件触发前执行,现实当中 defer 脚本不一定按照顺序执行,也不一定会先于DOMContentLoaded事件前执行,因此最好只包含一个延迟脚本,defer 是有序执行

async与defer区别:

相同点: 都是异步加载,不阻塞页面渲染;都可以只使用属性名,不定义属性值;都只对外部脚本适用(IE7之前针对嵌入式脚本使用defer,IE8+只支持外部脚本);

不同点: async 会在加载完成后立即执行,因此它是无序执行,但一定会在window的onload事件之前执行,DOMContentLoaded事件前后不确定;

defer 会等到整个页面解析完后再执行,一般会按照顺序执行,会先于DOMContentLoaded事件触发前执行;

JS加载执行顺序:

如果没有async和defer属性,那么浏览器会立即执行当前JS脚本阻塞后面的脚本;

如果有async属性,那么浏览器加载它会与加载其它资源并行进行,异步加载,它自身加载完毕后立马执行;

如果有defer属性,那么浏览器加载它也会与其它资源并行进行,异步加载,该脚本会被延迟到整个页面全部解析完毕后再执行;

DOMContentLoaded先于onload事件触发;

type 可以看做为language(已经弃用)的替代属性,该脚本语言的MIME类型,默认为text/javascript;

src 要执行代码的外部文件;

<noscript>元素  只有在浏览器不支持脚本,或者支持脚本但被禁用时显示;