html5_延迟(defer)脚本与异步(async)脚本

lyg0 2020-02-18

延迟脚本：

诸如以下的html文档：

<!Doctype html>
<html>
    <head>
        <title>延迟脚本</title>
        <script src="defer.js"></script>
    </head>
    <body>
        <div id="target"></div>
    </body>
</html>

其中包含的javascript代码为：

var tg=docuemnt.getElementById("target");
tg.innerHTML="XX";
tg.style.backgroundColor="gery";

以前的浏览器对文档进行解析时，当解析到<script>元素时，浏览器会做两件事：

1.停止继续解析，转而根据<script>元素的src属性下载对应的js脚本文。。

2.解析执行脚本文件。

当浏览器解析执行脚本文件时，文档内并没有id为”traget“的元素，也因此这段代码是错误的。

解决上述问题的传统做法是将<script>写在<body>内部的最后面。

而延迟脚本的作用则是与之相同，即在文档页面没有完全解析之前，不对<script>元素进行解析。

延迟脚本如下：

<script src="defer.js" defer> 
<!--即在script标签内写入一个defer即可-->

异步脚本：

当脚本解析占用太多时间时，将脚本设置为异步脚本，浏览器会对脚本解析启动新线程，使得脚本解析与文档解析可以同步进行。它的作用是避免处理脚本时间过长导致页面长时间空白。

html文档：

<!Doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <script src="async.js"></script>
</head>
<body>
    <div>XX</div>
</body>
</html>

js代码：

for(let i=0;i<10000;i++){     
    //some code 
}

如上代码所示：js代码需要执行循环一万次，在循环完成之前不会向下解析。

异步脚本如下：

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

根据红宝书的描述：

一个页面最好只有一个延迟脚本。

延迟脚本与异步脚本都只适用于外部脚本。

建议异步加载期间不要有修改DOM的行为。

lyg0

lyg0

相关推荐

C#异步编程async/await

async/await使C#用以实现协程编程的方式，由Task调度器统一调度每一个异步任务的执行，从调度器的线程池中拿出线程来执行，遇到await时线程会被回收，直到异步方法执行完成。编译器将向我们显示警告，但不会显示任何错误。async并不是表明这个方法

Bonrui编程路 / 0评论 2020-06-07

ES7 async await

如果await的promise失败了，就会抛出异常，需要进行try catch处理,同时通过trycatch可以获取失败的promise的值

89500297 / 0评论 2020-06-07

可视化的JavaScript动态图演示 Promises & Async/Await 的过程

你是否运行过不按你预期运行的 js 代码 ？这时，你需要从 ES6 中引入的一个非常酷的新特性: Promise 来处理你的问题。为了深入理解 Promise ，我在某个不眠之夜，做了一些动画来演示 Promise 的运行，我多年来的好奇心终于得到实现。因

陈旭阳 / 0评论 2020-06-02

await

　　②如果是 promise对象，await 返回的是 Promise 成功的值。　　④await 必须写在 async 中，但 async 中可以没有 await. 　　⑤如果 await 的 promise 失败，就会抛出异常，需要通过 try ...

前端开发Kingcean / 0评论 2020-05-29

script标签中defer和async的区别

正常的html加载解析顺序是同步进行的，也就是浏览器加载html成功之后开始解析文档，这个时候如果遇到script文件就会暂停解析html文档，而下载script文件并加以解析，当解析完成后再开始继续解析html文档。defer是一个异步加载属性，当htm

niehanmin / 0评论 2020-05-19

Promise和Async/Await用法整理

　　　　Promise,简单来说就是一个容器，里面保存着某个未来才会结束的时间

Magicsoftware / 0评论 2020-04-30

ES6 之 async函数

