当解析器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档。但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可以将脚本标记为 async,以便由其他线程对脚本进行解析和执行。

三者之间的区别?

script

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

defer script

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

async script

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

什么情况下使用 defer 和 async?

  1. 如果脚本不依赖于任何脚本,并不被任何脚本依赖,那么则使用 defer。
  2. 如果脚本是模块化的,不依赖于任何脚本,那么则使用 async。

需要注意的地方

  1. async 对于内联脚本没有作用。
  2. defer 不应该在内联脚本上使用。从 Gecko 1.9.2 开始,内联脚本的 defer 会被忽略,但是在 Gecko 1.9.1 中,如果定义了 defer 属性,即使内联脚本也会被延迟执行。
  3. defer 的脚本是按照声明顺序执行的。而 async 的脚本不同,只要脚本下载完成,将会立即执行,未必会按照声明顺序执行。
  4. IE9 及以下版本的浏览器,defer 的脚本也未必会按照声明顺序执行。
  5. 如果同时使用 defer 和 async,则会默认使用 async,忽略 defer。

参考链接

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script

JavaScript 的 defer 与 async的更多相关文章

  1. javascript的defer和async(转载)

    http://ued.ctrip.com/blog/?p=3121 我们常用的javascript标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自http ...

  2. javascript的defer和async的区别。

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

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

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

  4. javascript延迟加载及异步(defer和async)

    一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是 ...

  5. 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...

  6. 【javascript基础】 JavaScript defer和async区别

    defer该属性用来通知浏览器,这段脚本代码将不会产生任何文档内容.例如 JavaScript代码中的document.write()方法将不会骑作用,浏览器遇到这样的代码将会忽略,并继续执行后面的代 ...

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

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

  8. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

  9. 脚本引用中的defer和async的用法和区别

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

随机推荐

  1. WebForm 页面传值

    一.使用Querystring Querystring是一种非常简单的传值方式,其缺点就是会把要传送的值显示在浏览器的地址栏中,并且在此方法中不能够传递对象.如果你想传递一个安全性不是那么太重要或者是 ...

  2. javascript中通过匿名函数进行事件绑定

  3. 通过代码获取res里生成R.java中的值

    引用:http://my.eoe.cn/blue_rain/archive/552.html 有的时候我们生成库文件,需要在里面加入一些UI,并提供出一些xml的资源,那如何在其他项目中使用呢? 我们 ...

  4. java基础复习:final,static,以及String类

    2.final 1)为啥String是final修饰的呢? 自己答: 答案: 主要是为了“效率” 和 “安全性” 的缘故.若 String允许被继承, 由于它的高度被使用率, 可能会降低程序的性能,所 ...

  5. Linux下make与makefile

    make 用来解析 makefile 文件 make 的选项:-d   显示调试信息-f 文件  默认是从 makefile 或 Makefile 中读取依赖信息,用该选项可更改文件-h   显示所有 ...

  6. hibernate配置文件详细解析

    在javaweb开发中,hibernate框架的是常用的,能帮我们节省大量的时间,以下是hibernate的配置文件解析. hibernate配置文件的默认名为:hibernate.cfg.xml 默 ...

  7. 常用oracle表空间查询语句

    --查询数据库表空间使用情况 select a.tablespace_name,a.bytes/1024/1024 "Sum MB",(a.bytes-b.bytes)/1024/ ...

  8. Codeforces 731C:Socks(并查集)

    http://codeforces.com/problemset/problem/731/C 题意:有n只袜子,m天,k个颜色,每个袜子有一个颜色,再给出m天,每天有两只袜子,每只袜子可能不同颜色,问 ...

  9. .md文件的语法

    md全称是Macdown,.md文件可以当记事本一样使用,作为编辑软件,还可以自己添加样式,图片,链接等,可以用记事本打开,也可以保持样式排版转换为html文件,语法比较简单..md除了编辑容易的优势 ...

  10. 将光标放到input内容的最后

    在使用setSelectionRange方法的时候一定要加setTimeout,否则无效,代码 var num = $('#input_phone').val().length; setTimeout ...