预加载资源时图片/视频仍会闪一下，是因为浏览器默认插入DOM即触发请求与渲染；真正有效的预加载方式是用link rel="preload"静默拉取或Image()构造函数控制解码，而非仅隐藏元素。
预加载资源时为什么图片/视频仍会闪一下
因为浏览器默认的 img 或 video 元素一旦插入 DOM，就会立即触发网络请求并尝试渲染——哪怕它还没显示。所谓“隐藏式预加载”，核心不是藏元素，而是**不让浏览器在不必要时触发解码、布局或绘制**。
常见错误是只加 display: none 或 visibility: hidden，但这些样式对 img 的加载行为完全无效，资源照常下载、解码、甚至占用内存。
- 用
loading="lazy"会延迟加载，和预加载目标相反，别混用 - 用
opacity: 0+pointer-events: none也不行，照样触发渲染流水线 - 真正有效的是：不插入 DOM，或插入但禁用自动加载
用 link rel="preload" 静默拉取关键资源
这是最干净、最可控的预加载方式，浏览器会在空闲时提前获取资源，但**不执行解析、解码、渲染任何后续动作**，完全由你决定何时使用。
适用资源类型有限（image、video、font、script 等），且必须指定 as 属性，否则可能被忽略或降级为普通 fetch。
立即学习“前端免费学习笔记（深入）”；
-
fetchpriority="high"可提升优先级（Chrome 101+），对首屏关键资源有用 - 不要 preload 过多资源，尤其大视频，会挤占正常页面请求带宽
- preload 不支持跨域凭据（如 cookies），若资源需
credentials，得用crossorigin属性
用 Image() 构造函数实现 JS 控制的静默缓存
当需要动态判断、按需预加载（比如用户 hover 某个按钮才预载下一页图集），Image() 是更灵活的选择。它创建的是纯内存中的图像对象，不插入 DOM，不会触发 layout/paint。
注意：只有当 img.src 被赋值后，浏览器才发起请求；而 img.decode() 才真正触发解码——这才是“完成缓存”的标志。
const img = new Image();
img.src = 'detail-1.jpg';
img.decode().then(() => {
console.log('已解码，可随时插入 DOM 不卡顿');
}).catch(e => {
console.error('解码失败，可能是格式不支持或网络中断', e);
});
- 多个图片可并发创建
Image()实例，但建议限制并发数（如 3~4 个），避免阻塞主请求队列 - 解码失败通常不抛错，要显式监听
img.onerror或用decode()的 promise 拒绝态 - 已解码的
Image对象可复用多次，插入不同img元素时直接赋值img.src = cachedImg.src
video 预加载要绕开自动播放策略和解码开销
直接设置 video.src 并不等于“已准备好播放”——现代浏览器会延迟解码，直到明确调用 play() 或用户交互发生。想真正预热，得主动触发 load() + preload="auto"，再配合 canplaythrough 事件。
但注意：canplaythrough 只表示“理论上能播完”，不代表帧已解码；如果追求秒开，还得调用 video.play().catch(() => {}) 触发首次解码（即使立刻 pause()）。
- 设
preload="none"时，即使 src 已赋值，也不会预加载；必须设为"auto"或"metadata" - 移动端 Safari 对自动
play()极其敏感，建议用play().catch(e => { if (e.name === 'NotAllowedError') {...} })容错 - 预加载后立即
pause()并currentTime = 0，可避免音频意外播放或进度条跳动
(from cache) 或 (from disk cache)，而不是只看请求是否 200。 
