今天几经折腾，终于回家了，最近公司上的事忙了好一阵子，终于可以闲下来，重新在整理一下,又重新了解了一下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. 每天一个Linux命令 1

    nl命令在Linux系统中用来计算文件中行号.nl可以将输出的文件内容自动的加上行号!其默认的结果与cat -n有点不太一样,nl可以将行号做比较多的显示设计,包括位数与是否自动补齐0等等的功能. 1 ...

  2. jQuery获取Select选择的Text和Value

     jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...});   //为S ...

  3. mybatis基础学习4-插件生成器

    1:安装 2:在所建项目单击右键输入mybatis如下图 *建项目文件时不用建包和类,在配置文件里写即可生成 3:之后在项目生成 自己建的表(这个必须) 单击右键 即可 --------------- ...

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

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

  5. Asp.Net 常用工具类---Config操作（7）

    近期工作比较忙,忙到忘记写博客(自己的借口,主要加班下班后不想动). 月初的时候,打算每两天写一篇博文,分享自己的一些心得和开发体验,无奈现在只写到第六篇,然而时间已经是20号,岁月不饶人! 总想写点 ...

  6. 通过Eclipse3.1以上启动Tomcat访问不到tomcat管理界面的问题（转载）

    通过Eclipse插件启动Tomcat的问题 默认分类   2009-10-23 15:54   阅读118   评论0   字号: 大  中  小 目前在通过Eclipse中插件启动Tomcat时遇 ...

  7. 对VC++6.0爱得深沉（一）安装vc++6.0，支持winXP，win7，win8.1,win10

    [欢迎入坑] 从这里起,我称VC++6.0为小c. 为什么我对小c爱得深沉? 虽然饱受非议,但是,我只想说,我太单纯,小c轻轻松松成功运行在各个win平台,对于我来说她:高速.小巧.便捷.听话.可定制 ...

  8. Ef+T4模板实现代码快速生成器

    转载请注明地址:http://www.cnblogs.com/cainiaodage/p/4953601.html 效果如图,demo(点击demo可下载案例) 项目结构如图 T4BLL添加BLL.t ...

  9. uploadify上传图片的类型错误的解决办法

    大家在做开发的过程中,相信很多人都会使用到uploadify插件来上传图片,但是这个插件也有不完美的地方. 我曾多次遇到过这样一个问题:上传的图片类型明明是没有问题的,但是在上传的时候总是会报错:图片 ...

  10. flex中创建弹出窗口，并传值

    在flex页面中首先创建一个弹出窗口,代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Titl ...