图片懒加载和现代格式（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></iframe> 同样有效，但 CSS 背景图需结合 JS 动态设置 background-image 才能真正延迟；
• 搭配 width 和 height（或 CSS aspect-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 替代传统格式

格式升级直接减小体积，是懒加载之外最关键的体积优化手段：

• 首屏大图、LCP 图像优先用 AVIF：同等质量下比 JPEG 小 50%+，支持更高压缩率与色深；
• 通用图、图标、兼容性要求高的场景用 WebP：浏览器支持更广，编码速度快，体积仍比 JPEG/PNG 小 25–35%；
• 用 <picture></picture> + <source></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 候选，必须第一时间加载。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南