图片加载优化#

图片加载存在的问题和原因#

问题一：启动页面时加载过多图片#

问题二：部分图片体积过大#

前端解决方案#

解决问题一：按需加载 ｜ 提高并发#

• 判断图片是否在首屏内，进行 defer 加载
• 骨架屏占位，图片出现在可视区域时开始加载图片
• 使用 HTTP/2 协议

解决问题二：单位像素优化#

• 将图片适当压缩，对不同设备进行适配

总结#

• 首屏图片优先加载，等首屏图片加载完全后再去加载非首屏图片。
• 对大部分图片，特别是轮播广告中的图片进行按设备尺寸裁剪，减少图片体积，减少网络开销，加快下载速率。