preload不能解决@import导致的串行阻塞，因其仅下载不解析，且@import在CSS解析阶段才触发请求，形成二级瀑布流；必须将@import全部替换为并行加载的<link>标签。
preload 不能解决 CSS 内部的 @import、字体或图片依赖链问题，它只管把指定文件拉下来——如果那个 CSS 文件自己又拖着一堆子资源不放，首屏照样卡。
为什么 preload 了 main.css，页面还是白屏或样式错乱？
最常见原因是：preload 只下载，不解析也不应用。你必须保留后续的 <link rel="stylesheet">，否则样式永远不会挂载到 DOM 上。
- 错误写法：
<link rel="preload" href="main.css" as="style">—— 没有配套的<link rel="stylesheet">，浏览器根本不会解析 CSS - 正确写法（推荐）：
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">，靠onload动态切换rel，避免重复请求 - 路径必须完全一致：带查询参数的也要对齐，
main.css?v=1.2和main.css?v=1.3在浏览器眼里是两个资源，preload 不会复用
非关键 CSS 用 preload + onload 加载，但页面渲染仍慢？
问题往往不在 preload 本身，而在被加载的 CSS 文件内部藏着“隐性阻塞源”——比如它用 @import 引了另一个 CSS，或声明了未优化的 @font-face，或写了 background-image 指向大图。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
@import是同步阻塞的，会打断当前 CSS 解析，形成二级瀑布流；应全部转为<link>并提前 preload - 字体必须配
crossorigin和as="font"单独 preload，否则即使 main.css 里写了@font-face，字体也等不到解析完才开始拉 - 非关键 CSS 中的大图建议改用
<img loading="lazy">或设font-display: optional，否则它们会在样式挂载后立刻抢占带宽
preload 的 as 属性填错，为什么 DevTools 看不出异常？
填错 as（比如写成 as="stylesheet" 而不是 as="style"）不会报错，但浏览器会降级处理：请求头不对、优先级变低、缓存无法复用——所有这些都静默发生。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：打开 Chrome DevTools → Network 面板 → 找到目标资源 → 点开 Headers 标签页 → 检查
Accept请求头是否匹配（CSS 应为text/css）和Content-Type响应头是否一致 - 必须严格对应：
as="style"（不是"stylesheet"）、as="font"（必须加crossorigin）、as="script"（不能写"javascript"） - Safari 直到 iOS 16.4 / macOS 13.3 都不支持
as="style"，它会把 preload 当普通 fetch 处理，优先级不提升——别指望它在 Safari 里起效
真正容易被忽略的是：preload 解决的是“发现晚”，不是“依赖深”。哪怕你把所有 CSS 都 preload 了，只要其中任何一个文件内部存在未收敛的引用链，首屏就依然不可控。
