教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载async与defer是script标签上最常被讨论、也最容易被混淆的两个属性它们决定了外部脚本何时下载、何时执行以及执行顺序是否受保证。本文以 30-seconds-of-code 仓库中的 async-defer.md 为基础系统梳理无属性、async、defer三种脚本加载方式的行为差异并结合仓库源码说明现代 Web 项目中脚本加载的实际实践帮助你写出对解析流程干扰最小、执行时机可控的页面。上图来自仓库的 async-defer.svg直观展示了三种加载方式下 HTML 解析、脚本下载与执行的时间线差异。为什么脚本加载方式会影响页面性能浏览器在解析 HTML 文档时是自上而下逐行进行的。当解析器遇到script标签时默认需要停下来先获取并执行脚本再继续解析剩余文档。这个解析 — 暂停 — 取脚本 — 执行 — 恢复解析的过程直接决定了页面首屏呈现的速度和用户体验的流畅度。理解这一点后你就会明白选择何种脚本加载策略本质上是在脚本尽快可用与HTML 尽快渲染完成之间做权衡。下文分别介绍三种方式的具体行为。无属性script默认的阻塞行为最常见的写法是不带任何属性script srcscript.js/script其执行流程为浏览器解析 HTML直到遇到script标签立即暂停 HTML 解析下载脚本文件若使用外部src下载完成后立即执行脚本执行完毕恢复 HTML 解析继续处理后续内容。这种遇到即停的机制意味着脚本体积越大、网络越慢HTML 解析被中断的时间就越长用户看到空白页的时间就越久。对于位于文档头部或正文前部的脚本尤其明显——这正是许多站点把脚本挪到/body之前的传统做法的动机但即便如此脚本仍会阻塞其后续 DOM 的解析。要点小结无属性脚本按文档顺序加载和执行执行时机早、阻塞解析时间长适合对执行时机要求严苛、且体积较小或不依赖后续 DOM 的脚本。async属性异步加载、尽快执行async属性用于缓解无属性脚本带来的长解析停顿script srcscript.js async/script其行为特点是遇到标签时不立即暂停解析脚本在后台并行下载脚本下载完成后才暂停 HTML 解析并立即执行执行结束后恢复解析。相比无属性写法async让下载过程与解析过程重叠减少了总阻塞时间。但它有一个重要 caveat注意事项多个async脚本的执行顺序不保证与声明顺序一致而是谁先下载完谁先执行。这意味着async脚本之间如果存在依赖关系就可能出现顺序错乱、引用未定义符号的问题。!-- 下面的顺序不保证a.js 可能晚于 b.js 执行 -- script srca.js async/script script srcb.js async/script要点小结async适合彼此独立、无相互依赖的脚本如统计代码、第三方广告脚本、独立功能模块追求尽早执行、尽早生效。defer属性异步加载、按序执行defer可以看作是async的进阶版在保留后台下载的同时恢复执行顺序的保证script srcscript.js defer/script其行为特点是与async相同脚本在后台并行下载不阻塞解析HTML 解析完全结束后按文档中声明的顺序依次执行所有defer脚本多个defer脚本的执行顺序严格等同于声明顺序因此可以安全声明相互依赖的脚本。!-- 两个脚本都延迟执行且 a.js 一定先于 b.js 执行 -- script srca.js defer/script script srcb.js defer/script由于执行发生在解析完成后defer脚本执行时文档 DOM 已完整构建非常适合需要操作 DOM 的业务脚本、页面初始化逻辑以及存在依赖关系的脚本链。要点小结defer兼顾了不阻塞解析与顺序可控两个目标是现代页面加载业务脚本的首选。三种方式速查对比维度无属性asyncdefer下载时机遇到即下载阻塞解析后台并行下载后台并行下载是否阻塞 HTML 解析下载与执行均阻塞仅执行时短暂阻塞不阻塞执行时机下载完成后立即执行下载完成后立即执行HTML 解析完成后执行顺序按声明顺序不保证按声明顺序DOM 可用性不保证执行时解析可能未完成不保证执行时 DOM 已就绪典型场景对时机敏感的小脚本独立第三方脚本依赖 DOM 或脚本间有依赖从源码看实践模块脚本与延迟加载脚本加载策略在现代项目中已经内化为构建工具的默认行为仓库自身的代码同样体现了这一实践。在 30-seconds-of-code 的构建管线中多个运行时组件均以typemodule方式注入markdownParser.js 中代码高亮脚本以script typemodule src...prism-code-highlights.mjs的形式注入页面loadWebComponents.js 中自定义 Web Components 同样通过script typemodule动态加载Meta.astro 中内嵌脚本通过set:html渲染进head区域。这背后有一个值得注意的规范事实ES Moduletypemodule脚本默认具有defer语义——它们在后台下载、不阻塞解析、按文档顺序在解析完成后执行。因此现代项目中模块脚本天然延迟执行的特性与本文介绍的defer行为一脉相承对于模块间依赖ES Module 自身的静态依赖解析也保证了加载顺序的正确性。几个容易忽略的边界async与defer属性仅对外部脚本带src有意义对内联脚本无效一个标签同时写async与defer时浏览器按async处理async优先级更高defer脚本的执行发生在DOMContentLoaded事件触发之前因此监听DOMContentLoaded时需注意脚本与事件的先后。相关阅读与延伸脚本加载只是页面性能优化的一环仓库中还提供了与之互补的资源策略可以进一步阅读资源预加载速查表relpreload、relprefetch、relpreconnect等指令的适用场景浏览器中的资源预取如何利用浏览器空闲时间提前下载后续页面所需资源HTML Head 基础集合head区域标准配置与元数据的最佳实践。结合async/defer的脚本策略与上述资源预加载手段你可以在脚本尽快执行与页面尽快渲染之间找到适合自己项目的平衡点为优化首屏性能打下基础。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 Seconds of Interviews 精讲 script 的 defer 与 async 属性加载时机、执行顺序与最佳实践30 Seconds of Interviews 精讲 script 的 defer 与 async 属性加载时机、执行顺序与最佳实践 script 标签教程前端深入解析30-seconds-of-code的内容管理系统深入解析30 seconds of code的内容管理系统 30 seconds of code项目采用了一套精心设计的Markdown模板系统和YAML配置管教程文档Polar Web 前端 Script 加载性能指南用 defer/async 与 next/script 消除渲染阻塞Polar Web 前端 Script 加载性能指南用 defer/async 与 next/script 消除渲染阻塞 Polar开源结算平台的 Web后端前端金融科技上一篇ant-design 进度圈动态展示用状态驱动可交互环形进度组件下一篇如何用MAA助手实现明日方舟全自动挂机新手终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考