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. Ubuntu下QT控制台程序无法运行的解决方案以及XTerm的配置方法

    Ubuntu下QT控制台程序无法运行的解决方案以及XTerm的配置方法 最近由于老师要求要在Ubuntu下QT上进程多线程服务器的开发,虽然只是单纯的调用qt的network模块,但是为了避免麻烦,我 ...

  2. 在自定义的js验证规则中调用magento的VarienForm方法验证表单

    js部分<script type="text/javascript"> //<![CDATA[ var loginForm = new VarienForm('l ...

  3. ASP.NET 验证码 不同浏览器 不刷新问题

    具体为什么不刷新是缓存机制不同,验证码图片的src或ImageUrl的获取是来自一个文件,由于连接地址没变所以不同内核浏览器有的会认为源没有变,解决办法就是在连接后面加上一个随机参数如可以用JS的Ma ...

  4. 四、cocos2dx动画Animation介绍

    qinning199原创,欢迎转载,转载请注明:http://www.cocos2dx.net/?p=22 一.帧动画 你可以通过一系列图片文件,像如下这样,创建一个动画: CCAnimation * ...

  5. php缓存生成及更新实现参考哦

    <?php //如果在find/findAll里传入了参数,则该参数即为key ORM::factory('article')->where('user_id', '=', '2')-&g ...

  6. ASP.NET不通过添加web引用的方式调用web service接口

    尊重原著作:本文转载自http://bbs.csdn.net/topics/360223969 创建方法 //动态调用web服务 public static object InvokeWebSer(s ...

  7. SqlServer之存储过程

    存储过程最主要的特色:是当写完一个存储过程后即被翻译成可执行码存储在系统表 内,当作是数据库的对象之一,一般用户只要执行存储过程,并且提供存储过程所需的参数就可以得到所要的结果而不必再去编辑 T-SQ ...

  8. Mysql Cluster 集群 windows版本

    VM1:192.168.220.102 管理节点(MGM) VM2:192.168.220.103 数据节点(NDBD1),SQL节点(SQL1) VM3:192.168.220.104 数据节点(N ...

  9. UIScrollView中添加一个视图，实现让其始终固定在某个位置

    ScrollView中添加一个视图,实现让其始终固定在某个位置,如最底部的位置.方法是自定义一个继承UIScrollView,重写它的layoutSubviews方法.代码如下: #import &q ...

  10. js call方法介绍

    call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN ...