CSS样式表的自适应加载_根据网络状况引入不同大小文件

应结合 navigator.connection.effectivetype 和 downlink 判断网络质量，safari 需降级用加载时间探测或服务端注入网络提示，再动态插入 media=”print” 后切换为 “all” 的 css 链接实现条件加载。

怎么判断当前网络是 4G 还是 WiFi？

浏览器没提供直接的 navigator.connection.type === 'wifi' 这种可靠 API。实际能用的只有 navigator.connection.effectiveType（如 '4g'、'3g'、'slow-2g'），但它不区分 WiFi 和有线，只反映“有效连接类型”——也就是说，WiFi 下如果信号差或后台限速，也可能返回 '3g'。

所以别硬判 WiFi，转而关注 effectiveType + downlink（估算带宽，单位 Mbps）组合更靠谱：

• effectiveType 是 chrome/edge/firefox 支持的，Safari 完全不支持（navigator.connection 为 undefined）
• downlink 值在 Safari 中存在但不可靠（常固定返回 10），Chrome 中相对可用
• 若两者都不可用，降级用 screen.width 或 UA 字符串粗筛（不推荐，仅兜底）

如何动态加载不同尺寸的 CSS 文件？

不能靠 @import 或 link[rel=stylesheet] 的 media 属性做网络自适应——那些只响应视口、设备像素比，不感知网速。

必须用 js 控制加载时机和目标 URL：

立即学习“前端免费学习笔记（深入）”；

• 尽早执行（比如放在 底部，避免阻塞渲染）
• 优先加载最小版 CSS（如 base.min.css），再根据网络条件异步加载增强版（如 enhanced.css）
• 用 fetch() 预检或直接创建 link 元素插入 dom；不要用 document.write（已废弃且会清空页面）
• 注意：CSS 加载是异步的，但插入后会触发重排；建议加 media="print" 插入，加载完再切回 media="all"，避免 FOUC

示例逻辑：

const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = shouldLoadHeavyCSS() ? '/css/enhanced.css' : '/css/light.css'; link.media = 'print'; // 先隐藏 document.head.appendChild(link); link.onload = () => link.media = 'all';

为什么用 rel=preload 不适合这个场景？

<link rel="preload"> 是预加载资源，但不控制应用时机，也不支持条件逻辑。它会在 HTML 解析时立即发起请求，无法等 navigator.connection 判断完成后再决定加载哪个文件。

更关键的是：preload 后仍需手动 insertRule 或切换 link 的 disabled 状态，反而增加复杂度。不如直接用 JS 动态创建 link 干净。

• preload 适合已知必用、且路径确定的资源（如首屏字体、关键 JS）
• 这里路径和是否加载都取决于运行时网络状态，属于“条件加载”，不是“预加载”
• 滥用 preload 可能造成带宽浪费——比如在 2G 下 preload 了 500KB 的 CSS，用户根本不用

Safari 用户怎么办？

Safari 不支持 navigator.connection，所以所有基于它的判断都会 fallback。这不是 bug，是 Apple 明确拒绝实现该 API（隐私考虑）。

可行方案只有两个：

• 服务端通过 UA + IP 地址段（如运营商 ASN）粗略识别，然后注入初始网络标记到 HTML 中（如 window.__NET_HINT = '4g'）
• 客户端用加载时间试探：先发一个轻量探测请求（如 /ping?ts=123），记录 responseEnd - fetchStart，再决定后续 CSS 版本
• 二者都不完美，但后者更可控；注意探测请求要小（

别指望一次判断覆盖所有情况。网络状况随时变，但 CSS 一般只加载一次。真正需要响应式样式的，应该靠 CSS 自身的媒体查询和现代特性检测（如 @supports），而不是反复换整张样式表。