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 不按顺序下载,下载完就执行
目录
相关文章
|
2月前
|
JavaScript 前端开发 Go
理解 <script> 标签的 defer 和 async 属性
理解 <script> 标签的 defer 和 async 属性
49 3
|
9月前
|
Web App开发 移动开发 JavaScript
面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别
面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别
88 0
|
12月前
|
JavaScript 前端开发 Go
async vs defer 的区别
async vs defer 的区别
52 0
|
2月前
|
JavaScript 前端开发 开发者
7个Js async/await高级用法
7个Js async/await高级用法
|
2月前
|
JSON 前端开发 JavaScript
从0开始学习JavaScript--深入理解JavaScript的async/await
JavaScript的异步编程在过去经历了回调地狱、Promise的引入,而今,通过async/await,让我们获得了更加优雅、可读性更高的异步编程方式。本文将深入探讨async/await的概念、用法,并通过丰富的示例代码展示其在实际应用中的威力。
|
11月前
|
移动开发 Go UED
<script> 标签上的 defer 和 async 属性是什么?
它会执行以下步骤 1.暂停 HTML 文档解析器 2.创建新请求以下载脚本 3.在脚本完全下载后立即执行脚本 4.执行结束后,继续解析 HTML 文档
|
前端开发 JavaScript Go
script标签中async和defer的作用和区别?简述css盒模型?什么是闭包?
浏览器遇到script标签没有async和defer属性时,页面将会暂停解析来下载并执行script脚本,执行完毕继续解析页面(这样会阻塞页面,所以建议把script标签放在html底部)。
script标签中async和defer的作用和区别?简述css盒模型?什么是闭包?
|
Go API
script标签中defer和async有什么不同?
script标签中defer和async有什么不同?
93 0
script标签中defer和async有什么不同?
|
前端开发 JavaScript
JS循环中使用async、await的正确姿势
使用filter过滤item为vue或者react的选项
238 0
JS循环中使用async、await的正确姿势
|
前端开发 JavaScript
JavaScript中的async/await的用法和理解
JavaScript中的async/await的用法和理解
250 0
JavaScript中的async/await的用法和理解