产品详情
产品详情页一般包括几大模块，轮播图、标题、产品规格、购买数量、产品推荐、详情图、详细配置等等，这个页面一般请求接口数量较多，因为数据可能来自不同的地方，例如：系统自身维护数据，第三方提供的数据，所以接口请求会很慢，有可能达到 10s 时间，会阻止页面的渲染。所以有一些优化方案让用户体验不用长时间等待。
解决方案：
骨架图
添加 loading 效果，文字和图片展示骨架图，数据返回以后再替换为真实的数据。
分部请求展示
先请求速度较快的接口展示首屏的头图，标题一些简单的信息，再请求耗时较长的接口更新页面。可能会出现页面抖动，楼层切换等问题，主要原因有下面两个
- 实际返回数据以后可能一些元素的展示逻辑和位置会有变化。
- 多个接口并发请求，快慢之分，请求快的接口渲染页面，请求慢的接口再次渲染页面，就会造成页面闪烁。
解决方案：
多个接口进行合并，这个可以由后端同学或者前端通过 Node BFF 来实现。先展示的页面模块尽可能简洁不影响其他元素的位置。
预加载
在跳转到产品详情页面之前，可以鼠标指向跳转链接的的时候请求部分接口， 然后再跳转页面。有时产品详情页面不是由同项目的其他页面跳转过来，例如：第三方平台，公众号等其他系统跳转，这种情况就不能使用了。
接口缓存
前端通过本地存储和 Node BFF 层来做后端的接口缓存
- 通过强缓存和协商缓存对接口进行缓存处理
- 前端发起请求的时候判断之前是否请求过
- 后端接口数据存储在 localStorage
- Node BFF 在接口数据存储的内存或者数据库
购物车
购物车页面和产品详情页面有几个方面需要注意，购物车这块一般会有这样的需求，价格随着数量的增减实时计算，如果接口返回时间较长，用户就会觉得卡顿。
- 购物车数量进行增减的时候进行 debounce 处理，然后请求接口
- 数量增减不请求接口，点击结算按钮的时候再请求接口
订单
提交订单会调取微信或者支付宝的接口进行付款结算逻辑，这里有一个注意的地方。用户付完款以后跳转回系统的时候，移动端要做一个页面来进行回跳展示。
