script 标签中 defer 和 async 的区别?

简介: 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 不按顺序下载,下载完就执行
目录
相关文章
|
7月前
|
canal NoSQL 关系型数据库
Redis应用—7.大Value处理方案
本文介绍了一种用于监控Redis大key的方案设计及其实现步骤。主要内容包括:方案设计、安装与配置环境、binlog数据消费者。
273 29
Redis应用—7.大Value处理方案
|
12月前
|
开发工具 git
idea结合git回到某个提交点
本文介绍了如何在IntelliJ IDEA中使用Git工具回退到之前的提交点,通过Git管理界面查看提交日志,选择特定提交并进行软重置、混合重置或硬重置以撤销后续的更改。
1108 0
idea结合git回到某个提交点
|
8月前
|
设计模式 架构师 Java
设计模式觉醒系列(01)设计模式的基石 | 六大原则的核心是什么?
本文介绍了设计模式的六大原则,包括单一职责原则(SRP)、开闭原则(OCP)、里氏替换原则(LSP)、接口隔离原则(ISP)、依赖倒置原则(DIP)和迪米特法则。通过具体案例分析了每个原则的应用场景及优势,强调了这些原则在提升代码可维护性、可复用性、可扩展性和降低耦合度方面的重要作用。文章指出,设计模式的核心在于确保系统模块间的低耦合高内聚,并为后续深入探讨23个经典设计模式打下基础。
|
12月前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
1201 0
|
索引
foreach、for in和for of之间区别?
foreach、for in和for of之间区别?
565 0
|
前端开发 JavaScript
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
208 2
React技术栈-React UI之ant-design使用入门
|
人工智能 开发者
“AI的奇思妙想之旅”征文活动 获奖名单
记录你在AI技术探索中的应用和思考。“AI的奇思妙想之旅”征文活动顺利结束,本次活动得到了众多开发者的支持和喜爱,现公布征文活动获奖名单,快来看看吧!
231 14
|
前端开发 JavaScript API
前端 JS 经典:Proxy 和 DefineProperty
前端 JS 经典:Proxy 和 DefineProperty
300 0
|
11月前
|
机器学习/深度学习 存储 人工智能
【大语言模型】ACL2024论文-01 Quantized Side Tuning: Fast and Memory-Efficient Tuning of Quantized Large Language
本文介绍了Quantized Side Tuning(QST)方法,旨在解决大型语言模型(LLMs)微调过程中的内存效率和速度问题。QST通过将模型权重量化为4位,并引入一个与LLM分离的侧网络,显著减少了内存占用并加快了微调速度,同时保持了与现有技术相当的性能。实验表明,QST可以将总内存占用减少高达2.3倍,并将微调速度提高高达3倍。
240 0