link rel="preload" 是唯一真正能提前触发图片下载的原生方式，仅在 <head> 中静态声明且含 as="image"、绝对或根相对路径、不与 loading="lazy" 共用时有效；new Image() 适用于运行时条件预加载，需先绑定事件再赋值 src 并控制并发。
link rel="preload" 是唯一真正能提前触发图片下载的原生方式，但它只在 <head> 中静态声明时有效；new Image() 是运行时可控的补充手段，二者不能互相替代，也不能混用逻辑。
必须写在 <head> 里的 link rel="preload"
浏览器只在 HTML 解析初期识别它，动态插入、放在 <body> 里、或写在 <title> 后面都会被忽略。
-
as="image"缺一不可——写成as="img"或漏掉，请求会降级为普通fetch，Priority 显示Low，缓存策略也不同 -
href必须是绝对路径或根相对路径（如/assets/hero.webp），不能是./hero.jpg或模板字符串（如/assets/${name}.jpg） - 不要和
loading="lazy"同时用——语义冲突，Chrome 可能直接跳过预加载 - 如果图片用了
srcset，preload只能指定其中某一个确定 URL，且该 URL 必须和最终匹配到的srcset项完全一致（含大小写、斜杠、query 参数）
new Image() 适合运行时条件预加载
比如用户 hover 商品卡片时预载详情页大图，或轮播滑到第 3 页时预载第 4、5 页图——这些时机无法靠静态 HTML 提前声明。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 顺序不能错：先绑定
onload/onerror，再赋值src；否则缓存命中时事件同步触发，回调会被跳过 - 检查
img.complete === true：为真说明已缓存，需立刻走成功逻辑，而不是等 onload - 并发要节制：同域通常只有 6–8 个连接，批量预加载建议用 Promise 队列控制，每次最多 4 个
- 别写成一行：
new Image().src = url—— 失败不可知，也无法 await，必须保留引用并监听事件
别把 loading="eager" 或 display: none 当预加载用
它们都不触发提前下载：loading="eager" 只是“不懒”，仍等 DOM 解析到该 <img> 标签才发请求；display: none 在部分浏览器中甚至会推迟 eager 加载，直到元素进入渲染流。
立即学习“前端免费学习笔记（深入）”；
-
loading="lazy"是明确的延迟加载机制，加在首屏图上反而会让 Chrome 等到滚动前 500px 才请求，和预加载目标完全相反 -
decoding="async"只影响解码时机（防主线程卡顿），对下载发起时间毫无影响 - 非首屏但确定会用的图（如折叠面板展开后必显），用
<img loading="eager">即可，无需 JS 或 preload
最容易被忽略的是路径一致性：预加载的 href 和最终 <img src> 必须字面量完全相同——哪怕多一个斜杠、大小写不一致、query 参数顺序颠倒，都会导致缓存不命中，变成两次下载。
