script 标签属性： async 和 defer

最新推荐文章于 2025-08-13 21:05:35 发布
最新推荐文章于 2025-08-13 21:05:35 发布
阅读量149 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javaScript笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33502076/article/details/87368158
本文探讨了HTML中脚本加载属性async与defer的区别。async适用于无需等待页面解析且无依赖的脚本，而defer用于需等待解析且依赖其他脚本的情况，确保脚本按需加载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. async ：如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 asyc。
  2. defer： 如果脚本需要等待解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。
前端性能优化-script标签中的async与defer
逍遥的前端笔记
08-05 1156
当浏览器解析 DOM 时候，遇到 script 标签时，会暂停 DOM 的解析，先加载并执行 script 中的代码，然后再继续 DOM 的解析。
Script 标签中 async 和 defer 属性的作用分别是什么？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-07 841
属性的工作原理及应用场景，我们可以更好地优化Web应用的性能，为用户提供更快的加载速度和更流畅的交互体验。在实际项目中，合理地利用这两种属性，可以显著改善页面加载效率，提高整体的用户体验。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。本文将深入探讨这两个属性的工作原理及其应用场景，旨在帮助前端开发者更好地理解并利用它们来提升网站性能。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，专栏系列（点击解锁）
script标签的defer和async属性
cithegod的博客
08-01 939
defer & async前提在说defer和async两个script标签的属性之前，要先说一下浏览器对于页面进行加载的流程，浏览器渲染页面是基于两棵树进行的，分别是DOM树和render树，DOM树由HTML决定，HTML元素会被解析为一个个节点，自上而下形成一棵树；而render树是由CSS和DOM树决定的，每个节点在接收了CSS之后，会根据其所占据的空间，形成一棵render树，render
script标签中defer和async属性的区别
binlety
08-05 525
script标签存在两个属性，defer和async，因此script标签的使用分为三种情况： 　　1.<script src="example.js"></script> 　　　没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载； 　　2....
script标签中的async和defer
UUID、
03-04 432
以上就是我对script标签中的async和defer的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。在webpack打包中htmlwebpackplugin中打包后,index.html引入的script就是使用defer延迟加载,来优化首屏加载。问题：script标签放在Body中 如果不加额外的属性那么会对加载起到阻塞吗？
＜script＞标签的async和defer属性
qq_54140719的博客
09-22 2856
1、async：表示应该立即开始下载脚本，但不能阻止其他的页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。 2、defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。(在IE7及更早的版本中，在行内脚本也可以指定这个属性)。
script标签不带属性与带async、defer的区别
weixin_30375247的博客
07-13 169
<script> 当页面解析到script标签时，会停止解析并下载对应的脚本，并马上执行，执行完毕后再继续解析页面 <script async> async 在下载脚本的同时不会停止解析HTML，但是在下载完成后会停止解析并开始执行，执行完毕后继续解析页面 <script defer> defer 下载脚本时跟async一样不会...
JS中script标签defer和async属性的区别详解
11-26
值得注意的是，`defer`和`async`属性只适用于外部脚本（即使用`src`属性指定的脚本），而不适用于内联脚本。 总的来说，`defer`和`async`是JavaScript加载策略的重要组成部分，它们帮助开发者平衡脚本执行和页面...
浅析script标签中的defer与async属性
01-21
竟然同时有async和defer属性，心想着肯定是前辈老司机的什么黑科技，两个一块儿肯定会发生什么神奇化学反应，于是赶紧怀着一颗崇敬的心去翻书翻文档，先复习一下各自的定义。 二、调查一番 先看看async和defer各自...
浅谈script标签中的async和defer
weixin_33849942的博客
10-17 330
script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。 现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。好在script提供了两种方式...
html5 script标签async属性用法
萌萌的It人 www.itmmd.com
05-27 2264
在研究一些网站加载时发现很多网站的js加载用到了async属性，于是google了一下它的用法。async是html5新加的一个属性，点这里可查看它的标准定义。它的作用就是异步加载js并执行，它和dom的渲染是异步。(IE9貌似不支持这个属性) 如下代码，可看到在js还没有加载完，html内部的dom已经生成了。红色为html内部了，蓝色为test.js生成的。 html： 1
script 标签 async 属性
weixin_44479322的博客
08-13 4766
script 标签 async 属性 普通script 文档解析的过程中，如果遇到script脚本，就会停止页面的解析进行下载（但是Chrome会做一个优化，如果遇到script脚本，会快速的查看后边有没有需要下载其他资源的，如果有的话，会先下载那些资源，然后再进行下载script所对应的资源，这样能够节省一部分下载的时间 @Update: 2018-08-17）。 资源的下载是在解析过程中进行的，虽说script1脚本会很快的加载完毕，但是他前边的script2并没有加载&执行，所以他只能处于一个
electron进程间通信- 从渲染进程到主进程
最新发布
唐璜Taro的博客
08-13 512
本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。
MoonBit Perals Vol.05: 函数式里的依赖注入：Reader Monad
m0_74743788的博客
08-13 484
普通的函数就像一个流水线，你丢进去一袋面粉，然后直接跑到生产线末端，等着方便面出来。但这条流水线需要自动处理中间的所有复杂情况：没放面粉/“没有下单，期待发货”（null）面团含水量不够把压面机干卡了（抛出异常）配料机需要读取今天的生产配方，比如是红烧牛肉味还是香菇炖鸡味（读取外部配置）流水线末端的打包机需要记录今天打包了多少包（更新计数器）Monad 就是专门管理这条复杂流水线的“总控制系统”。它把你的数据和处理流程的上下文一起打包，确保整个流程能顺畅、安全地进行下去。
基于SpringBoot校园管理系统
2501_90968670的博客
08-13 557
校园管理系统是一个基于Spring Boot + Vue.js的全栈应用，专注于高校内部的多角色协作管理。系统实现了院校管理、单位管理、用户管理、通知推送、投票管理等功能模块，满足管理员、院校管理员、普通用户三类角色的不同操作需求。核心目标是提升校园管理效率，实现通知精准推送与数据可视化统计。
Flink Redis维表：Broadcast Join与Lookup Join对比及SQL示例
spark_dev的博客
08-12 748
本文对比了Flink中Redis维表关联的两种方案：Broadcast Join和Lookup Join。Broadcast Join适合小维表（<1GB），通过广播到所有任务实现本地关联，延迟低但内存消耗高；Lookup Join则适合大维表，通过实时查询Redis获取最新数据，内存占用低但延迟较高。文章详细分析了两者的原理、适用场景和性能差异，并提供了两种方案的SQL实现示例。最后建议根据维表大小、更新频率和资源情况选择合适方案，或采用混合模式平衡性能与资源。
Vue3学习之创建vue3项目文件
2301_76989410的博客
08-09 528
Vue3是一个更高效、轻量级的渐进式JavaScript框架，专注于构建用户界面。本文介绍了Vue3项目创建流程：首先安装Node.js并验证环境；然后通过PyCharm创建项目文件夹，使用npm命令初始化Vue项目并选择配置（建议选择TypeScript）；最后清理默认文件结构，开始自定义开发。文中还详细说明了如何删除默认组件代码，为个性化开发做好准备。
前端工程化：pinia
西岭千秋雪的博客
08-11 590
本文介绍了Pinia作为Vue.js官方推荐的状态管理库，用以解决组件间数据共享和状态同步问题。文章首先说明状态管理的必要性，随后详细讲解Pinia的初始化配置，包括安装、挂载和Store创建（包含state、getter、action）。最后通过示例展示如何在组件中使用Store，实现数据获取和渲染。Pinia能有效简化复杂应用的状态管理，提升开发效率。
HENGSHI SENSE 6.0 功能-AI 查数助手
zandy1011的博客
08-11 412
AI查数助手6.0版本实现重大升级，全面优化BI和数据分析能力。新版本显著提升问答效率，通过流程优化使响应速度提升20%-40%，稳定在10秒内完成。新增ReactJSSDK支持，可无缝嵌入企业现有AI应用。同时推出基于钉钉/企微/飞书的Chatbot数据问答机器人，支持PC/移动端跨平台使用，让企业用户能随时随地通过办公软件快速查询数据。这些升级使企业能更高效利用数据资源，提升决策效率。
computed使用的方式
u014642921的博客
08-11 318
背景。自定义表单复杂度较高。使用到computed的情况很多。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值