<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. 使用ssh命令进行远程登录

    1.查看SSH客户端版本 有的时候需要确认一下SSH客户端及其相应的版本号.使用ssh -V命令可以得到版本号.需要注意的是,Linux一般自带的是OpenSSH: 下面的例子即表明该系统正在使用Op ...

  2. day17--JQuery实例

        1.表格选择框--全选,反选,取消 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. dict 知识汇总

    增: 1. copy 浅复制 2. setdefault (有就查询,没有就添加): 删: 3. clear:清除 4. pop :删除指定键值对 5. popitem :  随机删除一组键值对 改: ...

  4. set 集合的知识

    1. 定义: 2. 集合的交集,并集,差集: 3. 集合添加add(无序): 4. 添加可迭代对象(字符串,列表,元组)update: 字符串实例: 5. 删除元素( pop , remove ): ...

  5. 初探kafka

    日常中工作中我并没有对kafka接触很多,但了解到很多的框架都和kafka有着紧密的关系.比如rockmetmq是参考了kafka的设计,neflix的缓存组件ehcache是用kafka做数据的同步 ...

  6. Loogn.OrmLite文档

    Getting Started 一. 引入Loogn.OrmLite PM> Install-Package Loogn.OrmLite 二.引入名称空间 using Loogn.OrmLite ...

  7. angular中使用代理

    使用代理 1.在跟目录创建proxy.config.json文件 { "/api": { "target": "http://localhost:30 ...

  8. CNN做序列标注问题（tensorflow）

    一.搭建简单的CNN做序列标注代码 import tensorflow as tf import numpy as np import matplotlib.pyplot as plt TIME_ST ...

  9. 安装android studio&flutter

    参考:https://flutterchina.club/setup-windows/ 1.安装jdk 2.android studio下载地址  https://developer.android. ...

  10. doker学习笔记

    1.获取镜像: docker pull mysql 2,查看已安装的镜像: docker image 3,运行: 查看docker运行:docker info(docker run ubuntu ec ...