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. Codeforces Round #533 (Div. 2) E - Helping Hiasat 最大团

    E - Helping Hiasat 裸的最大团,写了一种 2 ^ (m / 2)  * (m / 2)的复杂度的壮压, 应该还有更好的方法. #include<bits/stdc++.h> ...

  2. ClouderaManager配置报警邮件

  3. C++ 大学课堂知识点总结

    一.从C到C++1.引用int b;int &a = b;//a是引用类型       定义的时候加&  表示引用   其余都是取地址  a是b别名 使用a和使用b是一样的  主要用于 ...

  4. jqplot利用ajax传值画图表(利用jsp连接数据库)

    实现从数据库中取得数据,再把数据传给画jqplot的jsp界面!jsp界面再进行画图,画出我们所需的图表! 有两个jsp界面,7-12.jsp用来连接数据库,并把数据传给ajaxauto.jsp,aj ...

  5. Django中的ORM关系映射查询方面

    ORM:Object-Relation Mapping:对象-关系映射 在MVC框架中的Model模块中都包括ORM,对于开发人员主要带来了如下好处: 实现了数据模型与数据库的解耦,通过简单的配置就可 ...

  6. KNN与SVM对比&SVM与逻辑回归的对比

    首先说一下两种学习方式: lazy learning  和  eager learning. 先说 eager learning, 这种学习方式是指在进行某种判断(例如,确定一个点的分类或者回归中确定 ...

  7. Codeforces.643E.Bear and Destroying Subtrees(DP 期望)

    题目链接 \(Description\) 有一棵树.Limak可以攻击树上的某棵子树,然后这棵子树上的每条边有\(\frac{1}{2}\)的概率消失.定义 若攻击以\(x\)为根的子树,高度\(ht ...

  8. [Java]Servlet&JSP

    在这里学习Servlet和JSP >> Servlet&JSP的那些事儿 >> servlet [书籍] 孙鑫的<Servlet/JSP深入详解:基于Tomcat ...

  9. Elasticsearch 实现自定义排序插件

    插件入口: package ttd.ugc.plugin; import org.elasticsearch.plugins.Plugin;import org.elasticsearch.scrip ...

  10. [原创]WebScarab工具介绍

    [原创]WebScarab工具介绍 一 WebScarab介绍 WebScarab是一个用来分析使用HTTP和HTTPS协议的应用程序框架.其原理很简单,WebScarab可以记录它检测到的会话内容( ...