当浏览器遇到 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. 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(一)视图共性 学习笔记

    如果想进行自定义的配置,可以继承基类UIView. 地图app中需要多点触动Multiple Touch, opaque不透明的 hidden隐藏的 比如下载的进度条,如果下载完毕,可以通过设置这个属 ...

  2. sublime text 3 修改文件保存编码

    File->Save With Encoding->UTF-8 with BOM

  3. (ios)ARC常用设置,部分文件编译设置ARC

    1设置 整个项目是否支持ARC 选择No 不支持 YES 支持 2 设置部分文件是否支持ARC. 支持ARC的Flags -fobjc-arc   不支持的Flags -fno-objc-arc

  4. Effective Java 34 Emulate extensible enums with interfaces

    Advantage Disadvantage Enum types Clarity Safety Ease of maintenance. None extensibility Typesafe en ...

  5. MongoDB学习笔记——聚合操作之聚合管道(Aggregation Pipeline)

    MongoDB聚合管道 使用聚合管道可以对集合中的文档进行变换和组合. 管道是由一个个功能节点组成的,这些节点用管道操作符来进行表示.聚合管道以一个集合中的所有文档作为开始,然后这些文档从一个操作节点 ...

  6. 如何解决mysql stop fail的问题

    最近在学习mysql,碰到了一个mysql stop fail的问题,在这里把碰到的问题以及解决的过程写出来,不是这个问题有多难,而是我在解决此问题的过程中没有发现一个行之有效的解决问题的中文网页,搞 ...

  7. yum命令不能使用的相关错误

    使用yum安装软件时,出现下面报错 [root@localhost ~]# yum install -y lrzszLoaded plugins: fastestmirror, securityLoa ...

  8. cocos2d-x之悦动的小球

    发现问题:update()函数不能用virtual前缀 主: bool HelloWorld::init() { if ( !LayerColor::initWithColor(Color4B(255 ...

  9. 烂泥:【解决】ubuntu提示ilanni不在sudoers文件中错误

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 今天在Ubuntu系统中新建一个用户ilanni,添加完毕后.在执行有关sudo的命令时,提示如下的错误信息:ilanni 不在 sudoers 文件中 ...

  10. 计算几何--判断两条线段相交--poj 2653

    Pick-up sticks Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 8862   Accepted: 3262 De ...