又到一年之末，回顾的时候。
年初使用 speedtracker 搭建了微海报性能监控——speedtracker 是基于免费性能评估服务 webpagetest 的工具，会定期跑分，并记录。串起来形成一份时间线报告。好处是配置简单，托管在 Github 上自动运行，无需服务器资源。缺点是数据存储在静态文件中，所以时间段只能选择过去一天、一周、一月、或者一年，而不能选择指定起止时间。也无法纪录超出一年的数据，所以现在正是分析过去一年数据的好时点～
先来看页面加载时长曲线：
可以看出，左右两端有两个比较明显的突起，时间点在黑色气泡展示，把整条曲线分为三个部分，凸起部分是前端性能瓶颈期， 两个凸起部分右边的向下断崖，对应实施优化的时间点。
第一次优化大约在三月份，当时采取的措施是采用cdn厂商提供的图片缩放功能，在列表页加载缩略图。
第二次优化在十一月23，这次界面彻底改版，将原本一次加载所有数据的方式，改为一次加载所选分类海报，同时支持分页。
上图中，右边是改版后的UI，可以看到顶部新增了搜索功能，下面是原先在底部的分类按钮，支持无限分类，左右划动可以查看更多，海报列表支持“热门”和“最新”两种排序，并且支持分页。
项目初期由于海报数量有限，图片懒加载足以应对，而一次拉取所有数据，前端可以更灵活的满足交互需求。但是随着时间推移，微海报承载的活动量逐步上升，十月份后投放量激增，导致性能瓶颈凸显，内容运营上原有分类数量无法拓展的问题，也限制了业务同事发挥。于是有了十一月份的改版优化需求。
改版面临的主要难点是：支持分页后，已经加载分页列表数据的缓存，以及定位到指定某站海报的支持——尤其是指定海报在很靠后的某个分页的情况。具体细节先不在这里展开。继续看图：
从页面内容请求数量曲线中看出，图片请求数在增加，反映出投放海报的增加、业务的增长。三月份的缩略图优化仅缩小了每张图的尺寸，对请求数量无影响，而十一月份对分页优化，效果则十分明显。
从页面内容下载文件尺寸曲线，则可以看到，两次优化对此指标都有较大影响。三月的缩略图优化，只是延迟了瓶颈期，随着海报投放量增加，还是会达到天花板；而十一月份分页优化，则理论上彻底打破了数量的天花板，很大程度扩展了微海报的内容承载能力。
经过前面分析，跑分曲线也就不难理解了，下载量和请求数降低和评分提升正相关，Lighthouse PWA 得分有一段突起，具体原因仍待分析。
