导读：
95分App是一种潮流闲置交易平台，主要针对品牌闲置商品交易市场中经常遇到的商品真实性、商品真伪、商品卫生等问题，开创了集商品实物拍摄，查验鉴别，洗护杀菌服务为一体的快速交易流程，并不断探索闲置物品领域的新可能。在这个平台，支持个人跟个人交易，也支持个人跟二手商家交易。95分App技术则是针对内部好的技术文章做一个分享和输出，希望和大家共同学习。
95分商品详情页包含了商品信息，服务保障，发货信息，是商品购买的入口，是支付转化率的核心影响因素之一。商品详情的UV占整个App的60% 左右，是整个App UV最高的页面。所以商品详情页的交互体验尤其重要，在这个环节，我们需要思考如何给出最极致的交互体验。
然而，商品详情页经过长期3年需求迭代，业务层面扩展了丰富的功能，在给用户带来丰富的商品信息的同时也隐藏着一系列体验上的问题。比如，商品信息展示越来越慢，页面的加载时长平均值超过500ms，90线超过650ms，从体感上来说页面在转场动画结束后，还会在加载中，主流电商的商品详情都会在转场结束前加载完页面。第二，商品信息加载过程页面闪动和跳动问题，特别是商详首屏加载中楼层的跳动，都影响了页面加载过程的流畅程度。我们通过站在用户角度进行反思，分析页面加载过程，思考商品详情页面优化的逻辑，考虑技术，交互，视觉各方面的因素，最终给出优化方案。
95分各端商品详情图如下：
| 95分Android商品详情 | 95分iOS商品详情 | 得物Android RN 95分商详 |
|---|---|---|
一、性能与体验问题分析
1、总论
为了看清楚微观的性能问题，我们先从宏观时序图角度看下整个商详渲染的步骤是怎样的。
根据请求时序图可以看到，整个商详的渲染可以分为创建页面，转场，请求数据，展示数据几个步骤。那这几个步骤哪里是卡点呢，为了更详细看清加载问题和卡点，我们将页面加载时间，切分为多个阶段并统计出各阶段耗时，这样才能做针对性的优化。
我们对一万次的商品详情页打开数据做分析如下：
| 页面创建步骤 | 创建页面 | 数据请求 | 数据解析 | 页面渲染 | 总计 |
|---|---|---|---|---|---|
| 90线耗时（ms） | 124 | 561 | 40 | 110 | 801 |
| 平均耗时（ms） | 121 | 463 | 15 | 74 | 674 |
iOS和Android商详都超了600ms和500ms，意味着用户在看到转场动画结束后还要额外等待70-100ms的时间才能看到完整的商品详情。
页面加载时间可细化为以下几个节点：
页面创建时间+数据请求时间+数据解析时间+页面渲染时间。这个时间从用户点击开始，伴随着转场动画。从这些时间的数据中，我们更详细的分析下具体的技术卡点：
2 、电商几种常见的商详加载体验分析
1）全屏骨架图加载
以某宝为例，全屏骨架图的加载过程如下：
| 图片演示 | 视频演示 |
|---|---|
| 视频因无法上传，此处省略 |
全屏骨架屏会一次性尽量把所有信息一次性展示出来，由于内容过多导致用户注意力可能无法聚焦。但该方案兼容性较强，在任何场景下都可使用保证统一体验。
2）商品基础信息请求后刷新
依然以某宝为例，商品基础信息请求后刷新过程如下：
| 图片演示 | 视频演示 |
|---|---|
| 视频因无法上传，此处省略 |
这种加载方式，在列表页时就已经缓存了较多的基础信息，所以基本可以实现类似无请求直接打开的效果。但进入商详后，由于基础信息少于实际信息，如果处理不够细致，会造成页面跳动不稳定，楼层有切换，闪动感明显等问题，实际体感并不够舒适。
另外，虽然基础商品信息预加载可以提前给出最多的商品信息，但基础信息需要前置页面提供，使用场景受限，基本只能用于前置可以查询到商品信息的场景下。
3）头 图 预加载 问题分析
本来想以某多多的图和视频为例，以下就用文字来描述。
相当于前两种优化方式的折中，既不是等到页面打开后再去加载全部信息，也不是页面打开前尽量预加载全部信息。而是根据用户体验进行分层，优先加载用户最关注的头图信息，让用户注意力自然的从头图开始，等下面信息加载完成后，视线再逐渐向下转移，因为信息是后加载尽量保证一次性去渲染的，也可以基本规避楼层切换等问题。综合来看，此种方案整体体验较优，也是我们选择的方向。
二、优化与改进
1、目标
我们的优化目标是在商详转场动画结束前就能将页面请求完成并渲染，意味着客户端必须将页面请求渲染的总时间压缩在500ms内。
1）我们期望用户在转场结束前，就能将页面渲染完成，从而为用户节约时间，一是感受轻快流畅，保持愉悦购物心态；二是提升单位时间App的使用效率。
2）我们期望让用户感受到的等待更加友好，做到购物体验不会被打断，注意力不被转移。
2、改进方案详情
根据问题分析和优化目标我们把优化的场景主要分成2大类：无缓存优化与有缓存优化。无缓存主要用于外部跳转，或者没有办法做提前预加载的场景。有缓存场景是通过将商品详情接口数据缓存到本地，提高二次访问的速度。
1、无缓存场景
接口预取
目标：在打开商品详情页过程中，提前发起网络请求，更早的获得数据并展示。
端上的数据请求通常都会放在页面创建完成后进行，页面创建的过程大致可分为控制器的创建和视图的创建。从点击开始到转场前这段时间，会经历100-200ms的时间。以Mate 30 Pro为例，如下图所示，从页面点击到页面开始转场有200ms的时间，这段时间就是我们可以用来优化的空间。
| 95 | 5.13秒点击 | 5.4秒页面开始转场 |
|---|---|---|
| Mate 30 Pro |
原理：将请求接口的逻辑提前，网络请求和页面初始化并行。
优化前页面打开流程：
整个流程是一个串行操作 而通过预取 我们可以把这个流程优化为并行操作 如下流程：
优化后接口预取时序图如下：
接口预取上线后在各端上的提升数据：
| 商品详情页 | Android 95分App | iOS95分App | 得物RN |
|---|---|---|---|
| 实际提升 | 70ms | 50ms | 20ms |
减少跳动与闪动
页面跳动
页面在展示过程中，页面元素楼层发生变化，如下所示，价格和标题的高度发生了变化。
| 视频无法上传，省略 |
|---|
页面闪动
第一张图和第二张图在商品标题处理有差别，造成标题闪动。第三张图和第四张图对比看出在分期的展示迟滞，会造成分期信息的闪动。
| 缓存商品基础数据 | 详情接口数据返回 | 详情接口图片首次加载 | 分期接口返回 |
|---|---|---|---|
分析后主要有两点原因：
1当我们使用预加载技术时，利用前置页面的商品信息，提前加载了部分商品基础信息，在得到实际商品数据后会打乱预加载的页面布局造成页面跳动。
2商品详情的首屏数据由由多接口拼接组成，多条接口并发请求，总有快慢之分，这样会造成页面元素在展示过程中的跳动。
优化措施：
1商详首屏接口合并和拆分。将散落在其他接口但在商详首屏展示的基础信息集中在一个接口返回给客户端，保证在商品首屏展示整齐不跳动。
2商品基础信息的预加载仅保留头图，减少不必要的信息，可以提高预加载的通用性，避免跳动问题。
头图预加载+骨架图
综合上述闪动和跳动的问题，在使用列表缓存的技术下，结合用户等待体感，我们采用了头图预加载加骨架图的方案：
通过头图预加载降低等待感，保持注意力不分散，购物体验不被打断；
做到最少的页面跳动，避免出现已经展示出现的楼层又发生变化；
各端效果如下：
| iOS | Andorid | RN |
|---|---|---|
| 暂时无法上传视频内容 | 暂时无法上传视频内容 | 暂时无法上传视频内容 |
2、有缓存场景
通过对线上真实数据的分析，我们发现，24小时内用户打开商品详情的数据，重复2-5次打开商品率达31%。6次以上4%。总计重复打开率35%。根据这个现状我们引入了客户端本地缓存方案运用在商品详情页面上。
原理是，同样的商品在第一次打开时把该商品的所有相关数据保存在本地数据库中，在下一次打开的时候直接展示，同时请求也在进行，用来更新页面和缓存。优化后的效果如下：
| 端 | 优化前 | 优化后 |
|---|---|---|
| iOS | 暂时无法上传视频内容 | 暂时无法上传视频内容 |
| Android | 暂时无法上传视频内容 | 暂时无法上传视频内容 |
客户端本地接口缓存方案流程图如下：
3、服务端接口优化提速
同时，服务端对商品详情接口也做了优化，提升非常明显，从客户端 监控 性能监控数据可到的如下：
| 10000次接口请求时长数据（单位ms） | 平均 | 90线 |
|---|---|---|
| 商品详情接口v1 | 501 | 608 |
| 商品详情接口v2 | 359 | 457 |
ps：客户端监控数据是包含网络链路往返的时间。
三、总结
优化前后商详总体平均打开时间对比，提升幅度在40%左右：
| 商品详情页 | 优化前 | 优化后 |
|---|---|---|
| 95分Andorid App商详 | 547ms | 304ms |
| 95分iOS App商详 | 690ms | 385ms |
| 得物App RN95分商详 | 602ms | 374ms |
体验优化的过程就是站在用户角度，以数据分析为基础，找到痛点，利用技术手段逐个击破，做到从量变到质变的过程。大前端是距离用户最近的一环，技术栈又各不相同，除了上述方案，各端自针对自己的技术栈会有针对性的优化，比如，优化页面元素算高效率，视图预热和复用，数据模型解析提速，网络库线程优化等等。每个技术点单独看带来的性能提升只有20ms甚至不到10ms，但就是这种量变的积累才能爆发出整体体验的提升。大前端页面性能的思考和探索远没有结束，欢迎大家一起交流。
四、未来展望
二手商品和新品最大的不同就是商品详情，因为“千人千品”，同一款的每一件二手商品都可能有不一样的细节是用户需要关注的。除了性能优化外，如何更好地顺滑流畅地连接各个入口到商详页面，如何更好地展示商品信息尤其是瑕疵，如何更好地保证越来越复杂商详页面的多端一致性等等。很多工作也并不是技术层面单独就能解决的。极致体验永无止境，95分大前端一直在路上。
