营销活动分页加载

场景描述

  1. 达人店活动页面主要用途是铺货卖商品,小型的促销活动基本上是一个活动页面完成,分会场这种形式很少。

  2. 活动页面由多个模块组成,页面内容异步渲染,服务端提供异步api按单个模块id请求模块中的数据。

  3. 页面滑动到一定位置时,顶部有显示快速导航锚点,锚点和模块是绑定的,一般只有商品模块会显示对应的锚点(具体情况由运营需要在搭建页面时配置),点击锚点页面滚动并定位到该模块位置。

  4. 一个活动页面中商品模块大约有8~9个,每个模块大约有30~40个左右的商品,即一个活动页面大约一共300个商品。

早期达人店活动页面的渲染逻辑

进入页面时,根据模块id立即发出N次请求得到页面中所有模块的内容,再将结果按模块顺序渲染到页面中。

比如:活动页面的模块id为 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],遍历此数组,发出10次异步请求,获取每个模块中的内容渲染到页面中。在模块渲染后计算并记录下各个模块的高度值,用于顶部锚点定位。

渲染逻辑其实比较简单,麻烦一点的是锚点定位和每个模块顺序的排列问题(同类问题)。因为这10个请求全是异步的,请求完成的顺序并不是有规律的,处理方式是:每次请求完成后的回调函数和请求时的index值进行绑定,等于知道了该结果在页面中的顺序。

接口请求相关信息如下:

上图中 排在后面几个耗时1s以上的请求基本都是包含商品的模块,可以看到页面打开时间为1.57s,而所有模块从发起请求到请求完成整个过程大约花费了5.24s。对于用户来说能够感知到1.57s的页面渲染时间,后面的异步加载对用于的浏览影响不大,几乎无感知,所以总体来说用户体验还算OK。

这样的方式看似没什么猫病,在前期确实也没什么猫病。。。

但是:随着业务和用户的快速增长,达人店活动页面的并发量已经接近8K/s,而早期的活动页面并发量可能还未超过1K/s。上面的做法中,等于让每个打开页面的用户并发10个请求,那么100个用户同时打开就等于1000次请求了,这不仅对服务器造成的压力会越来越大,而且每个请求需要等待的时间也会加长,于是有了下面的加载优化。

活动页面加载优化:按需加载(上拉加载、类同分页加载)

预期优化后效果: 进入页面后,初始加载3个左右模块内容,其余部分暂不加载,当用户滑动浏览至页面底部某一位置时,开始加载下一个模块内容(类似分页加载),以此类推直至所有模块内容军被加载完成。当用户点击锚点中任意一项时,页面滚动到对应模块区域。

难点:

  1. 页面初始化时锚点信息不全。因为在之前的渲染方式中,锚点信息是在单个模块的接口信息中返回的,做成按需加载后,初始化只能获取前3个模块信息,并不能够获取全部模块的锚点信息。

  2. 当用户点击锚点中某一项时,若对应的模块内容还未加载,这时页面该如何滚动或加载。(只加载该模块还是加载该模块和其之前所有未加载的模块?)

解决方案:

1. api接口支持:新增获取页面所有锚点和模块的关联信息接口,如下:

index为该模块在页面中所有模块中的Index值,通过index来对锚点和模块绑定,难点1解决:

{ "data": [ { "index": 3, "title": "任意购" }, { "index": 4, "title": "彩妆香氛" }, { "index": 5, "title": "美容护肤" }, { "index": 6, "title": "身体护理" }, { "index": 7, "title": "食品生鲜" }, { "index": 8, "title": "母婴精选" }, { "index": 9, "title": "养生保健" }, { "index": 10, "title": "品质生活" }, { "index": 11, "title": "箱包服饰" } ], }

2.api接口支持:原有的获取单个模块信息的接口支持批量获取模块内容,解决难点2

批量请求模块数据,根据activityModuleIds来控制请求的模块

有了这两个接口支持后,前端的两大难点就几乎解决了。接下来就是前端实现思路:

  1. 进入页面后立即获取页面锚点信息,记录锚点与模块的对应关系。

  2. 首屏默认加载3个模块的信息,剩下的模块上拉再加载。点击锚点后先找出锚点和模块A的对应关系,然后从当前模块开始到模块A结束,一次性将这些模块的内容请求过来,渲染页面。

优化后接口请求信息:

我们可以看到优化后,进入页面会发出两个异步请求,比之前少了(N-2)个请求,节省了很大比例的资源请求。 另一方面,这两个请求完成的整个过程大约花费了1.27s,相比之前减少了4倍的时间,优化效果明显。

上拉加载效果:

点击未加载的模块的锚点时效果:

米奇

继续阅读此作者的更多文章