结识hybrid体验这一年 (2)

一开始 Native 认为缓存问题很难处理,直接就在配置中没有使用缓存,每次页面加载都会直接重新从线上加载资源(LOAD_CACHE_ONLY),我的每一个状态页面切换也都会耗费资源流量,首页加了一个视频啊,1G的流量卡如何是好?网络不好的情况下如何是好?
搜索发现 android 在 webview 中可以有几种形式设置缓存

// 缓存模式如下: // LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据 // LOAD_DEFAULT: (默认)根据cache-control决定是否从网络上取数据。 // LOAD_NO_CACHE: 不使用缓存,只从网络获取数据. // LOAD_CACHE_ELSE_NETWORK: 只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。

通过 nginx 配置 http 的缓存协议头,可以使用 LOAD_DEFAULT ,通过缓存协议来控制。页面的发布每一次都会根据内容以 hash 的名字命名编译文件,每次发布都能保证修改后的文件会重新从走线上资源拉取。

meta标签,浏览器在请求文档资源时会在请求头上携带 content 信息,可以处理缓存问题,但是对于非浏览器缓存的情况下这种形式就失效了

meta 标签是走的 http 协议头来传递,直接设置 http 协议头不是也可以解决问题吗

强缓存

Expires HTTP/1.0 指缓存过期的时间,超过了这个时间点就代表资源过期

Cache-Control HTTP/1.1 指定一个时间长度,在这个时间段内缓存是有效的,单位是s

协商缓存

Last-modified/If-Modified-Since

Etag/If-None-Match
详细学习可以参考资料HTTP 缓存机制一二三

本地资源缓存,可能我们有时需要更新 app 资源包的形式来更新一些资源,是直接使用 file:// 的形式来读取资源好一些呢?还是直接走 的形式好一些呢?很明显是后者,如果缓存有,强缓存直接用本地。协商缓存或者缓存没有 native 有直接拦截请求做响应,如果没有,直接走线上请求。
编译项目以后,项目静态资源可以按需打包到 app 中随 app 的更新升级做升级。

图片资源渲染问题

零售屏的二维码信息时动态更新的,有一个很诡异的bug是二维码偶尔会出现缓存的问题。浏览器渲染机制以及vue内部运行机制,没有深入没有发言权,后续如何提升这也是一些方向。
为了解决图片的缓存的问题,请求的时候我们都会在图片的地址上带上时间戳。诡异的问题描述如下(以下数据都是通过日志记录所得):

1. 生成:11:20:34 130281 2. 生成:11:20:50 399538 3. 生成:11:35:09 123391 4. 使用:11:35:15 123391 5. 生成:11:35:30 117602 6. 使用:11:35:37 399538 7. 使用:11:35:44 399538 8. 使用:11:38:29 399538 9. 使用:11:38:42 399538

11:20:50生成一个二维码,11:35:09生成一个二维码并正常使用,说明渲染争取,11:35:30服务日志记录最新生成的码上的信息和用户上传上来的信息不一致,如果说请求还没响应,图片应该是上一次的正常使用时的情况,不会出现上上次的二维码。代码逻辑时按也许需求去续改src。

<img src="" />

能力有限没能找到问题所在,解决方案不能没有啊,刷新时等待图片加载成功后再插入整个图片元素。不是单纯的更新一个属性,而是整个元素。

系统字体大小修改影响网页字体大小

实际零售屏都是一个标准,这个需求是一个相对而言的伪需求,建立在不会有人去修改系统配置的情况下,如果有要么 native 控制,要么页面用相对尺寸,px 会按照设置的字体受影响。

多小程序扫同一个码的需求

零售对应用户,维护对应运营。运营有一些特殊的权限,不想影响到用户,单独需要做一个小程序,用户端和运维端同时去扫描用户端的小程序,运维端是拿不到任何小程序上的数据信息。
小程序也考虑到了兼容用户之前的二维码的情况,于是有了一个自定义二维码的规则,按照自己的业务规则配置链接,然后生成二维码,无论是微信扫一扫,用户或者运维小程序内部扫一扫都可以拿到二维码上的业务信息,同时为了兼容之前的小程序码的扫码需要做一个扫码收口处理。

如何进阶

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyswf.html