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

三者之间的区别？

script

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

defer script

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

async script

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

什么情况下使用 defer 和 async？

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

转载自：http://www.webhek.com/javascript-defer-async

JavaScript标记上的defer与async的作用与区别的更多相关文章

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

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

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

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

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

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

  4. javascript的defer和async（转载）

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

  5. script 标签的defer,async的作用，及拓展浏览器多线程，DOMContentLoaded

    前端优化有一点就是优化js的执行时机,一般做法是将script放置于body的结束标签,以避免加载执行js 文件导致页面渲染阻塞的问题这种做法确实能防止页面阻塞,但是在页面渲染完成之后才去加载js文件 ...

  6. script的defer和async

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

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

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

  8. JavaScript 的 defer 与 async

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

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

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

随机推荐

  1. 通过设置虚拟机(ubantu15.10)的分辨率达到全屏效果

    最近搭建了一个ubantu 15.10虚拟机,怎么折腾都不能全屏显示.虽然我已经点了,  还是无法达到真正的全屏. 查了一下,http://jingyan.baidu.com/article/0964 ...

  2. Eclipse如何安装JD-Eclipse反编译插件

    一.Eclipse在线安装JD-Eclipse反编译插件 1.在eclipse的help—>Install New Software...中添加新软件开发,添加它的源: name:jd-ecli ...

  3. MyEclipse 6.5 代码自动提示功能配置教程

    1. 打开MyEclipse 6.0.1,然后“window”→“Preferences” 2. 选择“java”,展开,“Editor”,选择“Content Assist”. 3. 选择“Cont ...

  4. Linux iptables

    一.简介 http://liaoph.com/iptables/ 二.操作 1)查看规则 iptables -t filter -L -n iptables -t nat -L -n iptables ...

  5. centos6.7 安装Docker

      一.查看系统版本 [root@localhost ~]# cat /etc/redhat-release CentOS release 6.7 (Final) 二.安装EPEL 1.进入cento ...

  6. oracle 11g dataguard创建的简单方法

    oracle 10g可以通过基于备份的rman DUPLICATE实现dataguard,通过步骤需要对数据库进行备份,并在standby侧进行数据库的恢复.而到了11g,oracle推出了Dupli ...

  7. A Personal Selection of Books on E lectromagnetics and Computational E lectromagnetics---David B. Davidson

    链接. General Books on Electromagnetics When our department recently reviewed our junior-level text, w ...

  8. [转]移动web开发中meta标签作用

    今天在尝试做移动页面的时候遇到了一个问题,<meta content="telephone=no,email=no" name="format-detection& ...

  9. 怎样用ZBrush快速雕刻皮肤纹理

    今天的ZBrush教程我们将对利用基础笔刷制作出的“亡灵僵尸”头部模型进行皮肤纹理的处理,主要用到了Layers 3D图层和Alpha笔触类型添加皮肤纹理. 详细的视频教程地址可前往:http://w ...

  10. URAL 2014 Zhenya moves from parents --线段树

    题意:儿子身无分文出去玩,只带了一张他爸的信用卡,当他自己现金不足的时候就会用信用卡支付,然后儿子还会挣钱,挣到的钱都是现金,也就是说他如果有现金就会先花现金,但是有了现金他不会还信用卡的钱.他每花一 ...