[移动开发]WebView优化、Hybrid方案

目的

1. 加快网络请求，提升页面首屏加载速度

WebView 新手指引

• 侧重权限认知
• 侧重api解释

WebView加载简化版时间线

1、start -> 2、webview实例化 -> 3、loadUrl/loadHtml -> 4、js/html解析 -> 5、pageStart -> 6、网络请求 -> 7、前端dom首屏渲染 -> 8、pageFinish -> 9、页面展示

市场中加快速度解决方案

1. webview 缓存池（代表：头条、百度，很多公司都在处理）
   1. 通过池管理webview，减少webview实例化时间（android原生webview冷启300~500ms，热启webview100~200ms）
   2. 提前对webview进行预热，提价加载对应的js前端框架
2. 拦截图片资源，使用初始底图显示，然后异步更新h5图片（代表：头条）
   1. 头条样例：https://www.jianshu.com/p/85e4f982cbdf
   2. 解决的问题：防止图片网络请求，阻塞webview线程加载资源
3. 离线包方式。前端除时效性较高资源其他资源离线打包，减少即时网络请求（代表：结合业务场景若干）
   1. 需要处理动态域名，解决跨域问题
   2. 对前端打包有侵入性
4. webview内核优化（代表：腾讯、百度，成本大不适用于小公司）
   1. 腾讯x5，官网是说可优化速度，但本人未做过调研
   2. 内核层面自定义缓存管理
5. html提前到第1步开始下载，本地和网络做diff，差量更新（代表：腾讯）
   1. 腾讯开源框架：https://github.com/Tencent/VasSonic/blob/master/assets/sonic%E5%8F%91%E5%B1%95%E5%8E%86%E7%A8%8B.md
   2. 缺点：业务侵入性太大。需要后端、前端、native整体改造
6. 扩大webview缓存size
   1. 默认webview cache size 小于4.4 10M，大于4.4 20M ：https://android.googlesource.com/platform/external/webkit/+/jb-mr2-release/Source/WebKit/android/WebCoreSupport/WebCache.cpp
   2. 可使用okhttp代理，但是大数据量可能有性能问题（数据请求串行执行）。原生webview使用的db方式管理缓存，更快速。好处是cache规则不需要自己管理，可快速接入
7. 预加载/预热资源
   1. 提前在闲时进行资源的局部、全部预加载，方式可根据自己的技术方案进行处理
   2. 优势：大幅度提升显示速度
   3. 缺点：
      1. 需要根据机型性能管理内存、磁盘缓存
      2. 需要管理预加载时机，尽量闲时预加载
      3. 对数据的时效性也要把关
8. 网络请求提前。数据提前在步骤1时提前加载，步骤7时直接使用
   1. 优势：可和步骤1~6并发处理
   2. 缺点：和h5业务耦合性比较大，需要处理极端情况

常见大厂技术方案（注意文章发布时间）

• 美团：https://tech.meituan.com/2017/06/09/webviewperf.html
• 腾讯：https://github.com/Tencent/VasSonic/blob/master/assets/sonic%E5%8F%91%E5%B1%95%E5%8E%86%E7%A8%8B.md
• 头条：https://www.jianshu.com/p/85e4f982cbdf
• 百度：https://mp.weixin.qq.com/s/AqQgDB-0dUp2ScLkqxbLZg