预加载图片不卡顿，卡顿源于未提前解码和合成准备；link rel="preload"仅加速下载，不解码；需组合decoding="async"+fetchpriority="high"、错峰warmup动画及视觉遮蔽。
预加载图片本身不会卡顿，卡顿来自「预加载了但没用好」——浏览器提前下载了资源，却在首次渲染或动画触发时才开始解码、光栅化、上传 GPU，这一串同步操作直接吃掉主线程，导致 5fps 卡顿。关键不是“要不要 preload”，而是“preload 后怎么让浏览器提前做完解码和合成准备”。
为什么 link rel="preload" 不能解决动画卡顿
预加载只管下载，不管解码和渲染准备。link rel="preload" as="image" href="hero.webp" 确实会让浏览器尽早发起请求，但图片仍按需解码：第一次设置 img.src 或第一次应用 opacity: 1 时，浏览器才真正开始解码 → 布局 → 合成 → 过渡帧生成。这个过程无法被 preload 提前触发。
- 即使图片已缓存，首次
opacity变更仍会触发同步解码（尤其 WebP/AVIF） -
preload不影响 CSS transition 的帧生成时机，只影响资源就绪时间 - 若同时 preload 多张大图，反而可能因并发解码挤占主线程，比不 preload 更卡
用 decoding="async" + fetchpriority="high" 组合调度解码
这两个属性必须一起用，单独写一个基本无效。前者把解码任务移到后台线程，后者确保该图在资源队列中排前面，避免被 JS 或字体抢占带宽。
- 仅对宽/高 ≥ 800px 的位图启用：
<img src="hero.webp" decoding="async" fetchpriority="high" style="max-width:90%" style="max-width:90%" alt="HTML预加载图片卡顿怎么优化" > - SVG、小图标（≤ 100×100）、
<source></source>标签不支持decoding，加了也忽略 -
fetchpriority="high"对内联样式、<script></script>无效，只作用于<img alt="HTML预加载图片卡顿怎么优化" >、<iframe></iframe>、<link as="image"> - Chrome DevTools → Performance 面板里若看到大量 “Decode Image” 占主线程，说明该加没加
强制预解码：用隐藏式首帧动画“热身”
这是解决首次动画卡顿最直接有效的手段——不靠浏览器猜，自己主动跑一遍完整流程，再用覆盖层屏蔽视觉过程。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 给每张待动画的
<img alt="HTML预加载图片卡顿怎么优化" >添加临时类（如.warmup），CSS 中定义width: 100%; opacity: 1; transition: all 0.1s - 用
setTimeout错峰触发（如setTimeout(() => img.classList.add('warmup'), 300 * i)），避免多图并发解码 - 过渡结束后立即移除类：
img.addEventListener('transitionend', () => img.classList.remove('warmup')) - 覆盖图（
<div class="cover-image">）必须用 <code>background-image实现，它比<img alt="HTML预加载图片卡顿怎么优化" >更早进入渲染管线，能稳稳挡住预热过程懒加载与预加载混用时的冲突点
loading="lazy" 和 preload 在同一张图上共存，容易互相抵消效果：preload 强制提前下载，但 lazy 又要求“等进入视口才解码”，结果就是资源早就下完了，却卡在解码环节不动。
- 首屏关键图（LCP 元素）禁用
loading="lazy"，只用fetchpriority="high"+decoding="async" - 非首屏图若用了
loading="lazy"，就别再preload—— 浏览器会忽略，且控制台报Failed to execute 'getBoundingClientRect' - 所有
loading="lazy"的图片必须显式声明width和height，否则 Chrome 直接禁用懒加载
真正难处理的不是怎么写 preload，而是如何让浏览器在用户看不见的时候，把解码、GPU 上传、合成层创建这些重活干完。这需要组合属性、错峰调度、视觉遮蔽三者配合，缺一不可。多数人只写了 preload 就以为万事大吉，结果卡在首帧动画上，问题其实根本不在网络层。
- 首屏关键图（LCP 元素）禁用
