Android:浅谈app加载H5

最新推荐文章于 2024-08-06 09:51:20 发布

difficode

最新推荐文章于 2024-08-06 09:51:20 发布

阅读量834

点赞数

分类专栏： AS 文章标签： android

本文链接：https://blog.csdn.net/qq_36740526/article/details/106743459

版权

AS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Android:浅谈app加载H5

在这里插入图片描述

引子

顾名思义，H5也就是HTML5。它的开发效率高，一套代码Android和IOS基本上都可以使用，同时呢只需要在每次更新时在服务端进行升级即可，大大的节约了成本和时间。那么这么方便的开发手段，在Android中表现如何呢？我们一起来探讨一下。

背景介绍

现如今的生活节奏越来越快，电子产品更是首当其冲。随着互联网时代的发展，特别是5g时代的到来，再加上各个品牌手机性能的提升，混合开发更加受到很多互联网公司的青睐，其中最原始，最便捷，最轻量级的采用WebView调用H5页面尤为夺目。但是这一技术并非没有弊端，许多app都嵌入了H5页面，但是WebView的加载速度实在不敢恭维，这也就了导致用户体验不好。

问题分析

在这里插入图片描述

为何WebView会一直遭人诟病呢？

首先我们应该先分析其为何这么慢，弄明白究竟是哪个环节出了问题。

Android是怎么将完整H5页面展示给用户的呢？

在这里插入图片描述

通过上图（精简版）我们可以看出，移动端加载H5需要很多个阶段：

WebView无响应阶段

WebView无响应阶段，可以大致认为是其是否被初始化，而个人认为，这一阶段也过于耗时了
白屏阶段

这一阶段也就是浏览器与服务器间开始建立连接申请html/css/js以及页面渲染相关的资源
加载阶段

加载阶段也就是便加载便渲染的过程

而导致加载速度慢，只要的原因有：

页面资源（html/css/js）的下载耗时
WebView从首次创建到初始化这一过程耗时
js的解析以及对页面的渲染耗时

那我们可以对这些原因进行深入的分析。看看哪些环节是可以优化的。其实我们思考是否可以对页面资源本地化以及对WebView进行缓存，从而解决加载相关资源以及首次创建Webview十分缓慢造成的结果，那么我们就来看看如何解决。

解决方法

在这里插入图片描述

1.实现资源本地化

1.1实现原理

在这里插入图片描述

1.2具体实现

我们要将部分资源文件本地化，首先应当将一些资源文件放在本地的assets目录下。以达到在很大程度上令存放在assets目录下的文件能够让app进行本地访问，而不需要向服务器去发起请求，从而可以提高页面的开启速度。

那应该如何做呢？

我们的思路应该是，将已经放在本地目录assets的文件进行访问地址的拦截，也就是当匹配到我们本地的url时，去使用本地的资源来代替网络资源。

那么我们就需要重写WebViewClient中的shouldInterceptRequest(WebView view, String url)和shouldInterceptRequest(WebView view, WebResourceRequest request)这两个方法。

public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
     if (mDataHelper.hasLocalResource(url)) {
         WebResourceResponse response = mDataHelper.getReplacedWebResourceResponse(getApplicationContext(),
                          url);
          if (response != null) {
              return response;
          }
     }
     return super.shouldInterceptRequest(view, url);
}

public WebResourceResponse shouldInterceptRequest(WebView view,
          WebResourceRequest request) {
	String url = request.getUrl().toString();
    if (mDataHelper.hasLocalResource(url)) {
        WebResourceResponse response =  mDataHelper.getReplacedWebResourceResponse(getApplicationContext(),
                          url);
        if (response != null) {
              return response;
        }
     }
      return super.shouldInterceptRequest(view, request);
}

在这里插入图片描述

通过网络抓包优化前后对比，我们不难看出，这个方法确实有效，它由许多个请求变成了一个。

2.webview缓存

2.1相关介绍

webview缓存相关的有

浏览器缓存机制
web storage存储机制
cache机制
indexedDB

2.2代码实现

WebSettings webSettings = myWebView.getSettings();

webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);

webSettings.setDomStorageEnabled(true);

webSettings.setDatabaseEnabled(true);
final String dbPath = getApplicationContext().getDir("db", Context.MODE_PRIVATE).getPath();
webSettings.setDatabasePath(dbPath);

webSettings.setAppCacheEnabled(true);
final String cachePath = getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
webSettings.setAppCachePath(cachePath);
webSettings.setAppCacheMaxSize(5*1024*1024);

webSettings.setJavaScriptEnabled(true);

3.主流解决方案

3.1cacheWebView

这种解决方案是为了解决缓存文件大小扩容的问题，它是一种自定义的缓存策略。由于webview自带http协议缓存，既不灵活空间又十分有限，而采用这种策略可以解决空间不足的问题

3.2VasSonic

这是由tx出品，是公认的综合素质最高的一整套方案。它主要的技术有

并行加载：将webview初始化和url请求分开
本地缓存：将请求的html页面进行本地缓存
局部刷新
截流动态加载
模拟后台

它是一个轻量级高性能的hybrid框架，提升首屏加载速度，并支持静态，动态直出页面，性能很好，但同时配置复杂，需前后端接入也很麻烦。

3.3预加载WebView

优点：简单的就能提速

缺点：占用内存

4.个人看法

在这里插入图片描述

从上图，我们可以看到三种开发方式：

原生
混合
H5

纯H5的方式使得很多功能都不具备，由于技术限制，H5本身不能直接访问硬件以及离线存储，对网络的要求极高，整体页面操作起来不流畅，很呆板。也无法调用摄像头等手机配件，整体十分的僵硬。
在这里插入图片描述
但同时，他又具备着：可以跨平台，开发周期短，维护成本低，更新方便等等极其有用的优点，如果舍弃了，未免太过可惜。所以个人非常喜爱原生+H5的模式，像是一种二者的后代，继承各自的优点，稍稍将二者更好的兼容在一起。hybrid模式同时具备着可以快速开发，维护成本低的优点，也解决了H5不能离线运行的致命点。而相信随着5g的普及，网络要求高已经不是什么问题。也相信在不久的将来H5可以越来越好。