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. CC++初学者编程教程(5) 安装codeblocks软件开发环境

    Code::Blocks 是一个开放源码的全功能的跨平台C/C++集成开发环境. Code::Blocks是开放源码软件.Code::Blocks由纯粹的C++语言开发完成,它使用了蓍名的图形界面库w ...

  2. 【思路解析】discuz　帖子设置封面 setthreadcover 表pre_forum_threadimage

    在Discuz 中有一项就是给帖子设置封面,很多情况下只能通过手动的方式去设置或者用提交POST请求的式去设置: 但是这都是调用DISCUZ的功能设置的: 有的时候并非万能的,也有用不到的时候:下面就 ...

  3. 测试中的代码分享~将可以合并的方法去合并Func不赖

    在面向对象的设计中,我们经常会谈到“重构”,而重构之中有个叫合并方法的,就是将多个方法干的事类似,或者说,方法体的长向很像,那么,我们需要去考虑,将它们进行抽象! 原来的代码: /// <sum ...

  4. C# DataTable转实体 通用方法【转】

    public static T GetEntity<T>(DataTable table) where T : new()    {        T entity = new T();  ...

  5. Swift中编写单例的正确方式

    在之前的帖子里聊过状态管理有多痛苦,有时这是不可避免的.一个状态管理的例子大家都很熟悉,那就是单例.使用Swift时,有许多方法实现单例,这是个麻烦事,因为我们不知道哪个最合适.这里我们来回顾一下单例 ...

  6. AngularJS初始用之 中间件 connect .static 静态文件不能找到

    学习心得,软件更新太快,学习不能照书本. 在学习搭建Nodejs服务器时,掉坑了啦,太坑了,对于什么都不知道的初学者,开门就是坑...,怎么坚持学下去... 还好,现在的世界很大,如果你发现自己不是犯 ...

  7. JavaScript 工作必知(九）function 说起 闭包问题

    大纲 Function Caller 返回函数调用者 Callee 调用自身 作用域 闭包 function 函数格式 function getPrototyNames(o,/*optional*/ ...

  8. node.js(八) 有趣的东西才开始哦

    ### Express介绍 npm提供了大量的第三方模块,其中不乏许多Web框架,比如我们本章节要讲述的一个轻量级的Web框架 ——— Express. Express是一个简洁.灵活的node.js ...

  9. bootstrap-js(4)标签页

    实例 标签页(Tab)在 Bootstrap 导航元素 一章中介绍过.通过结合一些 data 属性,您可以轻松地创建一个标签页界面. 通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜 ...

  10. OC语法4——自定义构造方法，description方法

    自定义构造方法: 我们已经知道创建对象分两步,1:在内存中开辟存储空间,并把地址存储在指针变量里,2:调用指针变量的初始化方法init初始化该对象. Student * stu = [Student ...