最近的困境
由于公司项目是原生+web的混合开发，而且web所占的比例还比较大，所以对web在移动端上的表现要求比较高。之前一直采用的是直接使用WebView来加载，不做其他优化，所以在弱网环境下经常会出现白屏，出现概率较高，不一定能复现。虽然原生这边能监听WebView的加载情况，但是只能知道加载成功或者失败，出现白屏的情况并不完全是加载失败，很大可能是资源未下载完毕，导致Dom没法渲染所致。所以问题出现在资源的加载上。
寻找解决之道
通过抓包发现问题确实是出现在Web资源的加载上，加载的资源大都在百K以上，而且没有开启cache-control，反复加载的话浪费流量，在弱网环境下容易加载失败。针对这种弱网优化，大概有几种方案：
1、减少资源大小
2、合并资源请求
3、缓存优化
4....
切合业务场景的方案
这里只讨论缓存优化。开启缓存优化，一般要在HTTP的返回头中设置cache-control字段，然后再设置ETag/Last Modified字段。但这里有个问题，由于各个浏览器内核不一样，对缓存支持不一定一样，部分浏览器缓存时间可能比返回预设的时间要长，这就导致为什么有时候明明发布上去了，浏览器上的版本还是旧的，需要清除缓存。
当然，对于这个问题，是有标准解的。
- 文件hash值
- url上加上timestamp参数
对于文件hash值这种方案，就是每次发新版都要重新生成一个带有hash值的文件名。例如：
index.csd123.js
修改后，再重新发版就是
index.dfd44.js
因为文件名变了，WebView再去读取的时候原来的缓存会失效，所以会重新加载。
对于url加上timestamp参数
则是请求的参数变化，导致url变化，所以对于webview来说相当于请求了一个新的不同的资源，所以旧的缓存一样会失效。
这两种方案的原理基本一样，都是url发生变化，触发新资源请求机制，使得缓存失效，实现全量刷新。
总结
对于移动端来说，与web的交互是必不可少的，了解一些web的机制，对于做优化设计是必不可少的。现在移动端越来越要求懂web，大前端的趋势看来是不可阻挡的了。
网友评论