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

最近在网上看到一个前辈在写script标签的时候,居然同时写了async和defer属性,想着这是什么意思呢?所以决定深入的了解下这其中的学问,以下这篇文章就是个人在学习了之后的一些总结分析,有需要的朋友们可以参考借鉴,下面来一起学习学习吧。

一、前言

看到的前辈写的代码如下

 

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

二、调查一番

先看看asyncdefer各自的定义吧,翻开红宝书望远镜,是这么介绍的

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引擎下,建议的方式仍然是把

以上就是浅析script标签中的defer与async属性的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程