css渐变本身不加载慢，因其是浏览器即时生成的声明式绘制，无网络请求与解码开销；所谓“慢”实为图片混用、资源拖累或fallback缺失所致。
直接用 background-image: linear-gradient() 做响应式背景渐变，本身不加载、不请求、不阻塞——所谓“加载慢”根本不是渐变的问题，而是你把它和图片混用了，或者被其他资源拖累。
为什么说渐变本身不“加载慢”
CSS 渐变是纯声明式绘制，浏览器在渲染时即时生成，没有网络请求、没有解码开销、也不受缓存策略影响。你看到的“慢”，大概率来自以下干扰项：
- 误把
linear-gradient()和真实图片写在同一行background-image多值语法里（比如background-image: linear-gradient(...), url("bg.jpg")），结果图片加载失败或延迟，导致整个背景空白几秒 - 容器父级或子元素有未优化的大图、SVG 字体、或未压缩的 CSS/JS，Lighthouse 报的“慢”被归因到“背景”上
- 用了
@import方式引入 Bootstrap Sass，导致构建时所有渐变相关变量和 mixin 被冗余打包，CSS 体积暴涨
渐变背景被遮住或闪白怎么办
常见现象：页面刚打开时一闪而过白色底色，几毫秒后才显出渐变——这不是加载问题，是渲染顺序和 fallback 缺失导致的视觉断裂。
- 必须提供
background-colorfallback，且要写在background-image之前，例如：div.container {<br> background-color: #6a11cb;<br> background-image: linear-gradient(to right, #6a11cb, #2575fc);<br>} - 如果容器里嵌了
.card或.bg-white这类带不透明背景的组件，它们会盖住底层渐变；改用background-color: rgba(255, 255, 255, 0.92)留出透出空间 - 别在
<style></style>标签里或 HTML 的style=""属性中写渐变——它无法参与媒体查询条件控制，也无法被 CSS 压缩工具识别
移动端 Safari 渐变发灰或不显示
iOS 15.4 之前不支持 linear-gradient() 无前缀写法，且部分旧版 WebView 对 to right 方向解析异常。
- 必须加
-webkit-linear-gradient()前缀，方向统一用角度（如135deg），避免to bottom right这类非标准写法 - 不要依赖
prefers-color-scheme动态切渐变色——它触发重绘，反而增加 CLS（累计布局偏移） - 如果项目用 Sass，直接复用
$primary和$secondary变量生成渐变，避免硬编码颜色值，方便后续主题切换
真正卡顿的地方，从来不是那行 linear-gradient()，而是你没关掉的 bootstrap/scss/carousel、没删的图标字体、或是忘了给 <img> 加 loading="lazy" 却怪渐变拖慢首屏。
