今天几经折腾，终于回家了，最近公司上的事忙了好一阵子，终于可以闲下来，重新在整理一下,又重新了解了一下defer和async在页面加载过程差异。

定义和用法

async 属性规定一旦脚本可用，则会异步执行。

注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。

注释：有多种执行外部脚本的方法：

  • 如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
  • 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
  • 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

        <script>

        window.onload = function(){

            console.log("window is loaded")

        }

        document.onreadystatechange = function(){

            console.log(document.readyState)

        }

        console.log("normal laod")

    </script>

</head>

<body>

    <script src="defer/a.js" defer></script>

    <script src="defer/async-defer.js" async defer></script>

    <script src="async/a.js" async></script>

    <script src="async/b.js" async></script>

    <script >

        console.log("last node")

    </script>

</body>

</html>

看一下在chrome中执行结果：

normal laod

index.html:24 last node

index.html:12 interactive

a.js:1 defer d

async-defer.js:1 async-defer

a.js:1 async a

b.js:1 async b

index.html:12 complete

index.html:9 window is loaded

执行顺序：

normal > defer > async-defer > async > complete > onload

看似好像都是这样顺序加载没有什么问题，其实在async中，并不是像现在这样看到的 async a async b；当文件加载大或者延迟，是会影响async和defer加载结果。

script defer和async一探的更多相关文章

  1. 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...

  2. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

  3. script的defer和async

    我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...

  4. 转:script中的async和defer

    script中的async和defer defer: This Boolean attribute is set to indicate to a browser that the script is ...

  5. <script>标签中的 defer 与 async区别

    在html里,使用<script>标签对脚本进行外部或内部引用,<script>标签包含了两个特殊的属性:defer与async,他们的区别如下: 1.若<script& ...

  6. HTML <script> 标签的 defer 和 async 属性

    HTMKL <script>标签中有defer和async属性,简单介绍一下两者的区别吧.   普通的script标签会让浏览器立即下载并执行完毕,执行也是按照先后顺序,再进行后面的解析. ...

  7. 异步加载script,提高前端性能(defer和async属性的区别)

    一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...

  8. <script>标签里的defer和async属性 区别（待补充）

    defer与async的区别(表格显示): table th:first-of-type { width: 150px; } table th:nth-of-type(2) { } 区别 defer ...

  9. <script>, <script async>, <script defer> 三种标签的区别

    <script>, <script async>, <script defer> 三种标签的区别 <script>标签 阻塞html parsing 脚 ...

随机推荐

  1. C++:基础篇-32位和64位系统区别及字节数

    今儿面试了一个刚刚毕业的,但是不知道一个int.long.double这几个都是多少位,我给你们总结一下哈: 常用数据类型对应字节数  可用如sizeof(char),sizeof(char*)等得出 ...

  2. [HDU1210] Eddy's 洗牌问题

    Problem Description Eddy是个ACMer,他不仅喜欢做ACM题,而且对于纸牌也有一定的研究,他在无聊时研究发现,如果他有2N张牌,编号为1,2,3..n,n+1,..2n.这也是 ...

  3. 1610: [Usaco2008 Feb]Line连线游戏

    1610: [Usaco2008 Feb]Line连线游戏 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 1396  Solved: 615 [Subm ...

  4. 在LaTeX 与 LyX 中设置“Contents”为“目录”

    在 LaTeX 中,目录一般被显示为英文"Contents",因此需要设置成"目录". 通常在 Preamble 按照如下方式设置: \renewcommand ...

  5. Xamarin自定义布局系列——ListView的一个自定义实现ItemsControl（横向列表）

    在以前写UWP程序的时候,了解到在ListView或者ListBox这类的列表空间中,有一个叫做ItemsPannel的属性,它是所有列表中子元素实际的容器,如果要让列表进行横向排列,只需要在Xaml ...

  6. MySQL相关信息（二）

    1.修改MySQL提示符 (1)连接客户端时通过参数指定 shell>mysql -u root -p --prompt  提示符 C:\Users\Administrator>mysql ...

  7. Ubuntu 不支持 rpm

    不是第一次犯这个错误了. 记一下. 每次安装jdk 的时候,习惯性下载rpm包. 然后的,然后在 ubuntu上rpm 安装的时候就跪了.. ubuntu需要使用Alien 把rpm 转成 deb再安 ...

  8. Effective Modern C++ Item 27：重载universal references

    假设有一个接收universal references的模板函数foo,定义如下: template<typename T> void foo(T&& t) { cout ...

  9. JavaWeb之Filter、Listener

    昨天和大家介绍了一下JSON的用法,其实JSON中主要是用来和数据库交互数据的.今天给大家讲解的是Filter和Listener的用法. 一.Listenner监听器 1.1.定义 Javaweb中的 ...

  10. iOS网络编程笔记——Socket编程

    一.什么是Socket通信: Socket是网络上的两个程序,通过一个双向的通信连接,实现数据的交换.这个双向连路的一端称为socket.socket通常用来实现客户方和服务方的连接.socket是T ...