defer该属性用来通知浏览器,这段脚本代码将不会产生任何文档内容。例如 JavaScript代码中的document.write()方法将不会骑作用,浏览器遇到这样的代码将会忽略,并继续执行后面的代码。属性只能是 defer,与属性名相同。在HTML语法格式下,也允许不定义属性值,仅仅使用属性名。

async该属性为html5中新增的属性,它的作用是能够异步地下载和执行脚本,不因为加载脚本而阻塞页面的加载。一旦下载完毕就会立刻执行。

async和defer一样,都不会阻塞其他资源下载,所以不会影响页面的加载,但在async的情况下,js文档一旦下载完毕就会立刻执行,所以很有可能不是按照原本的顺序来执行,如果js有依赖性,就要注意了。

如下图:

defer和async的比较

相同点:

  • 加载文件时不阻塞页面渲染;
  • 对于inline的script无效;
  • 使用这两个属性的脚本中不能调用document.write方法;
  • 有脚本的onload的事件回调;
  • 允许不定义属性值,仅仅使用属性名;

不同点:

  • html的版本html4.0中定义了defer;html5.0中定义了async;这将造成由于浏览器版本的不同而对其支持的程度不同;
  • 执行时刻:每一个async属性的脚本都在它下载结束之后立刻执行,同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱 的情况;每一个defer属性的脚本都是在页面解析完毕之后,按照原本的顺序执行,同时会在document的DOMContentLoaded之前执 行。

这两个属性会有三种可能的组合:

  • 如果async为true,那么脚本在下载完成后异步执行。
  • 如果async为false,defer为true,那么脚本会在页面解析完毕之后执行。
  • 如果async和defer都为false,那么脚本会在页面解析中,停止页面解析,立刻下载并且执行。

相关阅读:script的defer属性

script的async属性

【javascript基础】 JavaScript defer和async区别的更多相关文章

  1. javascript中的defer和async学习+javascript执行顺序

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

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

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

  3. defer 和 async 区别

    defer saync 共同点: script 标签属性, 控制脚本加载时间,解决script下载阻塞的问题. 区别: defer:推推推荐! 异步加载,所有元素解析完执行. async: 异步加载, ...

  4. JavaScript基础——JavaScript数据类型(笔记)

    数据类型(笔记) null和undefined 在JavaScript中有两个特殊的值: null和undefined.简单说明如下: null 是Null类型的值,Null类型的值只有一个值(nul ...

  5. JavaScript基础——JavaScript语法基础(笔记)

    JavaScript语法基础(笔记) 1.语言编码 JavaScript语言建立在Unicode字符集基础之上,因此脚本中,用户可以使用双字节的字符命名常量.变量或函数等. [示例] var 我=&q ...

  6. JavaScript基础JavaScript的常用编码惯例(007)

    采用一定的编码惯例,可以使得项目中的代码提到较高的一致性,可读性和可预测性. 1.缩进缩 进可以提高代码的可读性.不过错误的缩进也可能导致代码的误读.有人认为缩进应该使用tab,另外的一些人主张采用4 ...

  7. (译文)JavaScript基础——JavaScript中的深拷贝

    在JavaScript中如何拷贝一个对象? 通过引用调用 function mutate(obj) { obj.a = true; } const obj = {a: false}; mutate(o ...

  8. JavaScript基础——JavaScript函数(笔记)

    avaScript 函数(笔记) JavaScript 是函数式编程语言,在JavaScript脚本中可以随处看到函数,函数构成了JavaScript源代码的主体. 一.定义函数 定义函数的方法有两种 ...

  9. JavaScript基础——JavaScript常量和变量(笔记)

    JavaScript常量和变量(笔记) Javascript代码严格区分大小写. javascript暂不支持constant关键字,不允许用户自定义常量. javascript使用var关键字声明变 ...

随机推荐

  1. $python collections库

    collections库是python内置的集合库,本文主要讲解以下5种数据结构的用法: namedtuple 命名元组,是tuple的子类 deque 双向列表 defaultdict 有默认值的字 ...

  2. python单元测试框架pytest——fixture函数(类似unitest的setup和teardown)

    pytest的setup和teardown函数(曾被一家云计算面试官问到过). pytest提供了fixture函数用以在测试执行前和执行后进行必要的准备和清理工作.与python自带的unitest ...

  3. Minor GC和Full GC区别(转)

    http://blog.csdn.net/u010796790/article/details/52213708   概念: 新生代 GC(Minor GC):指发生在新生代的垃圾收集动作,因为 Ja ...

  4. c++第三十二天

    p164~p170: 大致内容 迭代语句 1.while语句. 2.传统for. 3.范围for.两个注意点是:1- 通常使用auto来确保类型相容,2- 如果需要修改元素则需要使用&符(还可 ...

  5. mysql命令行创建数据库

    create database publiccms; grant all privileges on publiccms.* to root@localhost identified by 'publ ...

  6. 20145328 《Java程序设计》实验五实验报告

    20145328 <Java程序设计>实验五实验报告 实验名称 Java网络编程 实验内容 用书上的TCP代码,实现服务器与客户端. 客户端与服务器连接 客户端中输入明文,利用DES算法加 ...

  7. 回到HTML〇

    HTML(HyperText Markup Language),用来向浏览器标示文档的所有“内容”与“结构”. 抱着温故而知新的态度,在这里通过“回到HTML”系列文章,重新梳理一下HTML的相关知识 ...

  8. 修改Linux登录提示信息

    佛祖保佑式 cat >> /etc/profile.d/message.sh << END echo -e "\033[33;40;5m _ooOoo_ O88888 ...

  9. springboot部署在云服务器上

    1.window云服务器上 在本地的SpringBoot的根目录下 mvn clean package 打包jar 在云服务上安装jdk 将jar拷贝到云服务器上 在jar包所在的相应的位置,执行ja ...

  10. Anaconda 环境中使用pip安装时候出现的一些问题

    author:pprp date:18/8/12 --- 1. AttributeError: Module Pip has no attribute 'main' solution:降低pip的版本 ...