Android H5app 性能优化

如何写一个好的H5项目.

当前H5项目主要是基于webview 加载一段 url 进行的，但是这种方式每次打开都会去网站重新拉取一遍数据，以及html css 以及js，十分的耗时，而且用户体验上非常的糟糕。所以今天我写这篇博客的目的就是如果去写一个稍微流弊点的H5。

android 在H5应用中最好扮演什么样的角色，结合我们的应用，我们采取的是类似PHP的做法，我们来给前端提供页面数据，然后通过注入JS的方式将获取到的数据

首先来介绍下我们项目的H5开发模式。最基本的和前端和native交互的方式我们采取类似这个的样式

js://_?method=ajax&args=%7b%26quot%3bmethod%26quot%3b%3a%26quot%3bPOST%26quot%3b%2c%26quot%3bdata%26quot%3b%3a%26quot%3b%7b%7d%26quot%3b%2c%26quot%3burl%26quot%3b%3a%26quot%3bxxxxxxxxxxxxxx%26quot%3b%2c%26quot%3bcache%26quot%3b%3a%26quot%3b2%26quot%3b%2c%26quot%3bcallbackId%26quot%3b%3a4%7d&callbackId=4

首先一段url在传输数据的时候必须要做urlencode。然后，从上面的结构可以看出来，首先我们可以判断url的scheme，当scheme符合我们的特定规则的时候我们进入我们的前端和native交互的过程中，然后我们可以通过鉴别url参数中的method，通过反射或者工厂模式，我们可以对应到我们写好的native方法中，执行相应的native操作。同时在调用native方法的同时会传入args中的一些参数，args后面会跟着一串json的参数，带上这个native方法所需要的一些固定的参数，由于是一段url所以我们要对json内容进行urlencode处理，保证其不乱码。最后会有一个callbackId的参数，这个参数是当某一些特殊情况下，当native完成某个操作之后需要回调注入js的时候，告诉前端是那个方法被调用到的。

简单的数据通信格式已经介绍完了，然后我们可以通过这些来做什么呢。举个例子，前端开启了一个支付宝和微信的支付通道，但是通过前端是没有办法直接拉起native的支付界面的。 这个时候我们就可以通过这个交互方式让前端和后台生成好相应的数据然后由我们native来帮助他们拉起一个支付。同样的，比方说二维码扫描等等也可以通过同样的方式调用，还有就是通过拉起native的dialog以及等等来优化用户体验等等，以及通过js方法来开启一个新的界面，从而避免一些同层跳转返回等等的问题出现，这里就不多介绍这些了，反正还是有很多事情可以做的。

当然我们还可以做更多的事情，举个例子前端如何节省ajax请求流量，同时对ajax请求做一些优化处理呢，比如内存缓存以及本地持久化，这样就能保证断网的时候不显示空白。这个时候就可以由native来代替ajax来做这些操作，前端通过js交互的方式在args里面带上url以及请求参数，然后所有的http请求就可以由native来接管了，通过volley等第三方请求框架可以很简单的完成本地持久化以及内存缓存等操作，同时也可以接入okhttp加快请求速度。最后我们获取到数据之后可以由js回调的方式完成注入，从而通知前端获取数据状况。

同样的道理图片缓存等等也同样可以由native来接管。这样就能很有效的提高整体webapp的性能了。

讲到这里我们还是可以继续对我们的H5应用进行相应的优化的，首先我们的HTML+CSS+JS这些界面都是可以通过download的方式下载到本地SD卡，然后通过加载本地的html这样就可以为我们的app节省下来很大一部分流量了。当然这个地方就要涉及到一个服务器配置zip ，之后更新下载的东西了，这个我在这里就不过多的阐述了。

我相信通过上述这些方式，我们的webapp的性能起码能提升一倍左右，基本上都已经可以模拟native app了。当然相对来说用户体验上以及机型适配上还是有很多的问题的需要各位去解决的。

马上要离开这家单位了，估计以后接触H5app的机会也少了，就把这一年的工作经验和各位分享一下。

                                                                                             12/24/2015 2:05:25 PM