新站提交
热搜: 目录平台

越来越多的H5应用,日常中我们除了对前端本身技术上进行优化之外,我们可以借助Native来进行一些前端上的优化,今天我们来探讨一下:

存储

说到存储,我想前端一般都会想到Cookie、localStorage、以及会话级别的存储 - sessionStore等这些技术,当然在移动盛行的情况下某些内核不支持LS;

大部分的数据存储在支持LS的内核下面也可以玩转,但是不排除那些数据量较大的情况。毕竟LS 是有一定的大小限制的(Android-2M 、iOS-5M)

还有,在手机上特别是Android中,可以通过后台清除数据来销毁这些存储的LS数据,这样导致了我们在实际应用中会遇到瓶颈。那么在这种情况下我们就要去寻求Native 存储了;

Native 存储

  • Native 存储大小可以由容器自己设置;存放目录是私有的、且存储数据的时间可以是持久化的;
  • 存储的本质是把数据写入文件中;且清除、销毁逻辑由容器自己控制;
  • 存储与读取是异步操作,同时支持json string 操作;

在Android中一般都使用的sharedperference进行存储,iOS中一般都使用NSUserDefaults 进行存储,同时,如果基于ReactNative的话,可以使用AsyncStoreage 进行存储,存储的原理基本一致,都是将数据写入文件中;关于RN,在后续的文章中介绍;

如果我们在Native中扩展了这些功能,那么数据缓存将无后顾之忧;

多view 数据共享

在数据持久化存储的时候,我们还需要考虑数据的安全性,并不是所有的get都可以取数据,所以在存储数据的时候要做权限控制,这层在Native中做了区分,我们在存储数据的时候根据域名去区分;

数据存储完成之后,当我一个应用打开多个view 的情况下数据共享与互通是一个必然问题,通过Native数据存储以及域名的控制,在多个view之间读写数据将不再是问题;

webview启动与网页加载并行

我们先来看一下传统的H5应用加载的流程

简单的点击一个H5 应用,开启webView加载,webView加载完成之后开始加载域名url,然后请求服务器返回html;

其实我们在创建webView的时候可以并行的去load 应用的url地址,让启动webView 和HTML请求并行进行,这样我们可以实现一个效果:启动一个应用到加载完成需要T1 + T2,现在为T1,T2最大值;

据了解,目前钉钉中已经最大化的把webView的创建与loadUrl同步进行了;

HTTP/HTTPS请求与Socket 通道的转换

目前我们在移动端上的项目都还是基于HTTP的一些前后交互,遇到网络很弱的情况下加载部分数据或者页面会始终看到一朵大菊花在不停的转,或者上方的进度条始终走不到头~~

原因就是在弱网络情况下,一个http请求的创建、send Data、response等开销太大,占用网络通信时间很大的比重,如果用长连接的形式传送前后交互数据,那必然可以大大的提升性能,体验也可以得到提升~

关于长连接:大家首先可能会想到webSocket,先看一下浏览器的支持情况

在ios 上支持的话要到9.2 之后了,Android从4.4才开始支持;

webSocket 是HTTP协议的一种补充协议,他补充了HTTP这种非持久、无状态的缺点,但是他还是使用了HTTP协议的握手,只是释放时间的延长来达到keep-alive的目的;

他还是会开销一次http链接,当然在不计较这种损失的情况下,对于项目webSocket可以提升很大的性能了;当然他也会有一些问题:比如服务端需要升级,长时间没回应之后会进入一种半死不活的状态等一些网络缺陷;

那么我们借助Native 是否可以有更好的提升方案?

Socket 通道,socket 是应用层与TCP/IP 传输层之间的一层抽象层,简单点说就是就是一组接口,把TCP/IP包装成可以更方便更简洁的接口;

利用Native 中的通道,通过socket的方式建立TCP连接,在Hybrid 开发中可以利用这点,独立开发出一个单独的js api,把应用中所有的http 请求都统一转换成Native 通道的请求,这样在弱网络,以及正常网络下都会带来飞一般的提升;

例如: 钉钉中的lwp协议,就利用了Native的专属的长连接通道,弱网情况下要快30%以上;

备注:

长按二维码,关注猿猿相抱

标签: 域名