script 标签中 defer 和 async 的区别?

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 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 不按顺序下载,下载完就执行
目录
相关文章
|
20天前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
2月前
|
JavaScript 前端开发 Go
async 和 defer的作用与区别
async 和 defer的作用与区别
|
2月前
|
JavaScript 前端开发
一个js里可以有多少个async function,如何用最少的async function实现多个异步操作
在 JavaScript 中,可以通过多种方法实现多个异步操作并减少 `async` 函数的数量。
|
4月前
|
JavaScript
js 捕获 await 的报错
js 捕获 await 的报错
27 1
|
6月前
|
JavaScript 前端开发 Go
理解 <script> 标签的 defer 和 async 属性
理解 <script> 标签的 defer 和 async 属性
153 3
|
Web App开发 移动开发 JavaScript
面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别
面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别
114 0
|
JavaScript 前端开发 Go
async vs defer 的区别
async vs defer 的区别
74 0
|
6月前
|
JavaScript 前端开发 开发者
7个Js async/await高级用法
7个Js async/await高级用法
129 0
|
移动开发 Go UED
<script> 标签上的 defer 和 async 属性是什么?
它会执行以下步骤 1.暂停 HTML 文档解析器 2.创建新请求以下载脚本 3.在脚本完全下载后立即执行脚本 4.执行结束后,继续解析 HTML 文档
|
Go API
script标签中defer和async有什么不同?
script标签中defer和async有什么不同?
106 0
script标签中defer和async有什么不同?