首页最理想方案

一、首页目前存在的问题：

1、isLike接口每页需要请求多次，改页面维度后，每页请求一次

2、组件多次请求引起多次抖动，改页面维度后，抖动一次

3、懒加载dom与懒加载数据无法分离，改页面维度后，可以从页面维度控制浏览器空闲时预加载，提升分数

4、组件包含接口、数据缓存等逻辑难以维护，改页面维度后，每页统一处理复杂逻辑，组件转为UI组件

5、切换用户需要清除缓存，解决遗留bug

6、组件信息、sku、商品信息来回请求，增加骨架屏存在时间，可一次请求到前端

7、第一屏有动态组件，体验不好，动态组件可否限制在第一屏以外

二、根据我们业务场景，首页内容不多+有动态布局商品。方案采用：服务端ISR一次获取静态数据+客户端一次性获取动态数据+懒加载渲染dom+懒加载图片。页面维度代替组件维度，组件只作为UI展示。后续拓展，当屏幕内容更长时添加客户端懒加载。

1、首页只有两个接口(不包括头尾)，至关重要，1个返回首页静态数据+1个返回动态商品数据，数据精简

2、后台首页publish时生成静态数据，做好缓存，存入redis或缓存文件，加快FCP

3、动态数据根据前端cookie得到动态商品数据，能否加入redis缓存，加快FCP

4、考虑fallback情况，比如各模块接口错误、为空、默认等情况

三、前端组件作为UI展示组件设计，数据由页面接口控制，当有数据属性组件里不再请求数据

四、上传图片时，可用java库分析图片得到的主颜色，增加字段存储，前端可用主颜色块代替骨架屏图片

五、首页完成后，其他页面根据场景，可采用同样方案，请优先级提高

六、前端增加pwa方案，首页添加图标到桌面、优化缓存控制、离线浏览等

国外支持pwa方案案例：https://twitter.com/ Walmart.com | Save Money. Live Better

Google News YouTube Macy’s– Official Site