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

相同点：都不阻塞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. linux 在xenserver上安装如何显示图形界面

    centos5.8 64-bit和 centos 6.5 64-bit xenserver安装linux的时候默认使用的VHM,选择对应的虚拟机模板安装linux是Linux Text界面. VHM ...

  2. 你一定能用的上的iOS第三方库

    点国内程序员不常用的热门iOS第三方库:看完,还敢自称"精通iOS开发"吗? 综合github上各个项目的关注度与具体使用情况,涵盖功能,UI,数据库,自动化测试,编程工具等类型, ...

  3. ES6新增Promise

    1.promise概念 ES6 原生提供了 Promise 对象. 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提 ...

  4. android 网络_网络源码查看器

    xml设计 <?xml version="1.0"?> -<LinearLayout tools:context=".MainActivity" ...

  5. Connected_Component Labelling（联通区域标记算法） C++实现

    // Connected-Component Labelling.cpp : 定义控制台应用程序的入口点.//如有是使用,请务必注明引用出处网站:http://www.cnblogs.com/Amat ...

  6. gcc常用命令介绍

    GCC 全称是 GNU C Compiler,是gnu中最流行的c & c++编译器,下面我们看一下一些主要的参数使用方法. 对于一个源文件可以直接生成可执行文件 gcc test.c 默认生 ...

  7. Windows Phone 8.1开发：如何让ListView下拉加载更多？

    Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...

  8. OpenSSL 安全漏洞: heartbleed

    Heartbleed 是 2014年4月7日被广泛报道的一个 OpenSSL 安全漏洞,号称是灾难. 利用它能读取服务器上最多64k的内存,只要该服务器可以通过ssl连接.   Heartbleed ...

  9. ADO.NET基本操作（CRUD、Procedure、Transaction）

    模型沿用上篇博客所提到的学生.教师.课程,以详细的代码进行演示. 增删改查 添加学生.教师.课程 using System.Data.SqlClient; namespace Test { class ...

  10. Nginx+Keepalived实现高可用站点

    Keepalived是一个基于VRRP协议来实现的服务高可用方案,可以利用其来避免IP单点故障,类似的工具还有heartbeat. corosync.pacemaker.但是它一般不会单独出现,而是与 ...