link标签无法根据网络状态条件加载，必须用JavaScript动态创建并插入，结合navigator.onLine或Network Information API检测，在DOM就绪后操作并避免重复插入。
link 标签本身不支持网络状态条件加载
直接用 <link> 标签无法根据 navigator.onLine 或网络类型（如 4G/ WiFi）自动切换资源加载。它是个声明式标签，浏览器在解析 HTML 时就决定是否发起请求，此时 JavaScript 还没执行，更谈不上读取运行时网络状态。
用 JavaScript 动态创建 link 标签才是可行路径
真正能实现“基于网络状态加载”的方式，是用 JS 检测状态后，手动插入 <link>。关键点在于时机和策略：
- 必须等
DOMContentLoaded或至少document.readyState === 'interactive'后操作，否则document.head可能不可用 - 避免重复插入相同
rel和href的<link>，可用document.querySelector('link[href="..."]')先查重 - 对 CSS 资源，建议用
rel="stylesheet"；对预加载用rel="preload"，但注意preload不会阻塞渲染，需配合onload回调做后续逻辑 - 不要依赖
navigator.onLine判断真实网速——它只反映是否连上网络（比如连着断网的 WiFi 也返回true），更适合做兜底降级（如离线时加载本地 fallback.css）
示例：按 navigator.onLine 加载不同 CSS
if (navigator.onLine) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/main.css';
document.head.appendChild(link);
} else {
const fallbackLink = document.createElement('link');
fallbackLink.rel = 'stylesheet';
fallbackLink.href = '/css/offline.css';
document.head.appendChild(fallbackLink);
}
// 同时监听切换事件
window.addEventListener('online', () => {
// 清掉 offline.css，加回 main.css（注意移除旧 link）
});
window.addEventListener('offline', () => {
// 清掉 main.css，加回 offline.css
});
更实用的场景：用 Network Information API 做带宽感知加载
navigator.connection 提供 effectiveType（'slow-2g' / '2g' / '3g' / '4g'）和 downlink（MBps），但它不是所有浏览器都支持（Chrome、Edge 支持，Firefox 仅部分版本，Safari 不支持）。使用前务必检测：
- 先检查
'connection' in navigator && 'effectiveType' in navigator.connection - 若支持，可结合
rel="preload"提前拉取轻量资源：link.as = 'style'配合link.href = '/css/light.css' - 不支持时，退回到
navigator.onLine或直接加载默认资源，避免 JS 报错中断流程 - 注意：该 API 返回值可能滞后，不适合做实时切换，更适合页面初始化时的一次性决策
force reflow 或重置 class 才能生效，这点没有银弹，得结合具体 UI 框架处理。 
