直接用<link rel="stylesheet">无法渐显，因其阻塞渲染：样式一到位内容即全量显示，无中间过渡态；渐显需内联关键CSS保首帧可用，再用preload+onload动态挂载并触发CSS过渡动画。
为什么直接用 <link rel="stylesheet"> 无法实现渐显
浏览器对 <link rel="stylesheet"> 的处理是阻塞渲染的：它必须下载、解析、构建 CSSOM 后，才继续绘制首屏内容。这意味着——没有样式，就没有渲染；样式一到位，内容就“啪”一下全出来。不存在中间态，更不会自动淡入。所谓“渐显”，本质是让部分内容先以无样式或基础样式呈现，再叠加完整样式并触发过渡动画，这和原生 <link> 的行为天然冲突。
用 rel="preload" + onload 动态挂载可控制时机
真正能干预首屏样式加载节奏的，是把预加载和挂载拆开：<link rel="preload"> 提前发起请求但不阻塞，等 HTML 解析完成、首屏 DOM 渲染后，再通过 onload 回调把 rel 改为 "stylesheet"，触发样式注入并联动 CSS 过渡。
-
<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">必须放在<head>中，且不能依赖type="text/css"—— preload 不校验 MIME，但挂载时浏览器会按实际响应类型判断是否可解析 - Chrome 和 Edge 支持
onload属性，Firefox 需改用addEventListener('load', ...)，建议封装兼容逻辑 - CSS 文件里必须包含可触发过渡的规则，例如：
body { opacity: 0; transition: opacity 0.3s ease; }，并在body上加类（如loaded）来激活：body.loaded { opacity: 1; } - 别在
onload里直接操作 DOM 样式，而是靠 class 切换驱动，否则可能因 CSSOM 尚未就绪导致过渡失效
路径和 media 属性写错会导致渐显逻辑静默失败
渐显效果“没反应”，90% 是因为 CSS 根本没加载成功，而非 JS 或 CSS 写错。常见静默失败点：
-
href路径错误（比如该用/css/main.css却写了css\main.css），控制台只报 404，但不会提示“渐显中断” -
media值误设为"print"或无效查询（如media="(min-width: 9999px)"），样式表被浏览器跳过，preload 成了空跑 - 服务器返回的
Content-Type不是text/css（比如 Nginx 默认配成application/octet-stream），Chrome 可能仍解析，Firefox 直接拒绝挂载 - preload 的
as="style"缺失，浏览器当普通资源预加载，后续this.rel='stylesheet'会失败
首屏关键样式仍需内联，否则渐显前是白屏或乱排版
单纯靠 preload + onload 挂载完整 CSS，首屏渲染时 DOM 无任何样式约束，文字堆叠、图片溢出、布局塌陷都可能发生——这不是“渐显”，是“闪崩”。必须把首屏必需的最小样式集（Critical CSS）内联进 <style>，确保初始渲染可用、可读、结构稳定。
立即学习“前端免费学习笔记（深入）”；
- 内联部分只含影响首屏像素的规则：字体、行高、容器宽高、关键 flex/grid 设置、按钮基础尺寸等
- 避免内联
@import、@font-face或大段注释，它们会阻塞 HTML 解析 - 构建时用
critters（Vite/webpack 插件）或criticalCLI 自动提取，手写极易漏掉伪元素或媒体查询断点 - 内联样式末尾加
body { opacity: 0; }，等外部 CSS 挂载后再用 class 移除，才能让“渐显”从视觉上连贯起来
transition 就完事，核心在于三者协同：内联 Critical CSS 确保首帧可用，preload 控制资源获取时机，动态挂载触发样式生效与过渡起点。漏掉任意一环，效果就退化成 FOUC 或白屏延迟。 
