首页 / JAVASCRIPT / JS脚本文件放在body后面的原因以及js脚本文件中async和defer异同

JS脚本文件放在body后面的原因以及js脚本文件中async和defer异同

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS脚本文件放在body后面的原因以及js脚本文件中async和defer异同，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1860字，纯文字阅读大概需要3分钟。

内容图文

本篇文章给大家分享的是关于JS脚本文件放在body后面的原因以及js脚本文件中async和defer异同，内容很不错，有需要的朋友可以参考一下，希望可以帮助到大家。

1.没有`defer`或`async`

浏览器遇到脚本的时候会暂停渲染并立即加载执行脚本（外部脚本），“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。因此如果将JS脚本放置在head的话会产生阻塞，并且脚本当中对于DOM的操作也会出现报错，因为还没有生成。

放在body底部的JS脚本的执行顺序是按照在文档中的先后顺序执行的，而不是按照下载下的顺序

2.有`async`过程如下：

1.浏览器开始解析网页

2.解析过程中，发现带有async属性的script标签

3.浏览器继续往下解析 HTML 网页，同时并行下载外部脚本

4.脚本下载完成，浏览器暂停解析网页，开始执行下载的脚本

5.脚本执行完毕，浏览器恢复解析网页

async脚本执行顺序是下载的顺序

3.有`defer`过程如下：

1.浏览器开始解析网页

2.解析过程中，发现带有defer属性的脚本元素

3.浏览器继续往下解析网页，同时并行下载脚本元素加载的外部脚本

4.浏览器完成解析网页，此时再回过头执行已经下载完成的脚本

defer脚本执行顺序是出现的先后顺序

4.`defer`还是`async`？

两者之间的选择则是看脚本之间是否有依赖关系，有依赖的话应当要保证执行顺序，应当使用defer没有依赖的话使用async，同时使用的话defer失效。要注意的是两者都不应该使用document.write,这个导致整个页面被清除。

浏览器完整过程是先解析渲染HTML，当遇到脚本文件的时候则执行脚本文件，等待脚本文件执行完毕才继续解析html，因此会产生阻塞页面的情况，因此最好将脚本放在body底部，当浏览器遇到标有defer的时候则会下载该脚本，同是继续解析html，然后等到dom解析完毕之后才解析defer脚本，而如果遇到async脚本的时候同样是下载该脚本同是继续解析html，当anync下载完毕之后，而html尚未解析完毕，也会先解析async脚本，等待async脚本解析完毕之后才继续解析html。

详细的过程对比参考下图：

JS脚本文件放在body后面的原因以及js脚本文件中async和defer异同 - 文章图片

内容总结

以上是互联网集市为您收集整理的JS脚本文件放在body后面的原因以及js脚本文件中async和defer异同全部内容，希望文章能够帮你解决JS脚本文件放在body后面的原因以及js脚本文件中async和defer异同所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/285619.html

来源：【匿名】

【上一篇】六种JS数组使用方法实例总结【下一篇】javascript 怎么调用php方法

更多 ►

【JS脚本文件放在body后面的原因以及js脚本文件中async和defer异同】教程文章相关的互联网学习教程文章

JavaScript 的 Async\/Await 完胜 Promise 的六【代码】

参考：http://www.10tiao.com/html/558/201705/2650964601/1.htmlNode 现在从版本 7.6 开始就支持 async/await 了。简介：Async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。Async/await 实际上是建立在 promise 的基础上。它不能与普通回调或者 node 回调一起用。Async/await 像 promise 一样，也是非阻塞的。Async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。语法：假设函...

js async06【代码】

