<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. asp.net core 支付宝支付（ 电脑2.0）

    支付宝电脑支付实测在手机浏览器也可以唤醒手机支付宝进行支付,因此也可以作为支付宝手机web支付方式.支付宝电脑支付流程为使用支付宝官方sdk通过获取的支付宝参数构造DefaultAopClient实例 ...

  2. HDU1285 确定名次 拓扑排序

    Problem Description 有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委 ...

  3. 011 处理模型数据时@ModelAttribute的使用

    一:说明 1.使用场景 在下面的场景中: 使用new对象时,最后的效果是两个被赋值了,但是还有一个值是空值的,这个不符合只更新两个值,另一个值不变的情况. 正确的做法: 三个值得数据不是new出来的, ...

  4. 为什么要编译Linux内核？

    新的内核修订了旧内核的bug,并增加了许多新的特性.如果用户想要使用这些新特性,或想根据自己的系统度身定制一个更高效,更稳定的内核,就需要重新编译Linux内核. 通常,更新的内核会支持更多的硬件,具 ...

  5. go语言学习-安装和配置

    go的安装方式主要有两种,一种直接使用系统自带的软件源来安装,比如 ubuntu 可以直接使用 apt 安装,但通常这种方式安装的都不会是最新的.所以通常直接下载最新的安装包,可以到GoCN下载.下面 ...

  6. 如何成为java高手

    成为Java高手是每个Java学习者的梦想,但目前Java知识分支众多,我们该如何学习?本文介绍成为Java高手需要注意的25个学习目标,希望对正在成为Java高手的您有所帮助. 1.你需要精通面向对 ...

  7. sass和less

    一.相同点 sass和less具有变量.作用域.混合.嵌套.继承.运算符.颜色函数.导入和注释等基本特性,而且以“变量”.“混合”.“嵌套”.“继承”和“颜色函数”为五大基本特性. sass和less ...

  8. linux golang开发环境配置(离线方式)

    <获取开发工具>     到https://www.golangtc.com/download 下载安装包, 根据自己的系统选择合适的开发包,这里选择go.1.9.2.linux-amd6 ...

  9. dns 监控系统 设计 dns安全威胁的可视化。

    基于DNS大数据分析实现宽带共享监控系统.实现对宽带用户进行有效管理. 本系统基于DNS大数据分析实现宽带共享监控系统,包括以下方面. 1)数据采集:数据采集过程是通过探针采集的方式,从各地市的DNS ...

  10. 项目冲刺 Sixth

    Sixth Sprint 1.各个成员今日完成的任务 蔡振翼:编写博客 谢孟轩:完善了编辑界面,实现续约功能 林凯:初步实现注册功能 肖志豪:帮助组员 吴文清:完善管理员图书录入功能以及图书录入的界面 ...