1.script元素中的defer属性

1.1说明

  使用该属性可以使脚本延迟到文档完全被解析和显示之后再按照原本的顺序执行,即告诉浏览器立即下载脚本,但延迟执行,该属性只对外部脚本有效

1.2使用方法

 <script type="text/javascript" src="a.js" defer="defer"></script>
<script type="text/javascript" src="b.js" defer="defer"></script>

  浏览器会先执行a.js,在执行b.js

2.script元素中的async属性

2.1说明

  表示异步加载,告诉浏览器立即下载文件,一旦下载完成(页面还在解析中)立即执行,但不保证它们的执行顺序,适用于外部脚本文件

2.2使用方法

<script type="text/javascript" src="a.js" async="async"></script>
<script type="text/javascript" src="b.js" async="async"></script>

    浏览器可能会先执行b.js,在执行a.js

3.二者的区别

defer会等待页面解析完成之后按照顺序执行,而async会在下载完成后立即执行,此时页面可能并未完全解析完成,并且可能不按顺序执行,先下载完成的先执行

<script>中的async与defer属性的更多相关文章

  1. 转:script中的async和defer

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

  2. script标签中的async、defer属性

    Script标签是我们常用的引用js脚本的一种方式. 撸代码的时候,我们常常只写src属性,直接忽略其他属性. 最近发现了2个可以利用的属性:async.defer. 顾名思义async就是异步,在不 ...

  3. 浅谈script标签中的async和defer

    script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了.直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染 ...

  4. script标签的async和defer

    兼容性 IE对于defer一直都支持,async属性IE6-9都没有支持,IE10及以上支持 相同点与不同点 带有async或defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的 ...

  5. html中script标签使用async属性和defer属性的区别

    相同点: 首先async和defer只对header里的外连脚本script标签上起作用,如果script标签是放在header外或者是header里的内置脚本以及动态生成的script标签是不起作用 ...

  6. 怎样理解script标签的defer属性和async属性

    如果script标签是引用的外部js文件, 那就会有一个下载js文件这一过程, 为了不因为这个下载过程而阻塞页面解析与渲染, 我们需要一种机制来解决这一问题, 方法之一就是使用 defer和async ...

  7. JS—ajax及async和defer的区别

    ###1.ajax  “Asynchronous Javascript And XML”(异步 JavaScript 和 XML) 使用: 如不考虑旧版本浏览器兼容性, // 第一步创建xhr对象 v ...

  8. 【笔记】JS脚本为什么要放在body最后面以及async和defer的异同点

    1.没有defer或async 浏览器遇到脚本的时候会暂停渲染并立即加载执行脚本(外部脚本),"立即"指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的 ...

  9. async与defer

    <script>元素的几种常见属性: async  异步加载,立即下载,不应妨碍页面其他操作,标记为 async 的异步脚本并不保证按照指定的先后顺序执行,因此异步脚本不应该在加载期间修改 ...

随机推荐

  1. Epplus下的一个将Excel转换成List的范型帮助类

    因为前一段时间公司做项目的时候,用到了Excel导入和导出,然后自己找了个插件Epplus进行操作,自己将当时的一些代码抽离出来写了一个帮助类. 因为帮助类是在Epplus基础之上写的,项目需要引用E ...

  2. MySQL高可用之MHA切换测试(switchover & failover)

      Preface       I've installed MasterHA yesterday,Now let's test the master-slave switch and failove ...

  3. 「个人训练」Can you solve this equation?(HDU-2199)

    题意与分析 纯粹水题.本来想做下放松心情的,结果还是被坑了qaq 重点就是在浮点误差.比较左右的下次就直接上1e-10,别看着题目说1e-4然后给个-5,结果暴wa.气傻了..... 代码 #incl ...

  4. String 将GBK转UTF-8

    public void transfer(String xml) throws Exception { return new String(xml.getBytes("gbk"), ...

  5. virsh查看迁移信息的两个命令

    virsh qemu-monitor-command uuid --hmp info migrate, 能看到迁移所设置的相关参数,和进度相关信息: virsh domjobinfo uuid命令, ...

  6. LCA(最近公共祖先)——dfs+ST 在线算法

    一.前人种树 博客:浅谈LCA的在线算法ST表 二.沙场练兵 题目:POJ 1330 Nearest Common Ancestors 题解博客:http://www.cnblogs.com/Miss ...

  7. RabbitMQ 的行为艺术

    RabbitMQ 的行为艺术 目录 简介 环境搭建 示例一:简单的 Hello World 示例二:发布/订阅模式 尝试发现 - 新物种 EasyNetQ 简介 RabbitMQ:一个消息系统,基于 ...

  8. C#判断字符串是否为数字字符串

    在进行C#编程时候,有的时候我们需要判断一个字符串是否是数字字符串,我们可以通过以下两种方法来实现.[方法一]:使用 try{} catch{} 语句.      我们可以在try语句块中试图将str ...

  9. 洛谷 P1268 树的重量 解题报告

    P1268 树的重量 题目描述 树可以用来表示物种之间的进化关系.一棵"进化树"是一个带边权的树,其叶节点表示一个物种,两个叶节点之间的距离表示两个物种的差异.现在,一个重要的问题 ...

  10. CF762D Maximum Path

    题目戳这里. 首先明确一点,数字最多往左走一次,走两次肯定是不可能的(因为只有\(3\)行). 然后我们用\(f_{i,j}\)表示前\(i\)行,第\(i\)行状态为\(j\)的最优解.(\(j\) ...