摘要

文章阐述了心遇 APP 站内 H5 玩法体验优化的工作，涉及离线包功能、数据状态管理、图片加载优化、过渡动画效果和榜单优化等内容，这些措施提升了 H5 玩法的用户体验，未来还打算沉淀部分方案以降低开发成本。

一、离线资源相关优化

在 H5 开发中，虽然有多种性能提升手段，但难以沉淀为框架形式，且容易出现反向优化。心遇 APP 站内玩法 H5 有其自身特点，如玩法逻辑系统、场景复杂、体验多样，并且由于用户量级和终端性能网络属性，对 H5 的性能和交互体验有要求。
离线包拆包
- 玩法类 H5 静态资源多，离线包可能因版本限制让用户承担全量包流量，所以进行拆包。拆包按功能模块划分，像首屏优先加载，次屏延后加载。技术实现上类似 Webpack 的 code split。具体技术包括功能模块划分、Webpack optimization 自定义分包等，且离线包发布平台和客户端都有相应的操作能力。
Native 开屏界面
- 有了离线包功能，前端资源仍有延迟可能，所以客户端 Webview 容器添加开屏界面。开屏界面支持简单 UI 配置，可由前端控制销毁，体验优于前端直接白屏或 Loading，并且和离线包功能绑定有配置能力，还给出了相关配置示例。
离线包拆包加载流程
- 基于子包拆包，客户端同学设计了加载流程，添加了子包加载逻辑、调整主包加载逻辑，还增加了 Native 开屏逻辑。

玩法类 H5 业务场景多，数据状态同步多且存在多种数据读写情况。
必要的数据状态管理
- 为提高开发效率和持久化数据等，使用 zustand 进行全局数据状态管理。在玩法类 Web 应用中，功能模块众多，通过数据层封装、业务逻辑层引用调用、UI 层直接取数渲染，使业务逻辑表达有层次性，提高模块编写效率，文中给出了相关代码示例。
数据预加载
- 为减轻异步数据加载对视图展示的影响，采用在次级模块前一级模块非阻塞逻辑里预加载数据的方式。在次级模块加载时重新请求数据兜底，减少 Loading UI，加快展示和数据同步。非阻塞逻辑类似组件生命周期方法，还可结合 React - Router V6 等方案规范预请求，也给出了相关代码示例。

图片加载优化对应用体验相关数据有明显提升，分为静态和动态图片进行优化。
静态图片
- 采用 web worker 技术提前加载核心次级模块的大图，利用其非阻塞性和浏览器缓存能力，提前缓存到浏览器内存。由于图片模块引用路径一致且离线缓存本地，提前或实时渲染不会消耗流量，且有实时渲染保底，文中有相关代码示例。
动态图片
- 对于接口返回的动态图片（UGC 和 PGC 图片），从生产、转换、消费流程优化。PGC 图片在后台配置时限制宽高、大小和格式，部分图片工程内本地化并创建映射提升加载速度；UGC 图片使用 CDN 裁剪并收敛参数，代码层面减少 CSS background - image 使用，多用 img 标签提高加载优先级，同时给出了本地图片映射相关的代码示例。

玩法 H5 开发在交互体验上接近小游戏，在不同场景下需做视觉效果和交互反馈。
对于 React 应用中数据状态变更引起的视图闪烁，小元素状态变更可结合动画库做动画效果；数据项展示可书写 CSS 动画；文字变化可结合切换状态和动画表达过渡效果。对于 UI 变动大的情况，可参考行业做法添加过场动画。普通交互也应设计标准交互。

直播社交类应用榜单功能随业务扩展逻辑变复杂，榜单实现方式从简单的多层 Tab 组合和数据列表，在切换 Tab 时重新渲染 300 条数据会造成 UI 闪烁。
将榜单的 List 改成 KeepAliveList，维护 3 个 List 节点，切换 Tab 时缓存节点移动而非重建，消除闪烁。为避免首次加载闪烁，游戏进入场景时提前请求前 10 条数据，后续采用上拉加载。多榜单处理中，为避免滚动问题，不使用全局滚动而采用局部滚动。