当前位置：首页 > 前端 > 正文内容

script中defer和async区别

放牧的风5年前 (2021-05-25)前端2257

主要记录下defer和async的区别:
在没有defer或者async的情况下,会立即执行脚本,所以通常建议把script放在body最后

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

有async的话,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
但是多个js文件的加载顺序不会按照书写顺序进行

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

有derer的话,加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成,并且多个defer会按照顺序进行加载。

<script defer src="script.js"></script>

所以区别主要在于一个执行时间,defer会在文档解析完之后执行,并且多个defer会按照顺序执行,而async则是在js加载好之后就会执行,并且多个async,哪个加载好就执行哪个

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

标签: JavaScript defer async

分享给朋友：

返回列表

回顾 npm install 命令我们在使用 npm install 安装模块的模块的时候，一般会使用下面这几种命令形式：npm install moduleName # 安装模块到项目目录下 &...

由于浏览器安全性限制，Ajax是不能跨域访问的，而我们在日常开发工作中，经常会出现本地开发环境需要访问其他服务器上的API情况。提示信息为：Access to XMLHttpRequest at 'http://****'...

无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。for…in 语句以原始插入顺序迭代对象的可枚举属性。for…of 语句遍历可迭代对象定义要迭代的数据。以下示例显示了与Array一起使用时，fo...

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详...

概述浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的，所以在分析浏览器缓存机制之前，我们先使用图文简单介绍一下HTTP报文，HTTP报文分为两种：HTTP请求(Request)报文，报文格式为：请求行...

一、前言正则表达式，对大家来说既熟悉又陌生。熟悉是因为工作中有很多场景能用到，比如手机号、邮箱、密码等规则校验。陌生则是因为正则表达式看上去就是一堆乱码，且一眼看上去很难看懂匹配规则。有时候在网上去找一个特定规则的正则表达式，搜出来的结果各...