根本原因是Safari在渲染阶段被迫同步解码、布局、绘制大量高分辨率图像，且解码无GPU加速、内存受限，易引发重排、丢帧和主线程阻塞。
iPad 上 HTML5 页面导入图片卡顿，根本原因不是“图片不能导”，而是**浏览器在渲染阶段被迫同步解码、布局、绘制大量高分辨率图像资源**，尤其在 Safari（MobileSafari）中，图片解码不走 GPU 加速，且内存受限，极易触发重排、丢帧甚至主线程阻塞。
为什么 loading="lazy" 在 iPad 上有时没用？
原生懒加载在 iOS/iPadOS 15.4+ 才真正稳定支持，但仍有两个隐藏陷阱：
- iPad 的视口高度大（尤其 13 英寸 iPad Pro），
IntersectionObserver默认阈值为0，意味着图片必须完全进入视口才加载——滚动稍快就“追不上”，造成白屏或卡顿 - 如果图片父容器用了
overflow: scroll或-webkit-overflow-scrolling: touch，部分旧版 Safari 会忽略loading="lazy"，直接全量加载 - 更关键的是：
loading="lazy"只控制src请求时机，不解决图片本身体积大、格式差、解码慢的问题
实操建议：
- 显式设置
threshold提前加载：比如new IntersectionObserver(..., { threshold: 0.2 })，让图片在距离视口顶部 20% 时就开始加载 - 对首屏图片禁用懒加载（加
loading="eager"），避免白屏 - 始终搭配占位符（如 1×1 的 SVG 或 base64 灰色小图），防止布局抖动
WebP +
iPad 屏幕像素密度高（Retina），但 Safari 对 JPEG/PNG 解码效率远低于 WebP。一张 2000×1200 的 PNG 在 M5 iPad Pro 上解码耗时可能达 80–120ms，而同质量 WebP 通常 ≤30ms，且体积减少 40–60%。
立即学习“前端免费学习笔记（深入）”；
仅用 src 不够，必须用响应式语法适配不同 DPR 和屏幕宽度：
@@##@@
注意点：
-
width/height，否则 Safari 渲染时无法预留空间，导致重排 - 不要省略 fallback
jpg—— iPadOS 早期版本（≤14.5）不支持 WebP - 服务端需配置 MIME 类型
image/webp，否则 Safari 拒绝加载
Canvas 替代 -webkit-gradient 能省下 90% 渲染时间
你看到的“导入图片卡”，很可能不是真图片，而是用 CSS 渐变模拟的色块图（比如天气热力图、数据条）。这类场景下，-webkit-gradient 实际被 Safari 当作位图处理，每次重绘都触发 CPU 解码+合成，比加载一张 PNG 还慢。
换成 后，你能精确控制重绘区域（只画变化的那几条），且所有渐变由 GPU 加速生成：
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 230, 0);
gradient.addColorStop(0, '#4b4c4d');
gradient.addColorStop(0.25, '#575b5c');
gradient.addColorStop(0.75, '#575b5c');
gradient.addColorStop(1, '#4b4c4d');
ctx.fillStyle = gradient;
ctx.fillRect(x, y, width, height); // 只重绘当前条，不碰其他
关键提醒：
- 务必用
requestAnimationFrame控制重绘节奏，别在touchmove里直接画 - 避免每帧清空整个 canvas（
clearRect），只擦除局部区域 - 若需缩放，用
transform缩放 canvas 元素本身，而非拉伸绘制内容
虚拟滚动比“优化图片”更能治本
当页面要展示上百张缩略图（比如相册列表、商品网格），再小的 WebP 单张 50KB，100 张就是 5MB，光是 DOM 节点创建和样式计算就能让 iPad 崩溃。
此时图片优化只是止痛药，虚拟滚动才是手术刀：
- 只渲染当前可视区域 ±2 行的内容（约 20 个
- 滚动时通过
scrollTop动态更新src和style.transform - 配合
will-change: transform提示 Safari 启用图层合成
不用自己写：轻量库 vue-virtual-scroller（Vue）或 react-window（React）在 iPad Safari 下表现稳定；纯 JS 可用 virtuoso，它专为移动端滚动性能设计，内部已处理 touchcancel 防抖和 passive: true 事件监听。
最后提醒一句：iPad 上“导入图片”的卡顿，90% 源于把「资源加载」、「解码」、「布局」、「绘制」四个阶段全压在主线程上做。拆开它们，用对机制，比压缩 10KB 更管用。
