5-2 defer与async属性

浏览器会同时去下载js文件,但是执行的时候会按你的书写顺序执行

defer

1、解析html;
2、遇到带defer属性的script标签,继续解析html,同时下载script引入的文件;
3、浏览器完成解析HTML,然后执行下载的脚本(按书写顺序执行);

注意
1、最终执行js文件会按页面里书写的先后顺序执行;
2、动态创建的script标签无效;
3、有defer属性的js文件里不允许使用document.write;

async

1、解析html;
2、遇到带async属性的script标签。继续解析html,同时下载script引入的文件;
3、js文件下载完毕,浏览器暂停解析html,开始执行js;
4、js执行完毕,浏览器接着解析html;

注意
1、最终js文件执行的顺序无法保证,谁先下载完执行谁
2、动态创建的script标签有效
3、有async属性的js文件里不允许使用document.write

defer与async选择使用哪个
1、如果js文件之间没有依赖关系,就使用async;
2、如果脚本之间有依赖关系,就使用defer;
3、同时使用的话defer不起作用,都会按async属性执行;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容