Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

1. 业务场景 android+webview h5 css背景图性能提升1

2. 根据标准，到目前为止，H5 一共有6种缓存机制，有些是之前已有，有些是 H5 才新加入的。1

2.1. 各种方案的比较，如下图2

3. Attilax的解决之道 file 缓存+http3

3.1. 图片的下载3

3.2. Jsbridge 4android5

3.3. http协议6

4. 参考8

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

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Atitit.h5 web webview性能提升解决方案

关键词：web