html4和html5的script标签async defer有啥区别【说明】

发布时间 - 2025-12-31 00:00:00    点击率:
async和defer仅在HTML5中有效,HTML4中被忽略;async下载完立即执行且不保序,defer则按序于DOM解析后执行,二者均只对带src的外部脚本生效。

asyncdefer 都只在 HTML5 中合法;HTML4 根本不支持这两个属性,写了也无效,浏览器会直接忽略。

HTML4 里 script 标签根本没有 async/defer

HTML4 规范中 标签只有 srctypelanguage(已废弃)等几个属性,asyncdefer 是 HTML5 新增的布尔属性。如果你在 HTML4 文档类型(如 )中写上它们,解析器不会报错,但也不会触发任何异步行为——脚本仍按默认阻塞方式加载执行。

async 和 defer 在 HTML5 中的行为差异

两者都用于优化脚本加载时机,但触发条件和执行顺序完全不同:

  • async:脚本下载与 HTML 解析并行,**下载完立即执行**,不保证顺序,也不等待 DOM 构建完成。适合完全独立、无依赖的脚本(如统计代码)
  • defer:脚本下载与 HTML 解析并行,但**执行被推迟到 HTML 解析完成之后、DOMContentLoaded 事件触发之前**,且按书写顺序执行。适合需要操作 DOM 或有依赖关系的脚本

关键区别在于:多个 async 脚本谁先下完谁先执行,而多个 defer 脚本一定按 出现顺序执行。

立即学习“前端免费学习笔记(深入)”;

常见误用场景和坑

以下写法看似合理,实际容易出问题:

  • 给内联脚本(即没有 src)加 asyncdefer —— 这两个属性**仅对带 src 的外部脚本生效**,内联脚本加了也无效
  • 中混用 asyncdefer 加载有依赖的模块(比如先 async 加 jQuery,再 async 加插件)—— 无法保证执行顺序,插件可能因 jQuery 未就绪而报 $ is not defined
  • 以为 defer 能让脚本在 window.onload 之后执行 —— 实际它在 DOMContentLoaded 前执行,比 window.onload 早得多



  
  
  

真正要注意的不是“HTML4 vs HTML5”这个表面区别,而是:只要用了 asyncdefer,你就必须清楚脚本是否依赖 DOM、是否依赖其他脚本、以及目标浏览器是否支持(IE10+ 支持 defer,IE10 不支持 async)。否则,页面可能在某些环境下白屏或报错。


# jquery  # html  # js  # html5  # 浏览器  # app  # win  # 区别  # public  # 事件  # dom  # 异步  # 多个  # 这两个  # 不支持  # 报错  # 下载完  # 加载  # 几个  # 也不  # 你就  # 按序 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: LinuxCD持续部署教程_自动发布与回滚机制  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  Laravel怎么判断请求类型_Laravel Request isMethod用法  历史网站制作软件,华为如何找回被删除的网站?  Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程  如何制作一个表白网站视频,关于勇敢表白的小标题?  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  Laravel如何使用Livewire构建动态组件?(入门代码)  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  php结合redis实现高并发下的抢购、秒杀功能的实例  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册?  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符(忽略数字与嵌套)  如何用PHP快速搭建高效网站?分步指南  做企业网站制作流程,企业网站制作基本流程有哪些?  Laravel怎么实现模型属性的自动加密  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  中山网站推广排名,中山信息港登录入口?  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗?  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm,可以有哪些措施降低舍内氨气水平?  如何登录建站主机?访问步骤全解析  nginx修改上传文件大小限制的方法  详解Android——蓝牙技术 带你实现终端间数据传输  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  高防服务器如何保障网站安全无虞?  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  用v-html解决Vue.js渲染中html标签不被解析的问题  高配服务器限时抢购:企业级配置与回收服务一站式优惠方案  如何在阿里云服务器自主搭建网站?  php json中文编码为null的解决办法  如何在阿里云通过域名搭建网站?  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  七夕网站制作视频,七夕大促活动怎么报名?  详解MySQL数据库的安装与密码配置  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  Swift中循环语句中的转移语句 break 和 continue  nodejs redis 发布订阅机制封装实现方法及实例代码  Java类加载基本过程详细介绍  jQuery中的100个技巧汇总  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  教你用AI将一段旋律扩展成一首完整的曲子  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  网站制作大概要多少钱一个,做一个平台网站大概多少钱?  C++时间戳转换成日期时间的步骤和示例代码  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  香港服务器网站推广:SEO优化与外贸独立站搭建策略  LinuxShell函数封装方法_脚本复用设计思路【教程】  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全