script 标签中 defer 和 async 的区别?

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: js

script 标签中 defer 和 async 的区别?

HTML渲染过程

1、渲染引擎在解析html的时候,遇到script是会暂停解析过程;
2、接着通过网络线程加载文件,完成后再切换js引擎执行代码;
3、然后再切换回渲染引擎继续解析html渲染页面。

所以首次渲染的时候如果并不依赖这个script,就会延长了页面的渲染时间,为了减少首次渲染的时间损耗,可以通过给script标签加三个属性来实现。
  • async:请求文件但不阻塞渲染引擎,文件加载完成再阻塞渲染引擎先执行完js;
  • defer:请求文件但不阻塞渲染引擎,等解析完html再执行js;
  • type="module":让浏览器按ES6标准将文件当成模板解析,效果和defer一样,也可以配合async在请求完成后立即执行

小结:

    defer 按顺序下载,DomContentLoad前执行,async 不按顺序下载,下载完就执行
AI 代码解读
XinMo
+关注
目录
打赏
0
0
0
0
145
分享
相关文章
一个js里可以有多少个async function,如何用最少的async function实现多个异步操作
在 JavaScript 中,可以通过多种方法实现多个异步操作并减少 `async` 函数的数量。
面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别
面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别
137 0
理解 <script> 标签的 defer 和 async 属性
理解 <script> 标签的 defer 和 async 属性
199 3
<script> 标签上的 defer 和 async 属性是什么?
它会执行以下步骤 1.暂停 HTML 文档解析器 2.创建新请求以下载脚本 3.在脚本完全下载后立即执行脚本 4.执行结束后,继续解析 HTML 文档
script标签中defer和async有什么不同?
script标签中defer和async有什么不同?
134 0
script标签中defer和async有什么不同?
async和await用法(Task)
原文:async和await用法 要理解async和await的用法,首先要了解Task相关知识,这里不做说明,因为这不是本文的重点。 如果你已经对Task很了解,那么如何使用async和await,在此主要总结了以下三点: 只有在async方法里面才能使用await操作符; await操作符是针对Task对象的; 当方法A调用方法B,方法B方法体内又通过await调用方法C时,如果方法C内部有异步操作,则方法B会等待异步操作执行完,才往下执行;但方法A可以继续往下执行,不用再等待B方法执行完。
1350 0