HTML5中 script标签支持脚本的异步执行async。
脚本将会异步运行:

<script type="text/javascript" src="demo_async.js" async="async"></script>

定义和用法

async 属性规定一旦脚本可用,则会异步执行。

注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。

注释:有多种执行外部脚本的方法:

  • 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
  • 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
  • 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

测试如下:

1.Demo.html

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<script src='../Scripts/js1.js' async></script>
<script>
console.info('html文件执行');
</script>
</body> </html>

2.js1.js

(function(){
console.info('js文件执行');
alert(3);
})();

显示结果:

特别说明:

1.这种方式可以简单实现脚本的异步执行,但是不影响加载

2.这种方式,不能更好的控制在指定文件加载成功后,处理其他操作

3.如果想实现脚本等异步加载推荐使用RequireJS:RequireJS实例

更多:

HTML表单元素中disabled的元素的值不会提交到服务器

HTML5 <a>标签download 属性

HTML5 History对象,Javascript修改地址栏而不刷新页面(二)

HTML 5 <script> async 属性简单设置代码异步执行的更多相关文章

  1. 常用代码之二:使用BackgroundWorker或Task让代码异步执行。

    先要引用System.ComponentModel using System.ComponentModel; 然后创建backgroundworker private void backgroundW ...

  2. JS文件延迟和异步加载:defer和async属性

    -般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件.这意味着必须等到全部 JavaScript 代码都被加载.解析和执行完以 ...

  3. 1关于script标签属性,注意点,浏览器文档模式,各种数据类型的转化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JavaScript <script>标签的位置、延迟脚本(defer属性)与 异步脚本(async属性)

    一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...

  5. 异步加载script,提高前端性能(defer和async属性的区别)

    一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...

  6. html5中script的async属性

    html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...

  7. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

  8. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  9. HTML <script> 标签的 defer 和 async 属性

    HTMKL <script>标签中有defer和async属性,简单介绍一下两者的区别吧.   普通的script标签会让浏览器立即下载并执行完毕,执行也是按照先后顺序,再进行后面的解析. ...

随机推荐

  1. linux中如何清空一个文件的内容

    方法1: echo "" > /www.jbxue.com /xxx.log 方法2: echo "" >> /www.jbxue.com / ...

  2. 【Java】 大话数据结构(12) 查找算法(3) (平衡二叉树(AVL树))

    本文根据<大话数据结构>一书及网络资料,实现了Java版的平衡二叉树(AVL树). 平衡二叉树介绍 在上篇博客中所实现的二叉排序树(二叉搜索树),其查找性能取决于二叉排序树的形状,当二叉排 ...

  3. vue-awesome-swiper使用纪实

    最近做一个项目,需要用到轮播和全屏滑动功能,所以用到了vue-awesome-swiper插件,以下为个人记录下此插件的用法. 效果说明: 上面部分是个轮播图,自动开始轮播,轮播间隔为3000ms 推 ...

  4. 命令:man

    简介 man命令,是manual的缩写,manual表示手册的意思.通过man命令,可以查询大多数shell外部命令的帮助手册. 语法格式 # man [[section] page ...] ... ...

  5. collectionView代理方法快速设置cell大小上下左右间隔

    #define JianGe 25 #define GeShu 4 #define ScreenWidth ([UIScreen mainScreen].bounds.size.width) #def ...

  6. Android-Kotlin在Fragment获取View

    Android-Kotlin在Fragment获取View Overview 在使用Fragment的时候,使用了ButterKnife 来获取View但是一直出错,后来就直接使用Kotlin的导入布 ...

  7. 配置lambda

    =========== 添加 apply plugin: 'me.tatarka.retrolambda' 添加 compileOptions {         sourceCompatibilit ...

  8. 图的遍历 之 深搜dfs

    DFS 遍历 深度优先搜索是一个递归过程,有回退过程. 对一个无向连通图,在访问图中某一起始顶点u 后,由u 出发,访问它的某一邻接顶点v1:再从v1 出发,访问与v1 邻接但还没有访问过的顶点v2: ...

  9. Android 获取手机信息,设置权限,申请权限,查询联系人,获取手机定位信息

    Android 获取手机信息,设置权限,申请权限,查询联系人,获取手机定位信息 本文目录: 获取手机信息 设置权限 申请权限 查询联系人 获取手机定位信息 调用高德地图,设置显示2个坐标点的位置,以及 ...

  10. KVM磁盘镜像qcow2、raw、vmdk等格式区别(转)

    raw(default) the raw format is a plain binary image of the disc image, and is very portable. On file ...