关于客户端白屏解决方案。

一.现象

客户端中原生或h5的页面,有时会出现白屏现象.如何解决呢？

二.解决方案

针对这种现象，着眼于提升页面加载速度和用户体验，更好地服务用户，给用户带来愉悦的体验。因此，从交互层面，技术层面两种手段来解决这种问题。

1.交互层面

  • 默认页面:在原生\h5页面没有加载出来之前，显示1个默认页面。

2.交互与技术层面结合。

  • 分页加载。
  • 分段加载。
  • 按需加载。

3.技术层面

3.1 网络通道支持长连接。

  • http协议1.1开始已经支持。
  • 客户端支持情况
    • iOS 系统网络api也支持。
    • android的第三方的网络框架

3.2 h5缓存。（见4技术层面的h5缓存详述）

3.3 图片优化。

  • 移动端支持的图片格式多种，选择合适图片格式。
  • 根据屏幕尺寸，选择合适图片尺寸。

3.4 公共资源离线。

4.技术层面的h5缓存

4.1 缓存内容：图片，jS等较大资源文件，客户端支持。

  • 停用原因
    • 个别情况下，页面有时数据不能及时更新。
    • 极低概率下，图片会串图，恩民总，张阳总都遇见。

4.2 当前客户端支持情况

iOS端—支持，已停用。
  • 目前UIWebView支持NSURLProtocol拦截. WKWebview不支持NSURLProtocol拦截（私有api支持，上不了架。）如果要缓存，需使用UIWebView；
  • 目前项目 iOS8以上使用WKWebview加载h5，8以下使用UIWebview。WKWebview的性能要比老版UIWebview好很多。如果降级到UIWebview，我们需要确保UIWebview性能总体要大优于WKWebview。
Android端—支持。
h5前端需要做一些优化工作。
  • 减少HTTP请求。
  • 预加载。
  • 按需加载。
  • CSS优化
  • ….