Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案
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://blog.csdn.net/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
相关文章
- Android webview 调起H5微信支付
- H5+JS+CSS3 综合应用
- 微信urlscheme.generate:h5跳转到小程序(支持微信内h5,浏览器)
- H5新特性总结
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案安装使用常见问题的分析
- EasyNVR摄像机网页无插件直播方案H5前端构建之:如何播放HLS(m3u8)直播流
- EasyNVR H5无插件RTSP直播方案在Windows server 2012上修复无法定位GetNumaNodeProcessorMaskEx的问题
- Atitit.android webview h5运行环境总结
- DL:基于keras和tensorflow 框架保存网络结构/网络拓扑图/网络模型(json、yaml、h5等文件)注意事项及代码实现(保存和加载.h5模型文件案例)之详细攻略
- [h5棋牌项目]-06-单件类
- h5 - 子div 在 父div水平垂直居中