多图预警的性能调优

2017-05-07

前一阵子去日本玩,拍了好多照片,原图贴在了博客上。有人跟我反映,手机微博打开页面就崩溃了。我用 iPhone7 试了下并没有,但别的手机也许撑不住。

我之前考虑,未来的网络带宽以及终端的算力,打开原图完全不是问题,所以压根没想做优化。但就目前来看,放原图还是大大拖慢了加载速度,体验很差。

要么不做,做就做出个样子。于是写了段程序,自动化地做以下事情:

  1. 从照片文件的 EXIF 信息中提取拍摄时间
  2. 得到照片文件的 MD5 值
  3. 将照片重命名为 「拍摄时间_MD5值.jpg」
  4. 上传照片到七牛云
  5. 缩放照片到某个适合博客中展示的宽度,例如 1280 像素
  6. 在保证质量的情况下压缩图片
  7. 根据拍摄时镜头的横竖方向做调整,避免照片横过来
  8. 将处理完毕的瘦身图保存在七牛云
  9. 输出原图和瘦身图的网址,以便粘贴到博客里
  10. 输出的格式可以自定义,我设置的是一段 HTML,展示的是瘦身图,点击瘦身图会在新的标签页打开原图
  11. 指定某个目录,对目录中所有的 jpg 文件执行以上所有步骤。创建一个 finished 目录,把执行完毕的 jpg 文件放进去,这样即使任务中断也不必把之前上传过的再上传一遍

有了这个自动化程序,既能保留原图,也可兼顾加载速度。最爽的是只要指定放照片的目录,然后就什么都不用干了,连往博客里粘贴的 HTML 都给生成好了。上面这一套全部的代码(除了七牛的 API秘钥)都在我博客的开源代码里, 这里可以找到

原图一般几兆,压缩后一百多K,大小是原来的几十分之一。但如果照片贴的太多(确实也见过那种多图预警的游记)比如 100 张,那加起来也有十多兆,网速一般的情况下还是有明显的加载等待。

为了应对多图预警,需要用到懒加载技术。就是先加载前面出现的图片,随着用户向下滚动,后续的图片才按需加载出来。懒加载用 LazyLoad 可完美解决。

需要注意,一旦用了懒加载,MarkDown 语法就不够用了,还需要写 HTML。还好我的自动化程序的步骤 10 可以自定义输出格式,把 <img> 标签的 src 属性改成 data-original 就可以了。

回主页 RSS 订阅
京ICP备14007233-1号