今天几经折腾，终于回家了，最近公司上的事忙了好一阵子，终于可以闲下来，重新在整理一下,又重新了解了一下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. Session分布式共享 = Session + Redis + Nginx

    一.Session 1.Session 介绍 我相信,搞Web开发的对Session一定再熟悉不过了,所以我就简单的介绍一下. Session:在计算机中,尤其是在网络应用中,称为"会话控制 ...

  2. oracle lag与lead分析函数简介

    lag与lead函数是跟偏移量相关的两个分析函数,通过这两个函数我们可以取到当前行列的偏移N行列的值 lag可以看着是正的向上的偏移 lead可以认为负的向下的偏移 具体我们来看几个例子: 我们先看下 ...

  3. Hibernate学习笔记①

    ---恢复内容开始--- 1.JavaEE的三层结构 WEB层--Service层--DAO层 2.Hibernate版本 Hibernate3.x  4.x  5.x 4版本是过渡版本 不使用  5 ...

  4. 4063: [Cerc2012]Darts

    4063: [Cerc2012]Darts Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 85  Solved: 53[Submit][Status] ...

  5. Python模块发布

    项目根目录添加setup.py模块: from distutils.core import setup setup( name="模块名字", version="1.0. ...

  6. Mysql5.7服务下载安装

    身处MySQL这个圈子,能够切身地感受到大家对MySQL 5.7的期待和热情,似乎每个人都迫不及待的想要了解.学习和使用MySQL 5.7.那么,我们不禁要问,MySQL 5.7到底做了哪些改进,引入 ...

  7. 【转】JavaScript 之arguments、caller 和 callee 介绍

    1.前言 arguments, caller ,   callee 是什么? 在JavaScript 中有什么样的作用?本篇会对于此做一些基本介绍. 本文转载自:http://blog.csdn.ne ...

  8. 关于mui选择器的使用

    使用mui引入选择器的picker.js.poppicker.js.及他们的css文件之后引入代码与点击确定之后的状态: document.querySelector('#osex').addEven ...

  9. MySQL中的一些内置函数

    mysql> select now(); #获取当前的日期和时间 +---------------------+ | now() | +---------------------+ | -- : ...

  10. 【Electron】Electron开发入门（七）：打开本地文件或者网页链接 and webview里操纵electron api

    1.打开本地文件或者网页链接 // 打开系统本地文件 const {shell} = require('electron'); // Open a local file in the default ...