<script> 的defer和async
<script src="../file.js" async="async"></script>
file.js----
仅仅只有alert("hello,world");
async 属性仅适用于外部脚本（只有在使用 src 属性时）。
有多种执行外部脚本的方法：
- 如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
- 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
- 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
<html>
<head>
<script type="text/javascript" src="file.js" async="async"></script>
</head>
<body>
<div style="height:100px;width:100px;background-color:#000000">
</div> </body>
</html>
在IE8下执行代码并没有体现异步的功能，执行顺序为：
(1)弹出 hello,world
(2)关闭 "hello,world"后渲染BOM界面
将相同的代码在chorme中进行执行，体现异步特性，即弹出hello,world和渲染浏览器同时进行
关闭【确定】按钮后执行页面如下：
在chorme下的执行结果如下：
<script> 的defer和async的更多相关文章
- script的defer和async
我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...
- script标签defer与async的区别
总结: async 会在文件下载完毕后立即执行 会阻止html parser defer 会下载完以后等html parser结束后执行,保证顺序
- javascript的defer和async的区别。
我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...
- defer 和 async 本地对象和宿主对象
<script async></script> 没有defer和async的情况下是"同步执行"的,浏览器解析到这里的时候,会先加载资源完成后立即执行,并阻 ...
- javascript中的defer和async学习+javascript执行顺序
一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...
- defer和async的区别
先来试个一句话解释仨,当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 a ...
- defer与async
defer:该属性指定的脚本不会修改DOM,因此代码可以安全的延迟执行. 含defer属性的script标签可以放在任何位置,在页面解析到该script标签时,开始下载脚本,但不会执行脚本,直至DOM ...
- defer和async的详细区别
看过javascript高级程序设计的人,在javascript高级程序设计里,应该看到了介绍了有关defer和async的区别,可是比较浅显,而且也说得不是很清楚.下面我们来通过图片来详细了解下df ...
- defer与async的区别
当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 async,浏览器会立即 ...
随机推荐
- BZOJ1819 [JSOI]Word Query电子字典 Trie
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1819 题意概括 字符串a与字符串b的编辑距离是指:允许对a或b串进行下列“编辑”操作,将a变为b或 ...
- BZOJ5045 打砖块 2017年9月月赛 其他
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ5045 题意概括 有一堵墙. 现在挖掉某些砖.如果有相邻的某两个砖没有了,那么他们中上方的那块也没了 ...
- Vijos1906 联合权值 NOIP2014Day1T2 树形动态规划
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - Vijos1906 题意概括 有一棵树,每一个节点都有一个权值w[i].下面说的x,y都是该树中的节点. 对于 ...
- 2.2博客系统 |FileField字段 |Media配置
基于forms组件和Ajax实现注册功能 1 基于forms组件设计注册页面 --点击头像 === 点击input --头像预览: 修改用户选中的文件对象:获取文件对象的路径:修改img的src属性, ...
- C#资源管理器
窗体搭建:ContextMenuStrip右键菜单,Treeview树形菜单,Listview控件 新建"我的文件"类: public class MyFile { public ...
- 细说java中的类
前言 最近在学习<java编程思想> 学到了内部类 类不就是class吗 天天用 还能讲出花来了不成... 其实不然,在java中,类的种类和使用方式多种多样,花样繁多.其中主要有 普通类 ...
- NTFS的交换数据流ADS应用
NTFS的交换数据流ADS应用 NTFS是Windows常用的文件系统格式.该格式支持交换数据流(Alternate Data Streams,缩写ADS)特性.该特性可以让多个文件流使用同一个文 ...
- bzoj2830: [Shoi2012]随机树
题目链接 bzoj2830: [Shoi2012]随机树 题解 q1好做 设f[n]为扩展n次后的平均深度 那么\(f[n] = \frac{f[n - 1] * (n - 1) + f[n - 1] ...
- Codeforces.547D.Mike and Fish(思路 欧拉回路)
题目链接 \(Description\) 给定平面上n个点,将这些点染成红or蓝色,要求每行.每列红色点与蓝色点数量的差的绝对值<=1.输出方案(保证有解). \(Solution\) 参考这 ...
- 20172302 《Java软件结构与数据结构》第七周学习总结
2018年学习总结博客总目录:第一周 第二周 第三周 第四周 第五周 第六周 第七周 教材学习内容总结 第11章 二叉查找树 1.二叉查找树是一种含有附加属性的二叉树,该属性即其左孩子小于父节点,而父 ...