摘录如下:

可以很清晰的看出:

  • <script>: 脚本的获取和执行是同步的。此过程中页面被阻塞,停止解析。
  • <script defer = "defer">:脚本的获取是异步的,执行是同步的。脚本加载不阻塞页面的解析,脚本在获取完后并不立即执行,而是等到DOMready之后才开始执行。
  • <script async = "async">: 脚本的获取是异步的,执行是同步的。但是和<script defer = "defer">的不同点在于脚本获取后会立刻执行,这就会造成脚本的执行顺序和页面上脚本的排放顺序不一致,可能造成脚本依赖的问题。

参考文献:

Asynchronous and deferred JavaScript execution explained

图解script的三种加载方式 异步加载顺序的更多相关文章

  1. Android 应用开发 之通过AsyncTask与ThreadPool(线程池)两种方式异步加载大量数据的分析与对比--转载

     在加载大量数据的时候,经常会用到异步加载,所谓异步加载,就是把耗时的工作放到子线程里执行,当数据加载完毕的时候再到主线程进行UI刷新.在数据量非常大的情况下,我们通常会使用两种技术来进行异步加载,一 ...

  2. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  3. jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  4. windows phone 三种数据共享的方式(8)

    原文:windows phone 三种数据共享的方式(8) 本节实现的内容是数据共享,实现的效果描述:首先是建立两个页面,当页面MainPage通过事件导航到页面SecondPage是,我们需要将Ma ...

  5. 深入浅出spring IOC中三种依赖注入方式

    深入浅出spring IOC中三种依赖注入方式 spring的核心思想是IOC和AOP,IOC-控制反转,是一个重要的面向对象编程的法则来消减计算机程序的耦合问题,控制反转一般分为两种类型,依赖注入和 ...

  6. HTML三种样式引入方式

    HTML三种样式引入方式   HTML有三种样式引入方式:行内样式(inline Styles).嵌入式样式表(Embedded Style Sheets).外部样式表(External Style ...

  7. VMware的三种网络连接方式区别

    关于VMware的三种网络连接方式,NAT,Bridged,Host-Only ,在刚接触的时候通常会遇到主机Ping不通虚拟机而虚拟机能Ping得通主机:主机与虚拟机互不相通等等网络问题.本文就这三 ...

  8. .NET中的三种接口实现方式

    摘自:http://www.cnblogs.com/zhangronghua/archive/2009/11/25/1610713.html 一般来说.NET提供了三种不同的接口实现方式,分别为隐式接 ...

  9. Apache Spark探秘:三种分布式部署方式比较

    转自:链接地址: http://dongxicheng.org/framework-on-yarn/apache-spark-comparing-three-deploying-ways/     目 ...

随机推荐

  1. R语言︱机器学习模型评估方案(以随机森林算法为例)

    笔者寄语:本文中大多内容来自<数据挖掘之道>,本文为读书笔记.在刚刚接触机器学习的时候,觉得在监督学习之后,做一个混淆矩阵就已经足够,但是完整的机器学习解决方案并不会如此草率.需要完整的评 ...

  2. 基于busybox的Linux小系统制作 (initrd)

    我们有时候有需要在busybox基础上,制作linux,可是却不知道具体怎么做,这里将对基于busybox的linux小系统制作做出详细的步骤说明.准备环境:1.一个Redhat完整系统的虚拟机,本次 ...

  3. 详解Linux Initrd

    在Linux操作系统中,有一项特殊的功能--初始化内存盘INITRD(INITial Ram Disk)技术,而且内核支持压缩的文件系统映像.有了这两项功能,我们可以让Linux系统从小的初始化内存盘 ...

  4. Struts2实现文件上传报错(一)

    1.具体报错如下 2014-5-1 23:02:38 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service( ...

  5. python爬取youtube视频 多线程 非中文自动翻译

    声明:我写的所有文章都是发在博客园的,我看到其他复制粘贴过去的 连个出处也不写,直接打上自己的水印...真是没的说了. 前言:前段时间搞了一些爬视频的项目,代码都写好了,这里写文章那就在来重新分析一遍 ...

  6. 【深入理解JVM】类加载器与双亲委派模型

    原文链接:http://blog.csdn.net/u011080472/article/details/51332866,http://www.cnblogs.com/lanxuezaipiao/p ...

  7. C#迭代语句、跳转语句--C#基础

    1.foreach每执行一次内含的代码时,循环变量就会一次读取集合中的一个元素,不需要个数.循环变量只是一个只读的局部变量,这个值是不能修改的.char后的word是 foreach语句的迭代变量,它 ...

  8. thinkphp在mac下报错

    简要:众所周知,开发软件最好的环境是在MAC下;为此在黑苹果上,用Thinkphp开发;在过程中出现,找不到model以及数据库类型错误;为此向大家分享解决办法,希望能够帮助困惑的伙伴们,如果有不对或 ...

  9. Rolling Update - 每天5分钟玩转 Docker 容器技术(140)

    滚动更新是一次只更新一小部分副本,成功后,再更新更多的副本,最终完成所有副本的更新.滚动更新的最大的好处是零停机,整个更新过程始终有副本在运行,从而保证了业务的连续性. 下面我们部署三副本应用,初始镜 ...

  10. js备战春招の四の严格模式

    JavaScript 严格模式(strict mode)即在严格的条件下运行. use strict 严格模式下你不能使用未申明的变量 "use strict" 指令只运行出现在脚 ...