<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. 知识点：从迭代器一直撸到yield from

    最近在跟一个系列, 难度和篇幅比较合适我这样的懒人. 敲下代码,作下注释,看看输出,就蛮好. https://www.cnblogs.com/wongbingming/p/9095243.html i ...

  2. POJ 3616 Milking Time 【DP】

    题意:奶牛Bessie在0~N时间段产奶.农夫约翰有M个时间段可以挤奶,时间段f,t内Bessie能挤到的牛奶量e.奶牛产奶后需要休息R小时才能继续下一次产奶,求Bessie最大的挤奶量.思路:一定是 ...

  3. python全栈开发day44-js、DOM、BOM

    JS的三大部分 一.ECMAJavaScript基础语法: 1.javascript的引入方式 1) 行内式 <script> alert(1) </script> 2) 引入 ...

  4. Shell命令 中|| &&使用

    转自:https://www.cnblogs.com/aaronLinux/p/8340281.html

  5. 局域网下ARP欺骗、嗅探，以及DNS欺骗

    准备:kali.xp kali ip:192.168.14.157 目标ip:192.168.14.158 目标网关:192.168.14.2 ARP欺骗:arpspoof -t 目标ip -r 目标 ...

  6. Project_Lemon测评系统使用经验

    Project_Lemon使用经验 如果您还没有安装Project_Lemon,那么请移步https://www.cnblogs.com/CreeperLKF/p/9201859.html去查阅安装教 ...

  7. org.apache.ibatis.binding.BindingException: Type interface XXX is not known to the MapperRegistry.

    动态代理因为namespace的地方写错了

  8. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

  9. ZJUT 地下迷宫 （高斯求期望）

    ShowID=1423">http://cpp.zjut.edu.cn/ShowProblem.aspx?ShowID=1423 设dp[i]表示在i点时到达终点要走的期望步数,那么d ...

  10. ALSA学习资料

    一.内核文档  Linux Sound Subsystem Documentation 二.一些API 1.snd_pcm_period_elapsed 2.snd_pcm_lib_buffer_by ...