1function resolveAfter2Seconds() {2 console.log(‘slow start at: ‘ + new Date().getSeconds())3returnnew Promise(resolve => {4 setTimeout(() => {5 resolve(‘slow‘)6 console.log(‘slow done at: ‘ + new Date().getSeconds())7 }, 2000 )8 })9} 10function resolveAfter1Second() { 11 console.log(‘fast start at: ‘ + new Date().getSeconds()) 12returnnew Promise(resolve => { 13 ...

js async03【代码】

function resolveAfter2Seconds() {console.log(‘starting slow promise at:‘+ new Date().getSeconds())returnnew Promise(resolve => {setTimeout(() => {resolve(‘slow‘)console.log(‘slow promise is done at:‘+ new Date().getSeconds())}, 2000 )}) } function resolveAfter1Second() {console.log(‘starting fast promise at:‘+ new Date().getSeconds())returnnew Promise(resolve => {setTimeout(() => {resolve(...

javascript 支持链式调用的异步调用框架Async.Operation

代码如下:Async = {}; Async.Operation = function(options) { options = options || {}; var callbackQueue = []; var chain = (options.chain && options.chain === true) ? true : false; var started = false; var innerChain = null; this.result = undefined; this.state = "running"; this.completed = false; this.yield = function(result) { var self = this; if (!chain) { self.result = result; self.state = "comple...

ES7的async/await用法实例详解

本篇文章主要介绍了深入理解ES7的async/await的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧在最开始学习ES6的Promise时，曾写过一篇博文《promise和co搭配生成器函数方式解决js代码异步流程的比较》，文章中对比了使用Promise和co模块搭配生成器函数解决js异步的异同。在文章末尾，提到了ES7的async和await，只是当时只是简单的提了一下，并未做深入探讨。在前两个月发布的Nodejs V7中，...

在 Node.js 中使用 async 函数的方法

借助于新版 V8 引擎，Node.js 从 7.6 开始支持 async 函数特性。今年 10 月 31 日，Node.js 8 也开始成为新的长期支持版本，因此你完全可以放心大胆地在你的代码中使用 async 函数了。在这边文章里，我会简要地介绍一下什么是 async 函数，以及它会如何改变我们编写 Node.js 应用的方式。 1 什么是 async 函数利用 async 函数，你可以把基于 Promise 的异步代码写得就像同步代码一样。一旦你使用 async 关键字来定义了一个函数，那...

JavaScript加载：defer与async【图】

页面的解析过程是单线程的，但是单线程亦可有同步与异步之分，script标签的解释方式分为3种，默认、defer和async三种<script src="script.js"></script>默认模式，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之后的所有文档内容之前，也就是说不等待后续载入的文档元素，读取到就加载并执行。<script async src="script.js"></script>async加载模式，加载和渲染后续文档元素的过程， script.js 异步加载...

Generator函数与async函数的区别介绍

本篇文章给大家带来的内容是关于Generator函数与async函数的区别介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Generator函数：Generator函数是ES2015提供的异步解决方案，与普通函数有很大的不同；特征：1、在function关键字后面跟一个(*)号;2、在函数体内部使用yield表达式作为一个状态；Generator函数返回一个遍历器，可通过for……of方法遍历每个状态；用法：执行Generator并不立刻执行，返回一个遍历...

JavaScript中如何使用async和await执行异步处理【图】

Async/await是一个主要功能，可以更简洁有效地描述Promise的异步处理，异步处理是无需等待处理结果就能马上执行下一个处理的机制，它可以很容易地通过使用Promise来实现。在Promise的情况下，我们使用“then”来连接，因此它会变成很单调的代码。例如，如果使用“then”运行多个Promise进程，它看起来像这样：getDate() .then(function(data) {return getYear(data) }) .then(function(year) {return getSomething(year) }) .then(...

Node.js中的async如何使用【图】

Node.js中的async可以使用可读代码实现异步处理，异步处理是在更新之前和更新之后比较数据并且仅在页面更新时才传送数据的过程，这种异步处理有时在前端处理中称为Ajax。Promise和async作为异步处理实现方法可以使用promise来异步处理Node.js.实际上，异步比实现更容易实现异步处理。但是，asynic有Internet浏览器和其他不兼容的浏览器，因此我们需要在实践中仔细思考。如何在Node.js中使用async安装async包的方法命令npm install ...

vue中使用async和await遇到的问题解决（附示例）【图】

本篇文章给大家带来的内容是关于vue中使用async和await遇到的问题解决（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近无聊在搞一些新的东西，今天就遇到一个async/await的坑；因为我用的不是vue官方的脚手架，所以遇到这样的问题：await is a reserved word这样的警告，我猜应该是缺乏相关的解析器。然后取掉await之后，又出现async出现问题：好吧，只能google之。查到相关资料后：安装了babel-p...

Javascript中的defer属性和async属性的用法详解

本篇文章给大家带来的内容是关于Javascript中的defer属性和async属性的用法详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。为什么需要异步加载js文件：不使用异步，文档在加载js代码时会阻塞其他资源的下载，导致空白页面。（1）置于顶部的js脚本，浏览器在执行时需要花费时间去下载外链文件的代码并执行，此时会导致明显的延迟，显示为空白页面，用户无法浏览内容，也无法与页面进行交互。（2）虽然IE8、...

js异步回调Async/Await与Promise的区别，Async/Await替代Promise的6个理由【图】

本章给大家介绍js异步回调Async/Await与Promise的区别，Async/Await替代Promise的6个理由。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。什么是Async/Await?async/await是写异步代码的新方式，以前的方法有回调函数和Promise。async/await是基于Promise实现的，它不能用于普通的回调函数。async/await与Promise一样，是非阻塞的。async/await使得异步代码看起来像同步代码，这正是它的魔力所在。Async/Await语法...

js中的流程控制：Callbacks&Promises&Async/Awai的分析

本篇文章给大家带来的内容是关于js中的流程控制：Callbacks&Promises&Async/Awai的分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。JavaScript经常声称是_异步_。那是什么意思？它如何影响发展？近年来这种方法有何变化？请思考以下代码：result1 = doSomething1(); result2 = doSomething2(result1);大多数语言都处理每一行同步。第一行运行并返回结果。第二行在第一行完成后运行无论需要多长时间。单线程处...