HTML 5 <script> async 属性简单设置代码异步执行
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 History对象,Javascript修改地址栏而不刷新页面(二)
HTML 5 <script> async 属性简单设置代码异步执行的更多相关文章
- 常用代码之二:使用BackgroundWorker或Task让代码异步执行。
先要引用System.ComponentModel using System.ComponentModel; 然后创建backgroundworker private void backgroundW ...
- JS文件延迟和异步加载:defer和async属性
-般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件.这意味着必须等到全部 JavaScript 代码都被加载.解析和执行完以 ...
- 1关于script标签属性,注意点,浏览器文档模式,各种数据类型的转化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript <script>标签的位置、延迟脚本(defer属性)与 异步脚本(async属性)
一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...
- 异步加载script,提高前端性能(defer和async属性的区别)
一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...
- html5中script的async属性
html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
- HTML5中script的async属性异步加载JS
HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...
- HTML <script> 标签的 defer 和 async 属性
HTMKL <script>标签中有defer和async属性,简单介绍一下两者的区别吧. 普通的script标签会让浏览器立即下载并执行完毕,执行也是按照先后顺序,再进行后面的解析. ...
随机推荐
- Angular快速学习笔记(3) -- 组件与模板
1. 显示数据 在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性. 使用插值表达式显示组件属性 要显示组件的属性,最简单的方式就是通过插值表 ...
- 【LOJ】#2115. 「HNOI2015」落忆枫音
题解 如果不加这条边,那么答案是所有点入度的乘积 加上了这条边之后,我们转而统计不合法的方案数 就是相当于统计一条路径从y到x,新图所有点度的乘积除上这条路径所有点的点度乘积 初始化为\(f[y] = ...
- Hive的安装和使用
1.Hive1.1 在hadoop生态圈中属于数据仓库的角色.他能够管理hadoop中的数据,同时可以查询hadoop中的数据. 本质上讲,hive是一个SQL解析引擎.Hive可以把SQL查询转换为 ...
- Ubuntu下安装软件提示无法锁定管理目录(/var/lib/dpkg/)的解决办法
Ubuntu下安装软件提示无法锁定管理目录(/var/lib/dpkg/)的解决办法 在安装软件的时候,有时候提示,无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它? 这是 ...
- 大数据小视角4:小议Lambda 与 Kappa 架构,不可变数据的计算探索
这个系列文章之前因为私事荒废了很久,继续更新--之前与老大谈论架构时,老大和我聊了聊分布式数据处理之中的Lambda结构,之前在<Designing Data-Intensive Applica ...
- Java核心编程快速入门
Java核心编程部分的基础学习内容就不一一介绍了,本文的重点是JAVA中相对复杂的一些概念,主体内容如下图所示. 反射reflect是理解Java语言工作原理的基础,Java编译器首先需要将我们编写的 ...
- js数据结构之列表的详细实现方法
* 列表用于存放数据量较少的数据结构* 当数据量较大时,不需要对其进行查找.排序的情况下,使用列表也比较方便. 本数据结构在node环境下运行,需要对node有个基本是了解. 1. listSize: ...
- #pragma pack(n)的使用
在缺省情况下,编译器为了让程序跑得跟快,减少CPU读取数据的指令周期,对结构体的存储进行了优化, 比如:如下结构体 struct s { char ch; int i; }; 虽然变量ch本身只有1个 ...
- 历数PC发展史上的祖先们
转自泡泡网:http://www.pcpop.com/doc/0/774/774178_all.shtml 本文导航 第01页:这几十亿晶体管的前辈是? 第02页:编辑发明的QWERTY键盘 第03页 ...
- 【shell学习笔记】curl命令总结
2014-12-16 20:34 文思海辉 =========== CURL命令总结 1. 下载 curl -o [文件名称] www.baidu.com 2. 显示 HTTP request头信息 ...