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. React Antd中样式的修改

    如果需要对antd的样式进行修改, 进入你要修改的页面 注意:不能直接在自己的文件下面,加入一个css,修改这个class的样式,应该 加入global限定,global {} , 在{}里面写入 . ...

  2. NMON记录服务器各项性能数据

    1.将下载下来的nmon文件通过ftp传入服务器下,将nmon权限全开chmod +x nmon 2.查看nmon可以看到如下内容 查看各项指标 输入C,CPU数据 M,内存 N,网络 D,磁盘 T, ...

  3. 玩玩自动化测试之selenium篇

    现如今社会科技发展太快了,纯功能点点点已经落后别人好几条街了,所以为了让自己多点职业生涯年限,得挺起肩,傲起头.自动化测试,其本质是用代码程序测试程序,所以其实第一步应该学好编程语言,后再自己开发自动 ...

  4. Spring实战第四章学习笔记————面向切面的Spring

    Spring实战第四章学习笔记----面向切面的Spring 什么是面向切面的编程 我们把影响应用多处的功能描述为横切关注点.比如安全就是一个横切关注点,应用中许多方法都会涉及安全规则.而切面可以帮我 ...

  5. Oracle 11g 审计跟踪管理

    在Oracle11g之前,oracle数据库自带的审计功能是关闭的,考虑到性能和审计管理的复杂性,用户一般不打开审计功能.如果有审计要求,DBA会采用trigger来实现对DDL审计的方法来折中.例如 ...

  6. 并查集——poj2236(带权并查集)

    题目:Wireless Network 题意:给定n台已损坏计算机的位置和计算机最远通信距离d,然后分别根据命令执行以下两种操作: "O p" (1 <= p <= N ...

  7. SSH 项目中 使用websocket 实现网页聊天功能

    参考文章  :java使用websocket,并且获取HttpSession,源码分析    http://www.cnblogs.com/zhuxiaojie/p/6238826.html 1.在项 ...

  8. MapReduce 并行编程理论基础

    对于mapreduce这一并行计算模型,一直以来都不是很清楚其具体的执行细节,今天看了学院一位老师的实验指导书,对这一过程有了一个初步的理解,特别是map阶段和reduce阶段,所以做了一份笔记,现在 ...

  9. IP数据报格式 及分组转发算法

    ip数据报分首部和数据两部分组成: 首部分为固定部分和可变部分 版本——占 4 位,指 IP 协议的版本 目前的 IP 协议版本号为 4 (即 IPv4) 首部长度——占 4 位,可表示的最大数值 是 ...

  10. PhoneGap & HTML5 学习资料网址

    PhoneGap 与 Application Cache应用缓存  http://www.html5cn.org/forum.php?mod=viewthread&tid=40272 加速We ...