网页加载之async与defer

图解外联script加载

如图所示，结论：

  1. 普通script的加载与执行是阻塞DOM渲染的，其顺序取决于script标签在文档中的位置，并且会在DOMContentLoaded事件之前执行完毕
  2. 标有async的script加载与执行都是异步的，不阻塞DOM渲染，但是无法保证顺序，会在load事件前执行完毕，但无法保证在DOMContentLoaded事件的前或后
  3. 标有defer的script加载是异步的，但是执行会在所有DOM渲染之后，在DOMContentLoaded事件之前，顺序取决于script标签在文档中的位置
  4. 标有defer的外部script在各个浏览器的表现比较一致，但如果是内联script的情况，只在IE中支持较好，所以尽量避免内联script使用defer

html渲染过程
@import与link
浏览器工作原理

image.png

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

推荐阅读更多精彩内容

  • Javascript 异步加载详解
    本文总结一下浏览器在 javascript 的加载方式。关键词：异步加载（async loading），延迟加载（...
    4ea0af17fd67阅读 1,071评论 0赞 2
  • Javascript 异步加载详解
    首先我们先来看一下Script标签的各项属性： script标签也支持HTML中的全局属性： 下面我们来看看一看j...
    tobAlier阅读 1,066评论 0赞 2
  • 浏览器的渲染：过程与原理
    浏览器渲染页面的过程 从耗时的角度，浏览器请求、加载、渲染一个页面，时间花在下面五件事情上： DNS 查询 TCP...
    想做一个画家阅读 502评论 0赞 0
  • 鱼
    文/如烟如幻 一只受伤的小鱼静静浮在水底微风吹过波光粼粼四周的藻荇没有吞噬你的身影水中的倒影点缀你的艳丽 一片片落...
    如烟如幻阅读 170评论 0赞 4
  • 渐散的天赋
    兮 下笔写着她所钟爱的文字，却什么也写不出来。 一阵抓耳挠腮之后发现灵感像散落的珠子，怎么也串不起来，这不像《三重...
    杜莎小丸子阅读 219评论 0赞 0