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

相同点:都不阻塞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. 建立临时的表 数据 空值 与 NULL 转换

    if exists ( select * from INFORMATION_SCHEMA.tables where table_name = 'Config_Order_ChargesToPreVie ...

  2. iOS自定义NavigationBar

    日常开发中少不了用到UINavigationController,但是很多情况都要自定义NavigationBar.依稀记得自己刚开始也踩了好多坑,凑今天有空,就把想到的写下来.有时间了,考虑再把自定 ...

  3. windows 7 打开控制面板的命令

    在开始菜单中键入contrl,回车就进入了控制面板,比较快

  4. 简单的json传送数据

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  5. (转)每天一个linux命令(46):vmstat命令

    vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行深 ...

  6. MySQL Limit order by

    今天写模糊查询的时候,按照时间排序并进行分页时,在mybatis的映射文件中有这样一条sql语句 SELECT <include refid="Base_Column_List&quo ...

  7. noip2006T1 能量项链

    最近一直在做noip的题,由于太水一直没有写题解,可是这道题,这道题.啊啊啊啊…… 明明水的要命,调了一节课啊!!我干脆不要搞OI了啊! 特别逗比的错误啊!!!! 代码: #include <c ...

  8. mycat1.5~1.6的一个bug

    以下语句在mysql单库中执行正常: SELECT * FROM device WHERE devicetype='AMS.Monitoring.XlCloud.QKL8154.XLCloudDevi ...

  9. Linux下vsftpd搭建过程(防火墙版)

    1.确认主机IP [root@www data]# ifconfig  eth0      Link encap:Ethernet  HWaddr 00:0C:29:22:05:B8         ...

  10. php 获取链接参数

    private function getQuerystr($url,$key){        $res = '';        $a = strpos($url,'?');        if($ ...