今日早读文章由@kmokidd翻译授权分享
幾年前我有幸以工程师的身份加入 Goolge Photos 团队，并参与了 2015 年发布的第一个版本不计其数的设计师、产品经理、学者还有工程师（包括了各平台、前后端）投入其中，这里列出的只是几个主要职责我所负责的是 Web UI 部分，更精确点来说我负责了照片的网格布局。
我们立下雄心壮志要做出完美的布局方案：支持全屏自适应、保证原图比例、交互便捷（比如用户可以跳转到指定的位置）、既展现海量图片又保证页面嘚高性能和高速加载。
当时市面上还没有任何相册产品能实现以上所有效果。据我所知到目前为止也尚未出现能和 Google Photos 相媲美的产品。特別是在页面布局和图片比例上大部分产品依然将图片裁剪成正方形以保证布局优美。
下面我将会分享我们是如何完成这些挑战以及 Web 版嘚 Goolge Photos 中的一些技术细节。
为什么这个任务如此艰难
有两大和 ‘size’ 相关的难关。
第一个 ‘size’ 挑战来自于庞大的图片量（有些用户上传了超过25萬张图片）大量的元数据存储在服务器中。即便单张图片要传递的信息量（比如图片url、宽高、时间戳…）并不多但由于图片数量非常哆，直接导致页面的加载时间变长
第二个 ‘size’ 问题在图片自身。现代高清屏上一张小照片也至少有 50KB，1000张这样的照片就有 50MB不仅服务器傳输数据会很慢，更糟糕的是一次性渲染这么多内容浏览器容易崩溃。早期的 Google+ Photos 加载张图片时就会变卡加载10000张图片时浏览器标签页就直接崩溃。
下面我将分成四个部分回溯我们是如何解决这两个问题的：
- “独立”的图片 — 迅速定位到图片库中的指定位置
- 自适应布局 — 根據浏览器宽度，尽可能铺满图片且要保留图片的原始比例（不做正方形裁剪）
- 60fps 的流畅滚动 — 巨大数据量面前，也要保证页面交互的流畅
- 及时反馈 — 加载时间最小化。
【第1234期】前端布局基础概述
