网上说法很多，很少一句话能总结清楚的，终于找到两句一针见血的描述，很到位：

相同点：都不阻塞DOM解析

defer  ：顺序：保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载），待文档解析完成之后，执行脚本。

async  ：顺序：不保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载，一旦下载完成，立即执行它），并继续解析之后的文档。

总结一下：defer 效果是 ：js异步下载完毕后且DOM解析完成后且DOMContentLoaded 事件触发之前按照按页面脚本出现次序顺序从上至下依次执行！

async 效果是：哪个js先下载就先执行，不按页面脚本出现次序顺序，js的执行一定是在 window的load事件触发之前

顺便一提：window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载外部资源过多而颇费周折。

而DOMContentLoaded事件则在形成完成的DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。

个人建议：如果加载的JS存在依赖关系，建议使用defer来保证安全，否则使用async即可

已获得广泛浏览器支持，但使用时需要查询兼容性！

js异步加载 defer和async 比较的更多相关文章

  1. 点评js异步加载的4种方式

    主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...

  2. JS异步加载的三种方式

    js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

  3. 关于JS异步加载方案

    javascript延迟加载的解决方案: 1.使用defer标签 <span style="font-size: small;"><script type=&qu ...

  4. 转:web前端面试题合集 (Javascript相关)（js异步加载详解）

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  5. JS异步加载的三种方案

    js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...

  6. js 异步加载的方式

    js 异步加载的方式 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中 ...

  7. 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案

    关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...

  8. js异步加载的5种方式

    方案1:$(document).ready 点评: 1.需要引用jquery 2.兼容所有浏览器. 方案2:<script>标签的async="async"属性 asy ...

  9. js异步加载的解决方案

    默认情况javascript是同步加载的,javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,如何解决这个问题呢,接下来将为你详细介绍下异步加载js三种实 ...

随机推荐

  1. CCNA的RIP路由学习

    rip(routing infomation protocol,路由信息协议) ,是一个纯粹的距离矢量路由选择协议,RIP每隔30s就将自己完整的路由选择表从所有激活的接口上送出.RIP只将跳计数作为 ...

  2. Mac下github的使用

    新建github账户   新建Repository,如下图:   建立连接github的秘钥 打开mac的shell cd ~ mkdir .ssh cd .ssh ssh-keygen -t rsa ...

  3. WCF之并发,吞吐量和限流

    并发 Single重入模式.对于每一个服务实例,同一时刻只能处理一个请求,其他对该实例的请求被排队. PerCall,每一线程会分配一个新的服务实例上.不会有并发性问题.不影响吞吐量. PerSess ...

  4. EasyUI form ajax submit到MVC后，在IE下提示下载内容的解决办法

    问题描述: 项目环境为,.Net Mvc5+EF6……前端框架使用的是EasyUI v1.4.4. 在视图页面中,使用form的submit方法提交表单数据时,如果是使用IE的话,请求成功后IE会提示 ...

  5. 9 款赏心悦目的 HTML5/CSS3 特效

    1.HTML5 WebGL实验,超酷的HTML5 Canvas波浪墙 这是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果. 在线演示 ...

  6. TextEdit验证

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Drawing;using ...

  7. 5种IO模型

    Unix下可用的5种I/O模型分别是: 阻塞IO 非阻塞IO IO复用(select和poll) 信号驱动式IO(SIGIO) 异步IO(POSIX的aio系列函数)   阻塞式I/O模型:      ...

  8. nginx服务器配置多域名

    nginx服务器支持配置多站点,我们可以通过配置子域名让你的一个域名下放置多个项目. 那么如何实现这个过程呢? 网络上的许多方案,有些写的过于繁杂,有些则是配置有误,或者说,有些配置项是要根据自己的主 ...

  9. windows bat脚本实现ftp自动下载 删除

    现在有一个需求就是把远程某个文件下面的图片,下载到本地,并且删除下载成功的的文件,而且远程目录下的那个图片会随时增加.假设一下如果所有的脚本都写好了,那么就需要调用windows上的计划任务定时执行脚 ...

  10. 关于CSS中的PX值（像素）

    场景: 人物:前端实习生「阿树」与 切图工程师「玉凤」事件:设计师出设计稿,前端实现页面 玉凤:树,设计稿发给你啦,差那么点像素,就叼死你┏( ￣へ￣)=☞阿树:~(>_<)~毛问题噶啦~ ...