<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,浏览器会立即 ...
随机推荐
- STM32的HAL库中的DMA_FLAG_TCIF3_7等几个宏定义的含义
DMA_FLAG_TCIF0_4就是指DMA的通道0和通道4,DMA_FLAG_TCIF1_5就是指DMA的通道1和通道5,DMA_FLAG_TCIF2_6就是指DMA的通道2和通道6,DMA_FLA ...
- python学习之集合
集合(set)是一个无序的不重复元素序列. 可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因为 { } 是用来创建一个空字典. 创建格 ...
- jquery attr方法和prop方法获取input的checked属性问题
jquery attr方法和prop方法获取input的checked属性问题 问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法 ...
- Python作业-选课系统
目录 Python作业-选课系统 days6作业-选课系统: 1. 程序说明 2. 思路和程序限制 3. 选课系统程序目录结构 4. 测试帐户说明 5. 程序测试过程 title: Python作业- ...
- 【Java】 剑指offer(46) 把数字翻译成字符串
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 给定一个数字,我们按照如下规则把它翻译为字符串:0翻译成" ...
- bfs-poj3278
题目链接:http://poj.org/problem?id=3278 题意:农夫原始在N位置上,他的目的是要抓到在K位置上的牛.牛的位置是固定不变的,而农夫的移动是在一条水平线上进行的,移动方式有以 ...
- css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）
.katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...
- 关于 tensorflow-gpu 中 CUDA 和 CuDNN 版本适配问题
问题 今天在使用 tensorflow-yolov3 的时候,发现报错 Loaded runtime CuDNN library: but source was compiled with: . Cu ...
- python数据分析---第04章 NumPy基础：数组和矢量计算
NumPy(Numerical Python的简称)是Python数值计算最重要的基础包.大多数提供科学计算的包都是用NumPy的数组作为构建基础. NumPy的部分功能如下: ndarray,一个具 ...
- BZOJ.5417.[NOI2018]你的名字(后缀自动机 线段树合并)
LOJ 洛谷 BZOJ 考虑\(l=1,r=|S|\)的情况: 对\(S\)串建SAM,\(T\)在上面匹配,可以得到每个位置\(i\)的后缀的最长匹配长度\(mx[i]\). 因为要去重,对\(T\ ...