Html 4.0为<script>标签定义了defer属性，这个属性的用途是表名脚本在执行时,不会影响页面的构造。也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。但是有一种特殊情况,看如下代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="aaa.js" defer="defer"></script>

    <script src="bbb.js" defer="defer"></script>

</head>

<body>

<div id="div"></div>

</body>

</html>

上面代码有有两个外部脚本,且它们都被设置成延迟加载,HTML5的规范要求脚本按照他们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,但是,事实并非如此,延迟脚本不一定会按照顺序执行,因此最好只包含一个延迟脚本！

异步脚本:

与defer类似,async只适用与外部脚本,并告诉浏览器立即下载文件，标记为async的脚本并不保证按照他们指定的先后顺序执行。如下代码:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="aaa.js"  async></script>

    <script src="bbb.js"  async></script>

</head>

<body>

<div id="div"></div>

</body>

</html>

上面代码中的两个外部脚本文件,都被设置成异步加载的方式,但是第二个脚本问价可能会先于第一个脚本文件之前执行。因此,确保两者之间互不用来非常重要。

JavaScript值延迟脚本和异步脚本的更多相关文章

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

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

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

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

  3. js异步脚本

    1.延迟脚本 HTML4.01为<script>标签定义了defer属性,为了表明脚本在执行时不会影响页面的构造.也就是说,脚本会在整个页面都解析完毕后再运行.因此在<script& ...

  4. 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...

  5. JavaScript 文件延迟和异步加载

    JavaScript 文件延迟和异步加载 -般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件. 这意味着必须等到全部 Jav ...

  6. JavaScript学习10：动态载入脚本和样式

    我们在写Web页面的时候,须要引入非常多的JavaScript脚本文件和CSS样式文件,尤其是在站点需求量非常大的时候,脚本的需求量也随之变大,这样一来,站点的性能就会大打折扣.因此就出现了动态载入的 ...

  7. loadrunner脚本中写入脚本输出log到外部文件,分析参数取值方式

    loadrunner脚本中写入脚本输出log到外部文件,分析参数取值方式 分类: 心得 loadrunner 我的测试 2012-04-01 12:52 2340人阅读 评论(0) 收藏 举报 脚本l ...

  8. javascript 同步加载与异步加载

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面 ...

  9. JavaScript 学习笔记之线程异步模型

    核心的javascript程序语言并没有包含任何的线程机制,客户端javascript程序也没有任何关于线程的定义,事件驱动模式下的javascript语言并不能实现同时执行,即不能同时执行两个及以上 ...

随机推荐

  1. 50% 的财富 500 强企业使用 Windows Azure

    在上周的北美TechEd大会上,我有幸见到了来自世界各地的客户.合作伙伴和分析师,其数量之多,让人震惊.没有什么比亲耳聆听使用 Windows Azure 来开创新天地的客户亲口讲述他们的故事更令人振 ...

  2. hdu - 1083 - Courses

    题意:有P门课程,N个学生,每门课程有一些学生选读,每个学生选读一些课程,问能否选出P个学生组成一个委员会,使得每个学生代言一门课程(他必需选读其代言的课程),每门课程都被一个学生代言(1 <= ...

  3. Triangle LOVE(拓扑排序)

    Triangle LOVE Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/65536K (Java/Other) Total ...

  4. 浅谈hadoop中mapreduce的文件分发

    近期在做数据分析的时候.须要在mapreduce中调用c语言写的接口.此时就须要把动态链接库so文件分发到hadoop的各个节点上,原来想自己来做这个分发,大概过程就是把so文件放在hdfs上面,然后 ...

  5. asp.net 网站所有请求跳转到同一个页面

    应用场景:网站维护和未开发完成时,一般需要把所有请求都跳转的一个相关说明的页面,这样用户不至于困惑这个网站是不存在还是怎么了. Solution1:使用一个名称为 app_offline.htm(名字 ...

  6. memset memcpy函数

    memset 函数 1.其头文件为: #include<memory> 或者#include<string> 2.原型    看清是对每个字节,不是其类型 void *mems ...

  7. JAVA关键字transient

    转载自http://www.cnblogs.com/liuling/archive/2013/05/05/transient.html 1.transient关键字只能修饰变量,而不能修饰方法和类.注 ...

  8. 基于lua+nginx的abtest系统

    指定一个参数 这个参数可以标识客户端唯一id的,比如用户id等 拿到这个id根据系统的hash算法会hash出一个bucket,目前支持的桶总数为10 根据后台设定的map关系(redis或配置文件) ...

  9. mac使用小技

    xcodeブラックスクリーンの解決策: 1.cd ~/Library/Developer/Xcode/DerivedData 2.rm -fr *    //注释:-fr和*是分开的3.关闭模拟器,关 ...

  10. [转]easyui常用控件及样式收藏

    CSS类定义: div easyui-window                               window窗口样式 属性如下: 1)       modal:是否生成模态窗口.tru ...