浅析script标签中的defer与async属性

一、前言

看到的前辈写的代码如下

竟然同时有async和defer属性，心想着肯定是前辈老司机的什么黑科技，两个一块儿肯定会发生什么神奇化学反应，于是赶紧怀着一颗崇敬的心去翻书翻文档，先复习一下各自的定义。

二、调查一番

先看看async和defer各自的定义吧，翻开红宝书望远镜，是这么介绍的

2.1 defer

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在 ul>li{这是第$个节点}*1000

一个简单的demo，从各个CDN上引用了2个CSS3个JS，在body里面创建了1000个li。通过调整外部引用资源的位置和加入相关的属性利用chrome的Timeline进行验证。

3.2 放置在内

异步加载资源，但会阻塞的渲染会出现白屏，按照顺序立即执行脚本

3.3 放置在底部

异步加载资源，等中的内容渲染完毕后且加载完按顺序执行JS

3.3 放置在头部并使用async

异步加载资源，且加载完JS资源立即执行，并不会按顺序，谁快谁先上

3.4 放置在头部并使用defer

异步加载资源，在DOM渲染后之后再按顺序执行JS

3.5 放置在头部并同时使用async和defer

表现和async一致，开了个脑洞，把这两个属性交换一下位置，看会不会有覆盖效果，结果发现是一致的 = =、

综上，在webkit引擎下，建议的方式仍然是把