前言
由于
H5
具备 开发周期短、灵活性好 的特点,所以现在Android App
大多嵌入了Android Webview
组件进行Hybrid
开发但我知道你一定在烦恼
Android Webview
的性能问题,特别突出的是:加载速度慢 & 消耗流量今天,我将针对
Android Webview
的性能问题,提出一些有效解决方案。
目录
示意图
1. Android WebView 存在什么性能问题?
Android WebView
里H5
页面加载速度慢耗费流量
下面会详细介绍。
1.1 H5 页面加载速度慢
H5 页面加载速度慢的原因
下面会详细介绍:
1.1.1 渲染速度慢
前端H5
页面渲染的速度取决于 两个方面:
Js
解析效率Js
本身的解析过程复杂、解析速度不快 & 前端页面涉及较多JS
代码文件,所以叠加起来会导致Js
解析效率非常低手机硬件设备的性能
由于Android
机型碎片化,这导致手机硬件设备的性能不可控,而大多数的Android手机硬件设备无法达到很好很好的硬件性能
总结:上述两个原因 导致 H5页面的渲染速度慢。
1.1.2 页面资源加载缓慢
H5
页面从服务器获得,并存储在 Android
手机内存里:
H5
页面一般会比较多每加载一个
H5
页面,都会产生较多网络请求:
HTML
主URL
自身的请求;HTML
外部引用的JS、CSS
、字体文件,图片也是一个独立的HTTP
请求
每一个请求都串行的,这么多请求串起来,这导致 H5
页面资源加载缓慢
总结:H5页面加载速度慢的原因:渲染速度慢 & 页面资源加载缓慢 导致。
1.2 耗费流量
每次使用
H5
页面时,用户都需要重新加载Android WebView
的H5
页面每加载一个
H5
页面,都会产生较多网络请求(上面提到)每一个请求都串行的,这么多请求串起来,这导致消耗的流量也会越多
1.3 总结
综上所述,产生
Android WebView
性能问题主要原因是:
示意图
上述问题导致了
Android WebView
的H5
页面体验 与 原生Native
存在较大差距。
2. 解决方案
针对上述Android WebView
的性能问题,我提出了3种解决方案:
前端
H5
的缓存机制(WebView
自带)资源预加载
资源拦截
下面我将详细介绍。
2.1 前端H5
的缓存机制
定义
缓存,即离线存储
这意味着
H5
网页 加载后会存储在缓存区域,在无网络连接时也可访问
WebView
的本质 = 在Android
中嵌入H5
页面,所以,Android WebView
自带的缓存机制其实就是H5
页面的缓存机制
Android WebView
除了新的File System
缓存机制还不支持,其他都支持。
作用
离线浏览:用户可在没有网络连接时进行
H5
页面访问提高页面加载速度 & 减少流量消耗:直接使用已缓存的资源,不需要重新加载
具体应用
此处讲解主要讲解 前端H5
的缓存机制 的缓存机制 & 缓存模式 :
a. 缓存机制:如何将加载过的网页数据保存到本地
b. 缓存模式:加载网页时如何读取之前保存到本地的网页缓存
前者是保存,后者是读取,请注意区别
2.1.1 缓存机制
Android WebView
自带的缓存机制有5种:
浏览器 缓存机制
Application Cache
缓存机制Dom Storage
缓存机制Web SQL Database
缓存机制Indexed Database
缓存机制File System
缓存机制(H5
页面新加入的缓存机制,虽然Android WebView
暂时不支持,但会进行简单介绍)
下面将详细介绍每种缓存机制。
1. 浏览器缓存机制
a. 原理
根据
HTTP
协议头里的Cache-Control
(或Expires
)和Last-Modified
(或Etag
)等字段来控制文件缓存的机制下面详细介绍
Cache-Control
、Expires
、Last-Modified
&Etag
四个字段
Cache-Control
:用于控制文件在本地缓存有效时长
如服务器回包:
Cache-Control:max-age=600
,则表示文件在本地应该缓存,且有效时长是600秒(从发出请求算起)。在接下来600秒内,如果有请求这个资源,浏览器不会发出 HTTP 请求,而是直接使用本地缓存的文件。
Expires
:与Cache-Control
功能相同,即控制缓存的有效时间
Expires
是