现代浏览器支持prefers-reduced-data媒体查询，可精准响应用户主动开启的省流量模式；它为布尔型特性，仅接受reduce值，适用于CSS中直接控制样式降级，比connection.effectiveType更可靠且无需JS介入。
用 prefers-reduced-data 媒体查询判断用户是否启用了省流量模式
现代浏览器（Chrome 97+、Safari 16.4+、Firefox 113+）支持 prefers-reduced-data，它不是“检测网速”，而是响应用户在系统或浏览器中主动开启的“节省数据”偏好。这比用 navigator.connection.effectiveType 更可靠——后者易被禁用、伪造，且不触发样式重计算。
实际使用时直接写在 CSS 中即可生效：
body {
background: #f8f9fa;
}
@media (prefers-reduced-data: reduce) {
body {
background: #fff;
}
.card-image { display: none; }
.card-content { font-size: 0.875rem; }
}
注意：prefers-reduced-data 是布尔型媒体特性，只接受 reduce 或省略（即默认不匹配），不支持 no-preference 等值。
骨架屏不能靠 JS 动态插入，必须用纯 CSS + HTML 结构实现
很多团队用 JS 创建 skeleton DOM 节点，但这样会延迟渲染、增加首屏阻塞、且在 JS 失败时完全白屏。真正健壮的骨架屏应是静态 HTML + CSS 控制显隐，配合媒体查询和加载状态切换。
立即学习“前端免费学习笔记（深入）”；
关键做法：
- HTML 中直接写出带
class="skeleton"的占位结构（如<div class="skeleton skeleton-text"></div>） - 默认用 CSS 隐藏：
.skeleton { visibility: hidden; } - 当图片/内容加载完成，用
img.onload或IntersectionObserver移除skeleton类，或添加loaded类触发显隐过渡 - 同时搭配
@media (prefers-reduced-data: reduce)强制显示骨架并跳过图片/动画
示例片段：
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@media (prefers-reduced-data: reduce) {
.skeleton {
animation: none;
background-color: #eee;
}
}
connection.effectiveType 不适合 CSS 响应式控制，仅作日志或降级兜底
虽然 navigator.connection.effectiveType 可读取 'slow-2g'、'2g'、'3g'、'4g'，但它无法触发 CSS 重计算，也不能监听变化——你不能写 @media (connection: slow-2g)，这种语法根本不存在。
若真要基于网络类型做样式调整，只能走 JS 路线：
- 读取
navigator.connection?.effectiveType（注意空值判断） - 根据值动态给
添加 class，如data-network="3g" - 再用 CSS 选择器
html[data-network="3g"] .hero-banner { display: none; }
但要注意：该 API 在部分安卓 WebView 和旧版 iOS Safari 中不可用；且用户切换网络后不会自动触发更新，需手动监听 navigator.connection.onchange（兼容性更差）。所以它只适合非关键路径的体验优化，不能替代 prefers-reduced-data。
骨架动画在低端设备上容易卡顿，用 transform + opacity 替代 background-position
常见骨架闪烁动画用 background-position 位移实现，但在中低端 Android 设备上掉帧严重，尤其列表滚动时。根本原因是 background-position 触发重绘（repaint），而 transform 和 opacity 可由合成层处理。
推荐写法：
.skeleton::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #f0f0f0;
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { opacity: 0.3; transform: translateX(-100%); }
100% { opacity: 1; transform: translateX(100%); }
}
这个方案在 Chrome DevTools 的 Rendering 面板中可验证：只有 “FPS Meter” 和 “Layer Borders” 显示合成层活动，没有大面积黄色重绘标记。
真正难的是让骨架结构与真实内容 DOM 高度一致——稍有错位，加载完成瞬间就会“跳一下”。这需要设计阶段就约定好行高、边距、圆角等尺寸，并在组件库中固化为变量。否则再好的媒体查询也压不住布局抖动。
