一、背景
由于是平台部门，团队主要业务是平台基础件SDK 以及工具化服务。在以往的开发中，涉及到UI的业务 ：隐私协议&用户协议弹窗、公告、登录、实名认证、客服等功能都是使用原生开发，在近两年的版本迭代中，为了android、iOS以及web都能共用以及方便调整、快速迭代，这些涉及到UI界面的功能逐渐web化。从打点日志来分析，国内的业务，web化的页面表现还算可以，基本很少出现白屏或是加载失败的问题，android端在一些少数机型上出现了适配问题，也陆续解决；但是从发行全球的业务日志分析，有一定的比例白屏（webview加载web页面失败），虽然加了刷新功能，但是还是有一定的用户受到影响，从数据上看，欧美较好，巴西、越南、泰国、印尼等欠发达地区可能是网络以及移动设备老旧等因素更容易出现问题。
二、优化
1、常规的优化手段
- 静态模板资源放在端侧
- 数据预加载
- 合理使用cache
- 自动刷新机制
这些手段基本上够用。
2、特别手段：SSR
关于SSR的优势就不再列举，可以自行搜索或是参照文章后文链接，此处只分析我们自身业务。
由于我们业务，隐私协议&用户协议弹窗、强更、公告等要么是在启动首屏、要么出现在第二屏，对于某个游戏或是应用来讲，某个版本的隐私协议&用户协议弹窗、强更、公告等内容是一致的，若通过CSR，对于每个设备都要处理一次web的加载到渲染的过程。有时候，SDK里的静态模板资源由于功能迭代较快，可能失效，业务方又来不及更新SDK，势必会出现老的sdk会加载一个全新的web页面。在一些安卓低端设备或是网络差的情况下，出现加载失败的概率又有所增加。这时候SSR的优势就体现了出来。具体可以参照阿里去年双十一SSR优化实践。
3、组合手段
单纯手段并不是绝对的问题解决方式，需要叠加手段：
- html压缩包预加载+数据预加载
- SSR机制
- 若SSR超时或是失败
- 使用端侧静态模板资源 + 数据
- 若端侧静态模板资源过期
- 查看cache，若无cache
- 加载全新web页面
- 若加载失败，自动刷新机制
当然还有一些UI交互优化，提升用户体验。另外，尽可能合理的打点帮助我们分析实践效果，以及后续的再优化。
三、参照
https://segmentfault.com/a/1190000038224642
https://ssr.vuejs.org/zh/
https://segmentfault.com/a/1190000019462324?utm_source=sf-similar-article