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. WinForm 窗体与窗体相互嵌套

    只要将要被潜逃的的窗体的TopLeve设置为Flase即可像普通的控件一样,被添加到另外一个窗体中,TopLeve:是否为顶级窗口,下面来看代码: public partial class TTFor ...

  2. #include <sstream>

    1 std::istringstream 2 std::stringstream 1 std::istringstream input 1 在一个字符串string里提取部分数据,这些数据以空格' ' ...

  3. const和define的区别

    1.在使用const定义常量时,只能使用标量初始化; 但我们可以使用任何表达式初始化define定义的常量 2.我们可以在条件表达式中使用define定义常量,但绝对不能使用const eg: def ...

  4. 项目积累——Blockingqueue，ConcurrentLinkedQueue，Executors

    背景 通过做以下一个小的接口系统gate,了解一下mina和java并发包里的东西.A系统为javaweb项目,B为C语言项目,gate是本篇须要完毕的系统. 需求 1. A为集群系统,并发较高,会批 ...

  5. 依赖注入及AOP简述（十三）——AOP应用举例（完结） .

    2.     AOP应用举例 在一般的应用程序开发中,有一些典型的AOP应用,使得开发者可以专注于业务逻辑本身,而不是与之完全无关的一些“方面”. l        首先就是关于前面介绍过的日志输出类 ...

  6. Java 可中断线程

    PART.1 无法中断的线程 一个无法中断的线程的例子. public class UninterruptableThread { @SuppressWarnings("deprecatio ...

  7. 利用freopen()函数和fc命令简化程序调试

    大家在参加ACM比赛或者参加c/c++实验技能竞赛的时候,如果遇到大量的输入和大量的输出时,调试起来很不方便.一来如果结果不正确的话,需要重复输入大量数据:二来如果大量输出的话,得仔细检查输出结果与正 ...

  8. 又一个类dapper轮子：VIC.DataAccess

    DataAccess Author: Victor.X.Qu Email: fs7744@hotmail.com DataAccess is a c# project for sql data map ...

  9. Java多线程-新特征-锁

    Java中读写锁有个接口java.util.concurrent.locks.ReadWriteLock,也有具体的实现ReentrantReadWriteLock,详细的API可以查看JavaAPI ...

  10. 修改oracle内存

    [oracle@bi11g bin]$ ./sqlplus /nolog SQL*Plus: Release 11.2.0.1.0 Production on Fri Dec 1618:39:36 2 ...