通过浏览器 Navigator Connection API 检测用户网络类型与带宽，动态加载 index.scss（完整版）或 index-lite.scss（精简版），可显著提升慢网环境下的 First Contentful Paint（FCP）性能。
通过浏览器 navigator connection api 检测用户网络类型与带宽，动态加载 `index.scss`（完整版）或 `index-lite.scss`（精简版），可显著提升慢网环境下的 first contentful paint（fcp）性能。
在现代 Web 应用中，首屏加载速度直接影响用户体验与核心 Web 指标（如 FCP、LCP）。React 项目虽具备强大交互能力，但默认全量 CSS 加载在弱网下易造成样式阻塞与渲染延迟。Gmail 的“降级 UI”策略（如慢网时禁用动画、简化配色与图标）正是基于 navigator.connection API 实现的自适应体验——我们也可在 React 项目中复用这一思路。
✅ 实现原理：利用 Connection API 做前置判断
navigator.connection 是 W3C 标准 API（Chrome 61+、Edge 79+、Firefox 90+ 支持），提供以下关键属性：
-
effectiveType:'slow-2g' | '2g' | '3g' | '4g'（综合带宽、RTT、丢包率的估算值） -
downlink: 实际下行带宽（MB/s），如0.5表示约 4 Mbps -
rtt: 预估往返延迟（ms）
⚠️ 注意：该 API 仅在安全上下文（HTTPS 或 localhost）中可用；Safari 目前不支持
effectiveType和downlink，需降级处理。
? 动态加载 CSS 的正确姿势
避免在 index.tsx 中直接 import './index.scss'（Webpack 会静态打包，无法动态切换），应改为运行时注入 <link> 标签。推荐在 index.ts 渲染前执行：
立即学习“前端免费学习笔记（深入）”；
// index.ts
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configure } from 'axios-hooks';
import App from './components/App';
import API from './utils/api';
import store from './store';
// ? 动态选择并加载 CSS
const loadCSS = (filename: string) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = `/static/css/${filename}`; // 确保构建后路径正确（如使用 CRA，建议放在 public/ 下）
document.head.appendChild(link);
};
// 判断是否应启用精简模式
const shouldUseLiteCSS = () => {
if (!navigator.connection) return false;
const { effectiveType, downlink } = navigator.connection;
// 优先使用 effectiveType（更可靠）
if (effectiveType && ['slow-2g', '2g', '3g'].includes(effectiveType)) {
return true;
}
// 降级：基于 downlink 判断（单位 MB/s，注意 Safari 不支持）
if (typeof downlink === 'number' && downlink <= 1.0) {
return true;
}
return false;
};
// 执行加载
if (shouldUseLiteCSS()) {
loadCSS('index-lite.css'); // 构建后对应文件名（如 CRA 中为 index-lite.[hash].css）
} else {
loadCSS('index.css');
}
// 初始化 React 应用
configure({ axios: API });
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'),
);? 构建与部署注意事项
-
CSS 文件输出：确保
index.scss和index-lite.scss经过独立编译（如使用 Webpack 的MiniCssExtractPlugin或 Vite 的build.rollupOptions.output.manualChunks），生成不带哈希或统一哈希的稳定文件名（如index.css/index-lite.css），便于动态引用。 -
public 目录方案（推荐）：将两个 CSS 文件放入
public/css/，直接通过/css/index.css引用，规避打包路径干扰。 -
服务端兜底（可选）：对于不支持
navigator.connection的旧浏览器，可在 HTML 模板中默认加载index-lite.css，再由 JS 升级为完整版（即“渐进增强”）。
✅ 效果验证
- 在 Chrome DevTools → Network → Throttling 中选择
Slow 3G，刷新页面，检查 Elements →中是否插入了index-lite.css； - 对比 Lighthouse 报告中的 FCP：慢网下通常可提升 30%~50%；
- 使用
performance.getEntriesByType('resource')查看 CSS 加载耗时差异。
通过这一轻量级适配策略，你无需重构 UI 或拆分组件逻辑，即可为全球不同网络条件的用户提供更快速、更可靠的首屏体验——这正是现代前端性能优化中“渐进式降级”思想的务实落地。
