之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置deferasync,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象:

  是的,就是在页面脚本引用的时候设置defer或者async,为什么会有这两个属相来辅助脚本加载那,因为浏览器在遇到script标签的时候,文档的解析会停止,不再构建document,有时打开一个网页上会出现空白一段时间,浏览器显示是刷新请求状态(也就是一直转圈),这就会给用户很不好的体验,defer和async的合理使用就可以避免这个情况,而且通常script的位置建议写在页面底部(移动端应用的比较多,这两个都是html5中的新属性)。

  所以相对于默认的script引用,这里配合defer和async就有两种新的用法,它们之间什么区别那?

  1.默认引用 script:<script type="text/javascript" src="x.min.js"></script>

  当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档。

  2.async模式 <script type="text/javascript" src="x.min.js" async="async"></script>

  当浏览器遇到 script 标签时,文档的解析不会停止其他线程将下载脚本,脚本下载完成后开始执行脚本,脚本执行的过程中文档将停止解析,直到脚本执行完毕。

  3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>

  当浏览器遇到 script 标签时,文档的解析不会停止,其他线程将下载脚本,待到文档解析完成,脚本才会执行

  所以async和defer的最主要的区别就是async是异步下载并立即执行,然后文档继续解析,defer是异步加载后解析文档,然后再执行脚本,这样说起来是不是理解了一点了;

  它们的核心功能就是异步,那么两种属性怎么去区分什么情况下用哪个那,主要的参考是如果脚本不依赖于任何脚本,并不被任何脚本依赖,那么则使用 defer,如果脚本是模块化的,不依赖于任何脚本,那么则使用 async;主要功能点说完了,小伙伴们有没有分清楚他们的区别了那。

  原文地址:脚本引用中的defer和async的用法和区别薛陈磊 | Share the world

脚本引用中的defer和async的用法和区别的更多相关文章

  1. javascript中的defer和async学习+javascript执行顺序

    一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...

  2. <script>标签中的 defer 与 async区别

    在html里,使用<script>标签对脚本进行外部或内部引用,<script>标签包含了两个特殊的属性:defer与async,他们的区别如下: 1.若<script& ...

  3. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  4. Oracle中的rownum 和rowid的用法和区别

    Oracle中的rownum 和rowid的用法和区别   1.rownum是伪列,是在获取查询结果集后再加上去的 (获取一条记录加一个rownum).对符合条件的结果添加一个从1开始的序列号. eg ...

  5. JavaScript标记上的defer与async的作用与区别

    当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档.但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可 ...

  6. 浅谈script中的defer与async

    一直没有在script上使用过别的属性,今天看基础代码才发现这个,搜索.记录下,以便记忆. 大家都知道,js加载会造成阻塞,阻碍页面的继续渲染. defer: js与页面同步加载,不阻碍页面渲染,会在 ...

  7. C#中DBNull.Value和Null的用法和区别

    DBNull.Value,, 是适用于向数据库的表中插入空值.而 null,是指在程序中表示空引用. 或者对象为空.就是没有实例化. row[column]的值为DBNull.Value的话,至少说明 ...

  8. js中的find(),filter(),has()的用法和区别

    filter():操作当前元素集,删除不匹配的元素,得到一个新的集合 <ul> <li class="a">list item 1</li> & ...

  9. C++/C中的struct和typedef struct用法和区别

    struct和typedef struct 分三块来讲述: 1 首先://注意在C和C++里不同 在C中定义一个结构体类型要用typedef: typedef struct Student { int ...

随机推荐

  1. Linux + Mono 目前已经支持Entity Framework 6.1

    在上个随笔 CentOS上 Mono3.2.8运行ASP.NET MVC4经验中,步骤2中要求卸载EF 5.0,这样才能在Linux + Mono的环境中运行ASP.NET MVC4的Web应用.今天 ...

  2. 【菜鸟玩Linux开发】在C++里操作MySQL

    MySQL是一个的开源关系型数据库,对于服务端开发来说是一个优秀的选择.本篇内容将介绍如何在C++程序里操作MySQL数据库. ———————————————————————————————————— ...

  3. RCP:gef智能寻路算法(A star)

    本路由继承自AbstactRouter,参数只有EditPart(编辑器内容控制器),gridLength(寻路用单元格大小),style(FLOYD,FLOYD_FLAT,FOUR_DIR). 字符 ...

  4. Guava - EventBus(事件总线)

    Guava在guava-libraries中为我们提供了事件总线EventBus库,它是事件发布订阅模式的实现,让我们能在领域驱动设计(DDD)中以事件的弱引用本质对我们的模块和领域边界很好的解耦设计 ...

  5. 熟用js中的Date

    js中的Date类型是使用UTC(国际协调时间)自1970年1月1日午夜(零时)开始,经过的毫秒数来保存日期. 1. 创建日期对象  ---> 获得当前日期和时间  var now = new ...

  6. Windows UDP socket recvfrom返回10054错误的解决办法

    现象: 在Windows 7系统上,A使用UDP socket,调用sendto函数向一个目标地址B发送数据,但是目标地址B没有接收数据,如果A此时立即调用recvfrom试图接收目标地址B发回的数据 ...

  7. java线程与并发(一)

    有好几个月没写博客了,各种破事儿忙完,决定继续写博客,恰好最近想了解下有关Java并发的一些知识,所以就准备这一段时间,用零碎的时间多记录一点有关并发的知识.希望这次能一直坚持下去. 想了解并发,必须 ...

  8. iphone按home键后,正在运行的程序是否退出了呢?

    是否一直有个疑问,当iphone手机正在运行一个APP,如果按Home键后,那么原来正在运行的程序还在运行吗?如果开发过ios程序,可能不是问题,如果没有开发过的,可能会疑惑了,我就简单的说一下.以几 ...

  9. PS 多次剪裁同一图片

    一个图品里面有两个小图,要分别抠出来. 我以前的做法是,先扣一个,重新打开文件,再扣另外一个. 今天发现一个简单的办法,不用重新打开文件. 就是在扣完第一个的时候,打开历史记录面板,双击 打开 动作, ...

  10. HTML学习入门

    HTML(元素.属性) HTML: 超文本标记语言   1. 超文本即为带有链接属性的文本  2.标记即为标签 一.body属性: bgcolor:页面背景颜色 text:文字颜色 backgroun ...