电商前端设计-详情页

本文主要讨论电商工程中一些常见的页面设计模式和方法。

详情页是任何一个系统里面非常重要的一个页面，在电商领域里面尤其重要，这个页面也是访问频率最高的模块之一，其特点是模块非常复杂，以苏宁为例。

相关的模块有至少10个以上的模块，如图。

为了性能考虑，采用静态化的方式。

1. 全部组件化，上面10个模块，至少10大类组件。

2. 动静分离+ssr+varnish缓存。我们需要静态化的信息有两类

1. 信息基本不变，比如商品信息，商家信息等。而一些营销活动比如打折，秒杀这种还是用js获取比较好。
2. 交互少的。如地址选择这种就不合适。

所以需要静态化的模块有：

面包屑，基本信息，推荐商品，sku，商品详情描述，商家。这6大模块。

3. 对于图片，特别是展示图，商品图这种建议还是用lazyload。根据dpr,浏览器类型，选择类型和大小。大图片格式优先选用webp。如果是小图，建议用base64打包。

4.对于剩下的模块采用JS按需载入，前端渲染。优先级

1. 营销信息，地址组件和其他。
2. 对于商品详情一般有多个tab形式存在。有评论，售后保证等模块，见上图。这块采用动态加载。
3. 具体策略可以看这里，推荐用code splite+es6-promise-loader，来保证性能和顺序。

5. JS+CSS上cdn。

通过上面的策略，基本上同时保证了详情页的性能和展示的优先级,剩下的就是根据自己的需求做一些调整。

    

转载于:https://juejin.im/post/5aa78ef26fb9a028cc60e4f4