ES2017引入了async函数，使得异步操作变得更加方便。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体后面的语句。constructor (){　　　　this.catchePromise = caches.open

Magicsoftware / 0评论 2020-03-28

Promise和async和await的理解

当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。fetch() 不会接受跨域 cookies；你也不能使用 fetch() 建立起跨域

Magicsoftware / 0评论 2020-03-28

koa2 的使用方法：(一)

* await 等待async方法执完毕;console,log// ｛aid:"123"｝ //获取动态路由的数据。ctx.body=‘商品页面‘；

LorenLiu / 0评论 2020-03-28

Koa异步处理Async 、Await和Promise 的使用

async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。async function testAsync(

88520191 / 0评论 2020-01-30

Async/Await

async function firstAsync () {. return 27 //return Promise.resolve(27). }. firstAsync().then(val => {. console.log(val). }).

前端开发Kingcean / 0评论 2020-01-23

spring中@Async注解的原理和使用

@EnableAsync是开启某个模块的功能加载，之前在《导图梳理springboot手动、自动装配，让springboot不再难懂》介绍过，@EnableXXX一般都有两种用法，一种直接引入配置，一种可以通过注解的元数据选择需要导入的配置。这里的@Ena

csuzxm000 / 0评论 2020-01-10

async 与 promise 的区别

async/await与Promise一样，是非阻塞的。await关键字只能用在async定义的函数内。async函数会引式返回一个promise,改promise的resolve值就是函数return的值。async/await让try/catch 可以

whynotgonow / 0评论 2020-01-05

async和await 总结

在返回promise的表达式左侧写await: 不想要promise, 想要promise异步执行的成功的value数据

88520191 / 0评论 2020-01-04

promise和async的区别

Promise，我们了解到promise是ES6为解决异步回调而生，避免出现这种回调地狱，那么为何又需要Async/Await呢？你是不是和我一样对Async/Await感兴趣以及想知道如何使用，下面一起来看看这篇文章：Async/Await替代Promi

89500297 / 0评论 2020-01-03

callback、promise和async、await的使用方法

回调是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，ES6规定，Promise对象是一个构造函数，用来生成Promise实例。它就是 Ge

88520191 / 0评论 2019-12-30

RUST Ex00 Async-std

嗯，没错，只要将std替换成async-std，并且在适当的位置加上async或者await即可。We used async-std internally. We just replaced "std" by "async-s

Trustport / 0评论 2019-12-16

ajax -async 参数同步异步

开发项目写功能的时候，需要将ajax的返回值赋到全局变量中，然后在该页面其他地方引用，因为ajax异步的原因一直无法成功，只需将async:false，就OK了。每次需要同步的时候，我记不住‘asyns'这个单词的拼写，每次都得去其他的js里面粘一边过来，

wujiajax / 0评论 2014-01-13

ajax同步异步参数async

开发项目开发过程中，需要将ajax的返回值赋到全局变量中，然后在该页面其他地方引用，因为ajax异步的原因一直无法成功，需将async:false，使其变成同步的。alert("请求失败，可能是服务器或网络异常。

越前 / 0评论 2014-02-08

Jboss EAP 6启用CXF日志

<logger category="org.apache.cxf"> <level name="INFO"/> </logger>. @WebService(serviceName

forliberty / 0评论 2015-05-04

Promise和Async/Await用法整理

new出一个Promise对象时，这个对象的起始状态就是Pending状态，在根据resolve或reject返回Fulfilled状态/Rejected状态。Then分别接受resolve和reject的信息，有三种参数形式，第三种比较“怪异”，只用来接

86193951 / 0评论 2019-11-03

面试向：Async/Await 代替 Promise.all()

Promise.all() 方法接受一个 Promise 数组，数组内所有 Promise 执行成功后，根据传入顺序返回各个 Promise 的结果数据，其中一个被拒绝，即会暂停，返回错误信息。数组进入 async 函数，循环使用 async/await

86264153 / 0评论 2019-11-03

探索javascript -&gt; async、await

在讲async之前，先简单的提一下promise。首先，先来纠正一下很多人普遍的错误观点 --> 'promise是异步的', 看代码:. 从打印结果来看,我们就可以断定promise是同步的,那么我就说promise是同步的，then是异步的!对于

86193951 / 0评论 2019-11-03

关于async/await、promise和setTimeout执行顺序

setTimeOut执行需要满足两个条件：。首先，new Promise是同步的任务，会被放到主进程中去立即执行。当你的promise状态结束的时候，就会立即放进异步队列中去了。带async关键字的函数会返回一个promise对象，如果里面没有await，

Magicsoftware / 0评论 2019-10-19

Ajax同步

即可以保证函数或全局的同步或异步。

woaini / 0评论 2016-04-29

将微信小程序接口Promise化并使用async函数

小程序一直到现在接口还是和刚开始一样使用的回调函数的方式，如果想在小程序中不使用框架的情况下使用Promise+Async怎么办呢？需要手动修改源码：去掉源码最后的try-catch语句，并将开头的var runtime改成var regeneratorR

codable / 0评论 2019-09-07

Python中的asyncio代码详解

c#èé¨c#¨async await °¨é¨pythonèpython¨è¨asyncio èéasyncio :. asyncio ¨ ¨async/await èasyncio 訤é§èPython °èéasyncio IO é鱧

zuanfengxiao / 0评论 2019-09-07

ES2017 Async

当 async 函数抛出异常时，Promise 的 reject 方法会传递这个异常。a) 如果return一个Promise, 意味着p现在反映了这个 Promise 的状态。a) 它只能在 async function 中使用。a) 如果等待的不是 P

whynotgonow / 0评论 2019-09-06

async/await实现异步调用

async函数里，无论是Promise reject的数据还是逻辑报错，都会被默默吞掉。所以最好把await放入try{}catch{}中，或者在async返回的promise对象中使用.cache捕获错误。项目中实现三个不同的接口调用，三个接口是相互关联

83251242 / 0评论 2019-09-05

ES7之Async/await的使用详解

在 js 异步请求数据时，通常，我们多采用回调函数的方式解决，但是，如果有多个回调函数嵌套时，代码显得很不优雅，维护成本也相应较高。ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖可以更好解决多层回调问题。Promis

terabits的钵壳 / 0评论 2019-03-28

用Generator函数和Promise对async/await进行模拟与转换

console.log('do Lazy1');rs();console.log('do Lazy2');rs();console.log('do now!');console.log('start');await doLazy1();console.lo

87241940 / 0评论 2019-08-29

重学JS：async/await

异步操作一直是JS中不可或缺的一环，从最开始回调函数，到后面的Promise，再到ES2017引入的async函数，异步操作逐渐进化，变得越来越简单方便，接下来就仔细看看在ES2017引入了async函数后，异步操作产生了哪些变化。以往我们使用异步函数，都

83251242 / 0评论 2019-08-18

对async/await的理解

async function 声明用于定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。但是如果你的代码使用了异步函数，它的语法和结构会更像是标准的同步函数。如

83540298 / 0评论 2019-07-01

【JS基础】从JavaScript中的for...of说起(下) - async和await

写在前面本文首发于公众号：在上一篇文章中，梳理了javascript中的两个重要概念：iterator和generator，并且介绍了两者在异步操作中的应用。在异步操作中使用iterator和generator是一件比较费劲的事情，而ES2017给我们提供

刘利新 / 0评论 2019-07-01

17行代码了解异步Promise、await、async、setTimeout

17行代码了解异步：Promise、await、async、setTimeoutasync function one() {

85403263 / 0评论 2019-07-01

async await详解

async await本身就是promise + generator的语法糖。本文主要讲述以下内容。async awiat 实质async await 主要特性async await 实质下面使用 promise + generate 实现 async a

85403263 / 0评论 2019-07-01

什么是 Promise

引言错误理解精心组织起来的异步代码还不如使用一团乱麻的回调函数。在处理异步的问题上，回调基本上能够胜任，不过这都是建立在一切正常运转的基础上。与其交给不信任的第三方，倒不如转交给一个位于我们和第三方间的可信任的中介机制，这里就是我们要说的 Promise。

83251242 / 0评论 2019-07-01

weblogic多服务器集群 seesion复制

都不能只部署在集群的部分实例中上。

XiaoMuFireAnt / 0评论 2016-10-10

Python Lover(8)Twisted Basic - async - logging

PythonLover(8)TwistedBasic-async-logging. BasicDifferences. def_deplayedRender(self,request):. request.write(""".

TwistedNerve / 0评论 2015-09-17

如何正确合理使用 JavaScript async/await ！

ES8 引入的 async/await 在 JavaScript 的异步编程中是一个极好的改进。它提供了使用同步样式代码异步访问 resoruces 的方式，而不会阻塞主线程。然而，它们也存在一些坑及问题。在本文中，将从不同的角度探讨 async/awai

chengzhangjian / 0评论 2019-06-30

Jboss EAP 6启用CXF日志

<logger category="org.apache.cxf"> <level name="INFO"/> </logger>. @WebService(serviceName

直须看尽洛城花 / 0评论 2015-05-04

promise, async, await, execution order

PromiseNormally, promise is easy to understand, especially when using like this:. })then after then would make the order of asyn

84563376 / 0评论 2019-06-30

细说async/await相较于Promise的优势

前言介于上一篇 「今日头条」前端面试题和思路解析 中提到的 async/await，让我想起了之前写过的一篇文章，在此做个分享。它细说了什么是async函数，以及其相较于 Promise 的优势。谈及异步回调函数的嵌套，总会让人感到烦躁，特别是当业务逻辑复

86264153 / 0评论 2019-06-30

而井教你判断当前Javascript运行环境是否支持async函数

文章起因今天在学习Jasmine中，在阅读文档时看到用来判断是否支持async函数的代码。}is-async-await-supported而我们刚才编写的函数不依赖于nodejs平台，所以可以运行在任意JavaScript运行时中，比is-async-s

pjk / 0评论 2019-06-29

Generator 详解（使用场景，babel 转译，协程，异步，上层应用，async/await）

Generator可以随心所欲的交出和恢复函数的执行权，yield交出执行权，next()恢复执行权Generator 函数是一个状态机，封装了多个内部状态，执行一个Generator函数会返回一个迭代器对象，可以依次遍历 Generator 函数内部的每

Fairfeng / 0评论 2019-06-29

ES6系列之Promise, Generator, Async比较

setTimeout(() => resolve(n + 200), n);});console.log(`step1 with ${n}`);return takeLongTime(n);console.log(`step2 with ${n}`)

83540298 / 0评论 2019-06-29

一道setTimeout async promise执行顺序的笔试题引发的思考

====据说这是今日头条去年的一道笔试题，主要考察的是setTimeout async promise执行顺序～先双手奉上这道题目～。setTimeOut执行需要满足两个条件：。至于什么，查了很多的资料，了解到：一个浏览器环境只能有一个事件循环，而一个事件

85281643 / 0评论 2019-06-29

8张图帮你一步步看清 async/await 和 promise 的执行顺序

8张图让你一步步看清 async/await 和 promise 的执行顺序为什么写这篇文章？测试一下自己有没有必要看需要具备的前置基础知识主要内容。说实话，关于js的异步执行顺序，宏任务、微任务这些，或者async/await这些慨念已经有非常多的文章写

codable / 0评论 2019-06-29

async await 个人总结

async官方介绍：async function声明将定义一个返回AsyncFunction对象的异步函数。“Promise”原型*/打印结果可以看出，async 可以将其后的函数执行结果转为Promise对象既然如此那以下操作也是可行的。testFn()

85281643 / 0评论 2019-06-29