<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的更多相关文章

  1. script的defer和async

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

  2. script标签defer与async的区别

    总结: async 会在文件下载完毕后立即执行 会阻止html parser defer 会下载完以后等html parser结束后执行,保证顺序

  3. javascript的defer和async的区别。

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

  4. defer 和 async 本地对象和宿主对象

    <script async></script> 没有defer和async的情况下是"同步执行"的,浏览器解析到这里的时候,会先加载资源完成后立即执行,并阻 ...

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

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

  6. defer和async的区别

    先来试个一句话解释仨,当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 a ...

  7. defer与async

    defer:该属性指定的脚本不会修改DOM,因此代码可以安全的延迟执行. 含defer属性的script标签可以放在任何位置,在页面解析到该script标签时,开始下载脚本,但不会执行脚本,直至DOM ...

  8. defer和async的详细区别

    看过javascript高级程序设计的人,在javascript高级程序设计里,应该看到了介绍了有关defer和async的区别,可是比较浅显,而且也说得不是很清楚.下面我们来通过图片来详细了解下df ...

  9. defer与async的区别

    当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 async,浏览器会立即 ...

随机推荐

  1. struts2的文件上传和文件下载

    实现使用Struts2文件上传和文件下载: 注意点: (1)对应表单的file1和私有成员变量的名称必须一致 <input type="file" name="fi ...

  2. Codeforces Round #341 (Div. 2) E - Wet Shark and Blocks

    题目大意:有m (m<=1e9) 个相同的块,每个块里边有n个数,每个数的范围是1-9,从每个块里边取出来一个数组成一个数,让你求组成的方案中 被x取模后,值为k的方案数.(1<=k< ...

  3. Python进行URL解码

    import urllib rawurl=xxx url=urllib.unquote(rawurl) 所用模块:urllib 所用函数:urllib.unquote() 案例 import urll ...

  4. Ubuntu 开机自启动SSH+远程关机

    Ubuntu 开机自启动SSH+远程关机   安装SSH 如何通过ssh远程登录linux系统 开机自启动ssh sudo gedit /etc/rc.locl # 输入密码 # 添加下面命令于 ex ...

  5. vue 之 加载 iframe 的处理

    vue中加载 iframe  会出现跨域问题.以及iframe的高度自适应问题,以下是本人的解决办法: getGoodsContentHtml---- 你的iframe页面的地址,  如不同域的情况下 ...

  6. HDU.3032.Nim or not Nim？(博弈论 Lasker's Nim)

    题目链接 \(Description\) 有多堆石子, 每次可以将任意一堆拿走任意个或者将这一堆分成非空的两堆, 拿走最后一颗石子的人胜利.问谁会获得胜利. \(Solution\) Lasker's ...

  7. Python3练习题系列（10）——项目骨架构建

    目标: 如何创建<项目“骨架”目录> 包含:项目文件布局.自动化测试代码,模组,以及安装脚本. 由于编写一个Python文件可以作为一个模块,一个带__init__.py的目录算一个包. ...

  8. 数据结构+算法面试100题~~~摘自CSDN

    数据结构+算法面试100题~~~摘自CSDN,作者July 1.把二元查找树转变成排序的双向链表(树) 题目:输入一棵二元查找树,将该二元查找树转换成一个排序的双向链表.要求不能创建任何新的结点,只调 ...

  9. 封装PHP验证码方法

    /** * 生成验证码 * @param integer $width 图片宽度 * @param integer $height 图片高度 * @param string $type 验证码类型 * ...

  10. Golang 实现 set 集合，变相实现 切片去重、排序 功能

    Java 中的集合(set)去重很方便,PHP 中的数组值去重,就更加方便,一个函数搞定:array_unique(),Golang 中就比较苦逼了,官方没有提供对“切片去重”的功能,而项目中,又经常 ...