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. 【JAVA - 基础】之Annotation注解浅析

    注解在JAVA中,尤其是一些ORM框架(如Hibernate等)中是比较常用的一种机制. 注解是JAVA 1.5之后引入的新功能,正确来说是反射的一部分,没有反射,注解也就无法正常使用.注解可以理解成 ...

  2. Redis_基本类型介绍和指令___2

    1.hash Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). ...

  3. 数据库中substring的使用方法 CONVERT(varchar(12) , getdate(), 112 )

    Sqlserver中经常要操作一些时间类型的字段转换,我又不太记得住,所以搜集了以下的一些SqlserverConvertDateTime相关的资料发表在自己的小站里,方便自己以后要用的时候寻找,望对 ...

  4. MediaProvider 数据库Audio相关表格相应关系

    Android的MediaProvider提供了一系列的Audio,Video,image等表格,用于APP检索相关的音视频图片信息. 首先来看看Audio相关的表格: ×图中颜色同样的部分表示来自于 ...

  5. Android代码中动态设置图片的大小（自动缩放），位置

    项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...

  6. PERCONA-TOOLKIT 工具的安装与使用2

    [root@server-mysql ~]# cd /usr/bin [root@server-mysql bin]# ls pt* pt-align pt-duplicate-key-checker ...

  7. TIMESTAMP 与 explicit_defaults_for_timestamp

    在MySQL 5.6.6之前,TIMESTAMP的默认行为: TIMESTAMP列如果没有明确声明NULL属性,默认为NOT NULL.(而其他数据类型,如果没有显示声明为NOT NULL,则允许NU ...

  8. Sql 随机生成日期时间

    DECLARE @dt1 DATETIME,@dt2 DATETIME,@a BIGINT,@b BIGINT SET @dt1='2010-01-01'--开始日期 SET @dt2='2010-0 ...

  9. HTML文本格式化

    文本格式化标签: 标签 描述 <b> 定义粗体文本. <big> 定义大号字. <em> 定义着重文字. <i> 定义斜体字. <small> ...

  10. xml_03

    1.xml 2.对于XML文档的约束   |-DTD      <!DOCTYPE 根元素 [       <!ELEMENT 元素名 (xx)>       <!ATTLIS ...