图片懒加载和现代格式（WebP/AVIF）是前端性能优化见效最快、落地最稳的两个抓手，前者减少非必要请求，后者压缩必须加载的体积，二者协同显著改善LCP、CLS和首屏加载时间。
图片懒加载和现代格式（WebP/AVIF）是前端性能优化中见效最快、落地最稳的两个抓手——前者减少“不该此时加载”的请求，后者压缩“必须加载”的体积。两者配合，能显著改善 LCP、CLS 和首屏加载时间。
用 loading="lazy" 快速启用原生懒加载
现代浏览器（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）已原生支持 loading 属性：
- 给非首屏
<img>加上loading="lazy"，浏览器会在图片进入视口前约 1250px（可随设备调整）时自动发起请求； - 首屏关键图不加该属性或显式设为
loading="eager"，确保立即加载； - 对
<iframe>同样有效，但 CSS 背景图需结合 JS 动态设置background-image才能真正延迟； - 搭配
width和height（或 CSSaspect-ratio），避免布局偏移（CLS）。
用 IntersectionObserver 精准控制加载时机
当需要兼容旧浏览器、自定义提前量（如提前 200px 加载）、或集成占位图/错误重试时，IntersectionObserver 是更可靠的选择：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 用
data-src存真实地址，src指向 1×1 透明 base64 占位图：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==； - 创建单个 Observer 实例，复用监听所有图片，避免每个元素新建一个 observer；
- 通过
rootMargin: "200px"提前触发，提升滚动体验； - 加载成功后调用
unobserve(el)，防止重复执行；失败时绑定error事件回退到备用图。
用 WebP 和 AVIF 替代传统格式
格式升级直接减小体积，是懒加载之外最关键的体积优化手段：
立即学习“Java免费学习笔记（深入）”；
- 首屏大图、LCP 图像优先用 AVIF：同等质量下比 JPEG 小 50%+，支持更高压缩率与色深；
- 通用图、图标、兼容性要求高的场景用 WebP：浏览器支持更广，编码速度快，体积仍比 JPEG/PNG 小 25–35%；
- 用
<picture>+<source>实现渐进式降级：image/avif → image/webp → image/jpeg； - 服务端配合 CDN 内容协商（根据
Accept请求头返回对应格式），并设置强缓存：Cache-Control: public, max-age=31536000, immutable。
配套细节不能漏
再好的策略，少了这些细节就容易打折扣：
- 禁用懒加载的首屏图，加上
fetchpriority="high"和decoding="async"，提示浏览器优先处理； - 响应式图片务必同步设置
srcset和sizes，否则懒加载后可能因尺寸误判加载低清图； - SPA 中动态插入的新图片（如路由切换、列表刷新），需在组件挂载后重新调用
observer.observe()； - 不要懒加载轮播首帧、商品主图、Banner 主视觉等语义关键图——它们是 LCP 候选，必须第一时间加载。
