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. Python学习笔记5-字符串、bool、数值操作和数组字典排序

    1.字符串 # 字符串数字之间转换 # x = int("6") # print type(x) #<type 'str'> # y = str(6) # print ...

  2. windows更改DNS设置

    浏览器解析域名时,首先在本地的host文件中查找记录, HOSTS文件记录的地址在: 将注释去掉 访问ysp.tlmall.com 会访问127.0.0.1

  3. Mac 下 Chrome 快捷键大全

    1. 标签页和窗口快捷键 ⌘-N 打开新窗口. ⌘-T 打开新标签页. ⌘-Shift-N 在隐身模式下打开新窗口. 按 ⌘-O,然后选择文件. 在 Chrome 浏览器中打开计算机中的文件. 按住  ...

  4. C#反射概念以及实例详解【转】

    2009-08-28 13:12 佚名 互联网 我要评论(1) 字号:T | T C#反射概念以及实例向你介绍了C#反射的基本内容以及C#反射实例的简单应用,希望对你了解和学习C#反射以及C#反射实例 ...

  5. 怎样在小方框上打对号 小方框内打对勾 word 方框打对勾

    在word中做选择时,非常多人遇到须要在小方框上打对勾而不知怎样做,现将可行的各种方法总结例如以下: 1:直接找到一个做好的,保存为图片,在须要的时候插入它: 2:插入文本框,然后边框选择为实线,在文 ...

  6. Android系统原理与源码分析（1）：利用Java反射技术阻止通过按钮关闭对话框

    原文出处:博主宇宙的极客http://www.cnblogs.com/nokiaguy/archive/2010/07/27/1786482.html 众所周知,AlertDialog类用于显示对话框 ...

  7. Caused by: java.lang.ClassNotFoundException: org.apache.commons.pool.impl.GenericObjectPool

    原因:缺少commons-pool-X.jar包,到http://commons.apache.org/proper/commons-pool/download_pool.cgi下载后引入即可(地址可 ...

  8. JAVA G1收集器 第11节

    JAVA G1收集器 第11节 上两章我们讲了新生代和年老代的收集器,那么这一章的话我们就要讲一个收集范围涵盖整个堆的收集器——G1收集器. 先讲讲G1收集器的特点,他也是个多线程的收集器,能够充分利 ...

  9. git 克隆本地仓库

    如果要从本地仓库克隆到另一个地方使用如下命令 git clone d:/SourceRepository d:/DestinationRepository d:/SourceRepository:本地 ...

  10. java 多线程学习（一）

    public class ThreadA extends Thread { ; public ThreadA() { super("ThreadID:" + (++threadID ...