一、基础优化与资源控制
1. 图片懒加载配置
- 在开发者工具Console面板输入`document.querySelectorAll('img').forEach(img => img.loading = 'lazy')`强制启用原生懒加载
- 使用扩展商店安装Lazy Loader设置“仅加载视口内图片”（适合长页面滚动场景）
- 通过开发者工具Audits面板检查“未使用的图像资源”并删除冗余文件（如广告占位图）
- 在Console面板输入`window.addEventListener('scroll', () => { document.querySelectorAll('img[data-src]').forEach(img => { img.src = img.dataset.src; img.removeAttribute('data-src'); }); })`实现手动触发延迟加载
2. 格式与压缩优化
- 安装扩展商店的Image Minify自动将JPG/PNG转换为WebP格式（可节省40%体积）
- 使用扩展商店的Squoosh分析图片压缩率，设置“质量优先”模式（平衡画质与体积）
- 通过开发者工具Network面板过滤“img”资源，禁用未开启GPU加速的BMP/GIF文件加载
- 在Console面板输入`fetch('image.jpg').then(res => res.blob()).then(blob => createImageBitmap(blob))`绕过解码直接渲染图片
3. 缓存与预加载策略
- 在Chrome地址栏输入`chrome://settings/privacy`开启“使用PDF文档和网站图片的预加载功能”
- 使用扩展商店安装Cache Control设置“关键图片永久缓存”（如Logo、轮播图）
- 通过开发者工具Application面板清理过期的Service Worker缓存（保留最近7天数据）
- 在Console面板输入`if('caches' in window){caches.open('image-cache').addAll(document.querySelectorAll('img'))}`手动创建图片缓存组