Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案
1. 业务场景 android+webview h5 css背景图性能提升1
2. 根据标准，到目前为止，H5 一共有6种缓存机制，有些是之前已有，有些是 H5 才新加入的。1
1. 业务场景 android+webview h5 css背景图性能提升
图片的缓存大概儿需要500m的规模..
2. 根据标准，到目前为止，H5 一共有6种缓存机制，有些是之前已有，有些是 H5 才新加入的。
1.
浏览器缓存机制
2.
3.
Dom Storgage（Web Storage）存储机制
4.
5.
Web SQL Database 存储机制
6.
7.
Application Cache（AppCache）机制
8.
9.
Indexed Database （IndexedDB）
10.
11.
File System API
12.
2.1. 各种方案的比较，如下图
作者:: ★(attilax)>>> 绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ） 汉字名：艾龙， EMAIL:1466519819@qq.com
转载请注明来源： http://www.cnblogs.com/attilax/
3. Attilax的解决之道 file 缓存+http
按照以上的方式都不适合...最好的还是file api缓存..file api android 默认不支持...使用jsbridge解决..
显示图片,直接使用文件路径,不能显示,,使用file://协议也不能..使用datauri,三,android上慢的要命,业马是base64 encode decode闪的..
子好使用http协议了..走ok兰...
3.1. 图片的下载
package com.attilax.img;
public class imgx4android {
public String save2localHighPerf(String urlx, String localpath,
String urlHostPart) {
String imageFileNoPath = PathUtil4android.getPathNohostNoApproot(
urlx, urlHostPart);
String sdRoot = new PathUtil4android().getInnerSDCardPath(); // /storage/sdcard
localpath = localpath.replace("$sd$", sdRoot);
//
localpath = localpath + "/" + imageFileNoPath;
// saveBitmap(imageFilePath,localpath);
File f = new File(localpath);
if (f.exists()) {
// f.delete();
return localpath;
}else
{
PathUtil4android.createAllPath(localpath);
}
try {
urlx = UrlX.encodeURI(urlx);
URL url = new URL(urlx);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setConnectTimeout(7000);
conn.setRequestMethod("GET");
int responseCode = conn.getResponseCode();
if (responseCode != 200)
throw new RuntimeException(
"cant get img from getBitmapFromUrl:" + urlx
+ " responseCode:" + responseCode);
// if (responseCode == 200) {
InputStream inputStream = conn.getInputStream();
// Bitmap bitmap = BitmapFactory.decodeStream(inputStream);
StreamUtil strx = new StreamUtil();
FileOutputStream out = new FileOutputStream(localpath);
strx.convertStream(inputStream, out);
strx.flushNclose(out);
return localpath;
// }
} catch (Exception e) {
ExUtil.throwEx(e);
}
return localpath;
}
3.2. Jsbridge 4android
@JavascriptInterface
public String invoke4( String method,String p2,String p3,String p4)
{
List<String> li=new ArrayList();
li.add(p2);li.add(p3);li.add(p4);
Object[] oa=li.toArray();
return invoke(method,oa);
}
// sdk17�汾���ϼ���ע�� solu click btn ma fein ..
@JavascriptInterface
public String invoke( String method, Object... p1) {
String classname = refx.getClassName(method);
String meth_name = refx.getMethodName(method);
Object o;
boolean flag = true;
String trace = "$def e";
try {
o = ConstructorUtils.invokeConstructor(Class.forName(classname),
null);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
// throw new RuntimeException(e);
flag = false;
trace = ExUtil.getTrace(e);
return trace;
}
if (flag) {
try {
return (String) MethodUtils.invokeMethod(o, meth_name, p1);
} catch (Exception e) {
Throwable e2=e;
if( e instanceof InvocationTargetException)
{
// TODO Auto-generated catch block
e2=e.getCause();
// throw new RuntimeException(e);
}
e2.printStackTrace();
trace = ExUtil.getTrace(e2);
return trace;
}
}
// Handler handler = new Handler();
// // Callable<V>
// handler.post(new Runnale(){
//
// public void run(){
//
// // 更新UI界面元素代码
//
// }
//
// });
// handler.
return trace;
}
3.3. http协议
public class AtiHttpServer {
public static void main(String[] args) {
HTTPServer srv=new HTTPServer();
srv.open("127.0.0.1", 7788);
srv.addRequestListener(new HTTPRequestListenerImp());
System.out.println("---http start");
srv.start();
System.out.println("---http finish over");
}
public class HTTPRequestListenerImp implements org.cybergarage.http.HTTPRequestListener
{
private void httpRequestRecieveX(HTTPRequest httpReq) {
String f=httpReq.getParameterValue("file");
String filePaths = httpReq.getParameterValue("file");
try
{
File file = new File(filePaths);
// ��ȡ�ļ��Ĵ�С
long contentLen = file.length();
// ��ȡ�ļ�����
String contentType = FileUtil.getFileType(filePaths);
// ��ȡ���ļ���
InputStream contentIn =new FileInputStream(file);
if (contentLen <= 0 || contentType.length() <= 0
|| contentIn == null)
{
httpReq.returnBadRequest();
return;
}
HTTPResponse httpRes = new HTTPResponse();
httpRes.setContentType(contentType);
httpRes.setStatusCode(HTTPStatus.OK);
httpRes.setContentLength(contentLen);
httpRes.setContentInputStream(contentIn);
httpReq.post(httpRes);
contentIn.close();
}
catch (MalformedURLException e)
{
httpReq.returnBadRequest();
return;
}
catch (SmbException e)
{
httpReq.returnBadRequest();
return;
}
catch (IOException e)
{
httpReq.returnBadRequest();
return;
}
}
4. 参考
H5 缓存机制浅析 移动端 Web 加载性能优化 - OPEN 开发经验库.html