1.延迟脚本

HTML4.01为<script>标签定义了defer属性，为了表明脚本在执行时不会影响页面的构造。也就是说，脚本会在整个页面都解析完毕后再运行。因此在<script>中设置defer属性，相当于告诉浏览器立即下载，但是延迟执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" defer="defer" src="js/jquery-1.11.3.js"></script>
</head>
<body>
</body>
</html>

defer属性值适用于外部脚本文件。IE4-IE7还支持对嵌入脚本的defer属性。但是IE8及以后版本则忽略给嵌入脚本设置的defer属性。

2.异步脚本

HTML5为<script>元素定义了async属性。与defer类似，都是改变处理脚本的行为，同样async也只适用于外部脚本文件，并告诉浏览器立即下载，但是标记为async的脚本并不保证按照指定它们的先后顺序执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" defer="defer" src="js/sim1.js"></script>
<script type="text/javascript" defer="defer" src="js/sim2.js"></script>
</head>
<body>
</body>
</html>

代码中第二个脚本很有可能会在第一个脚本之前执行。指定async的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容，为此建议异步脚本不要在加载期间修改DOM

异步脚本一定会在页面load事件前执行。

3.创建script

<script type="text/javascript">
function loadScript(url, callback) {
var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState == "loaded" ||
script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function() {
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
</script>

js异步脚本的更多相关文章

  1. 深入理解JS异步编程五（脚本异步加载）

    异步脚本加载 阻塞性脚本 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕 浏览器是 ...

  2. 原生 JS 中 延迟脚本和异步脚本

    一.延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性.属性的用途是表民脚本在执行时不会影响页面的构造. 脚本会被延迟到页面加载完毕的时候,执行.也就是当 ...

  3. 点评js异步加载的4种方式

    主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...

  4. 关于JS异步加载方案

    javascript延迟加载的解决方案: 1.使用defer标签 <span style="font-size: small;"><script type=&qu ...

  5. js异步加载 defer和async 比较

    网上说法很多,很少一句话能总结清楚的,终于找到两句一针见血的描述,很到位: 相同点:都不阻塞DOM解析 defer  :顺序:保证先后顺序.解析:HTML 解析器遇到它们时,不阻塞(脚本将被异步下载) ...

  6. JavaScript值延迟脚本和异步脚本

    Html 4.0为<script>标签定义了defer属性,这个属性的用途是表名脚本在执行时,不会影响页面的构造.也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<scri ...

  7. JS之脚本延迟

    自从开了博客,我就一下班回来匆匆吃完饭门一关等一开电脑一打开匆匆的研究东西,以至于朋友们都怀疑我是不是都得了自闭症 其实因为我有恐惧心理怕自己的技术哪天跟不上社会了,说到技术我觉得技术不求越新越好,但 ...

  8. JS异步加载的三种方案

    js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...

  9. JavaScript <script>标签的位置、延迟脚本（defer属性）与 异步脚本（async属性）

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

随机推荐

  1. 五、SQL映射的XML文件

    MyBatis真正的力量是在映射语句中.这里是奇迹发生的地方.对于所有的力量,SQL映射的XML文件是相当的简单.当然如果你将它们和对等功能的JDBC代码来比较,你会发现映射文件节省了大约95%的代码 ...

  2. 在Android中访问内置SE和基于SE的卡模拟（一）

    2013-10-10 编写 前言 在“十问Android NFC手机上的卡模拟”文中仅仅简单的介绍了一下相关的概念,如果需要了解基于SE的卡模拟的更多细节,也就是,究竟在Android的NFC手机上, ...

  3. linux环境下tcpdump源代码分析

    Linux 环境下tcpdump 源代码分析 韩大卫@吉林师范大学 tcpdump.c 是tcpdump 工具的main.c, 本文旨对tcpdump的框架有简单了解,只展示linux平台使用的一部分 ...

  4. Python重写C语言程序100例--Part1

    ''' [程序1] 题目:有1.2.3.4个数字,能组成多少个互不同样且无反复数字的三位数?都是多少? 1.程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成全部的排列后再去 掉不满足条件 ...

  5. 快速高效的破解MySQL本地和远程密码

    http://www.kankanews.com/ICkengine/archives/212.shtml 快速的 MySQL 本地和远程密码破解!首先需要对数据库维护人员说明的是,不必紧张,你无需修 ...

  6. Ubuntu下配置tftp服务

    Ubuntu下配置tftp服务 1.安装TFTP软件 sudo apt-get install tftp-hpa tftpd-hpa tftp-hpa是客户端,tftpd-hpa是服务器端 2.建立t ...

  7. android学习笔记之ImageView的scaleType属性

    我们知道,ImageView有一个属性叫做scaleType,它的取值一共有八种,分别是:matrix,fitXY,fitStart,fitCenter,fitEnd,center,centerCro ...

  8. 在Vivado中调用ModelSim生成FSM的状态转移图

    如果我们已经书写了一段FSM代码,现在想倒过来把它转换成为状态转移图,方便我们直观地检查我们书写的状态对不对(在写论文什么的画图太麻烦的时候,有个自动生成的是多方便啊!),应该怎么弄呢?通过在Viva ...

  9. ionic 安装教程

    2015-10-08:国庆回来发现有新版本了,特意更新结果命令失效了,然后重新装吧,结果也失败多次 大概6-7次左右,然后系统是win10,可以启用管理员命令窗口进行安装,第二次成功了!   1.准备 ...

  10. Unity3D 之UGUI 滑动条(Slider)

    这里来讲解下UGUI 滑动条(Slider)的用法 控件下面有三个游戏对象 Background -->背景 Fill Area --> 前景区域 Handle Slide Area -- ...