低端设备渐变易致重绘/白屏，应通过deviceMemory、hardwareConcurrency等指标分级降级：渐变→预渲染WebP图→纯色锚点色，并用CSS class控制、JS兜底及构建时自动化生成资源。
背景渐变在低端安卓或旧 iOS 设备上容易触发强制重绘、软渲染甚至白屏，核心问题不是 CSS 本身不支持，而是 linear-gradient 或 radial-gradient 在高 DPI + 低 GPU 填充率下会大幅拉高像素着色开销。降级不是简单“换纯色”，而是保持视觉一致性、保留语义结构、不破坏布局流的前提下，用更轻量的方式表达相同意图。
用 deviceMemory + hardwareConcurrency 快速识别低性能设备
在 <head> 中尽早执行检测逻辑（首帧前），避免等 DOM 加载完才判断：
- 若
navigator.deviceMemory <= 1（约 ≤1GB 内存），或navigator.hardwareConcurrency <= 2，直接启用静态降级 - 兼容 Safari 等不支持
deviceMemory的浏览器：补充检查screen.width * screen.height > 1280 * 720 && /Android|Mi|HUAWEI/.test(navigator.userAgent) - 检测后立即给
<html>添加 class，如mem-low gpu-limited，便于后续 CSS 分层控制
CSS 层：渐变 → 预渲染图 → 纯色的三级降级链
不写死 fallback，而是按设备能力逐级退化，确保所有环节都可维护：
-
第一级（默认）：正常写渐变，但限制复杂度——只用 2 色线性渐变，禁用
repeating-、conic-和多层叠加 -
第二级（中低性能）：用 WebP 格式预渲染一张 320×120 的渐变图，通过
@supports (background-image: url())+ class 切换：.gpu-limited .bg-gradient { background: url("grad-320x120.webp") no-repeat center / cover; } -
第三级（极低性能）：纯色 fallback，选渐变主色的中间值（如
linear-gradient(135deg, #4a6fa5, #6b9bd8)→#5884b1），并加注释说明该色为“视觉锚点色”，方便 UI 同步
JS 层：动态注入与防抖补丁
对已上线的老页面或 CMS 输出内容，可用脚本兜底处理未加 class 的渐变背景：
- 扫描所有含
background-image且含gradient的元素，对其父容器添加has-gradient类 - 监听
scroll和resize，但用requestIdleCallback包裹处理逻辑，避免卡主线程 - 对 WebView 场景（如微信内嵌），额外检测
typeof window.wx !== 'undefined'，直接走纯色路径——微信 X5 内核对渐变的栅格化效率极低
构建时预埋：自动化生成降级资源
在 CI/CD 流程中，用 Node.js 脚本读取 CSS 中的渐变声明，自动生成对应尺寸的 WebP 图并注入构建产物：
- 工具链示例：PostCSS 插件解析
linear-gradient值 → Canvas 绘制 → sharp 压缩为 WebP → 替换 URL 并生成 fallback 规则 - 输出结果类似：
.bg-hero { background: #5884b1; background: image-set(url(grad-320x120.webp) 1x, url(grad-640x240.webp) 2x); background: linear-gradient(135deg, #4a6fa5, #6b9bd8); } - 这样即使 JS 失效，CSS 自身也具备降级能力
