Freetao's Blog

微海报2018前端性能回顾

又到一年之末,回顾的时候。

年初使用 speedtracker 搭建了微海报性能监控——speedtracker 是基于免费性能评估服务 webpagetest 的工具,会定期跑分,并记录。串起来形成一份时间线报告。好处是配置简单,托管在 Github 上自动运行,无需服务器资源。缺点是数据存储在静态文件中,所以时间段只能选择过去一天、一周、一月、或者一年,而不能选择指定起止时间。也无法纪录超出一年的数据,所以现在正是分析过去一年数据的好时点~

先来看页面加载时长曲线

页面加载时长

可以看出,左右两端有两个比较明显的突起,时间点在黑色气泡展示,把整条曲线分为三个部分,凸起部分是前端性能瓶颈期, 两个凸起部分右边的向下断崖,对应实施优化的时间点。

第一次优化大约在三月份,当时采取的措施是采用cdn厂商提供的图片缩放功能,在列表页加载缩略图。

第二次优化在十一月23,这次界面彻底改版,将原本一次加载所有数据的方式,改为一次加载所选分类海报,同时支持分页。

微海报UI改版前后对比

上图中,右边是改版后的UI,可以看到顶部新增了搜索功能,下面是原先在底部的分类按钮,支持无限分类,左右划动可以查看更多,海报列表支持“热门”和“最新”两种排序,并且支持分页。

项目初期由于海报数量有限,图片懒加载足以应对,而一次拉取所有数据,前端可以更灵活的满足交互需求。但是随着时间推移,微海报承载的活动量逐步上升,十月份后投放量激增,导致性能瓶颈凸显,内容运营上原有分类数量无法拓展的问题,也限制了业务同事发挥。于是有了十一月份的改版优化需求。

改版面临的主要难点是:支持分页后,已经加载分页列表数据的缓存,以及定位到指定某站海报的支持——尤其是指定海报在很靠后的某个分页的情况。具体细节先不在这里展开。继续看图:

页面内容请求数量曲线

页面内容请求数量曲线中看出,图片请求数在增加,反映出投放海报的增加、业务的增长。三月份的缩略图优化仅缩小了每张图的尺寸,对请求数量无影响,而十一月份对分页优化,效果则十分明显。

页面内容下载文件尺寸曲线

页面内容下载文件尺寸曲线,则可以看到,两次优化对此指标都有较大影响。三月的缩略图优化,只是延迟了瓶颈期,随着海报投放量增加,还是会达到天花板;而十一月份分页优化,则理论上彻底打破了数量的天花板,很大程度扩展了微海报的内容承载能力。

跑分曲线

经过前面分析,跑分曲线也就不难理解了,下载量和请求数降低和评分提升正相关,Lighthouse PWA 得分有一段突起,具体原因仍待分析。

Kainy Guo wechat
微信扫码,或订阅 Feed 解锁更多开发技能。