UIWebview加载html链接时，页面上里会有图片、css和js，这些内容由于不经常改变，而且加载时又会耗费大量的流量，我们一般会对html中的图片、css和js进行缓存，下一次加载这个html时会从缓存文件中读取这些文件，本文将会通过具体代码对这些缓存的实现方法进行说明：
1.我们先以图片缓存为例
1.1在webview的代理方法- (void)webViewDidFinishLoad:(UIWebView*)webView里执行如下js：
NSString*js =@"var imgArray = document.querySelectorAll(\"img\"); var imgstr = ''; function f(){ for(var i = 0; i < imgArray.length; i++){ imgstr += imgArray[i].src;imgstr += ';';} return imgstr; } f();”;//这是获取html中所有图片链接的js方法
NSString*arrstr = [webViewstringByEvaluatingJavaScriptFromString:js];
NSString*newarrstr = [arrstrsubstringToIndex:arrstr.length-1];
NSArray*sepArray = [NSArrayarrayWithArray:[newarrstrcomponentsSeparatedByString:@";"]] ; //这个数组最终得到的是图片url的数组
1.2把这些图片通过他们的url缓存到本地
[selfdownLoadImageFromURL:sepArray];
- (void)downLoadImageFromURL:(NSArray* )imageUrlArray
{
dispatch_queue_tqueue =dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0ul);
dispatch_group_tgroup =dispatch_group_create();
for(inti =0; i < imageUrlArray.count; i++)
{
NSString*imageUrl = [imageUrlArrayobjectAtIndex:i];
NSString*key = [MD5md5:imageUrl];//把这些链接转换成md5编码，由于编码的唯一性，用来判断这些图片是否已经缓存
//通过key值判断缓存文件是否存在，如果存在就读取缓存，不存在就对文件进行缓存
NSData*data = [FTWCacheobjectForKey:key];//FTWCache
NSURL*imageURL = [NSURLURLWithString:imageUrl];
NSString*index = [NSStringstringWithFormat:@"%d", i];
if(data) {//如果存在就读取缓存
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetImageUrlJavaScript:index
imgUrl:key]];
}else{//不存在就对文件进行缓存
dispatch_group_async(group, queue, ^{
NSData*data = [NSDatadataWithContentsOfURL:imageURL];
if(data !=nil) {
[FTWCachesetObject:dataforKey:key];
dispatch_sync(dispatch_get_main_queue(), ^{
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetImageUrlJavaScript:index
imgUrl:key]];
NSLog(@"image i %d",i);
});
}
});
}
}
dispatch_group_notify(group,dispatch_get_main_queue(), ^{
//这里是所有图片下载完成后执行的操作。
});
}
- (NSString*)createSetImageUrlJavaScript:(NSString*) index imgUrl:(NSString*) url{
NSData*imageData = [FTWCacheobjectForKey:url];
NSString*imageSource = [NSStringstringWithFormat:@"data:image/jpg;base64,%@",[imageDatabase64Encoding]];
NSString*js = [NSStringstringWithFormat:@"var imgArray = document.querySelectorAll(\"img\"); imgArray[%@].src=\"%@\"", index, imageSource];
returnjs;
}
这样我们对html中图片的缓存就已经实现了，由于js和css的缓存方法和图片缓存大致一样，我们这里就只贴出相关代码，不做解释了。
2.js缓存
NSString*js2 =@"var jsArray = document.querySelectorAll(\"script\"); var jsstr = ''; function f(){ for(var i = 0; i < jsArray.length; i++){ jsstr += jsArray[i].src;jsstr += ';';} return jsstr; } f();";
NSString*jsstr = [webViewstringByEvaluatingJavaScriptFromString:js2];
NSString*newjsstr = [jsstrsubstringToIndex:jsstr.length-1];
NSArray*jsArray = [NSArrayarrayWithArray:[newjsstrcomponentsSeparatedByString:@";"]] ;
[selfdownLoadJSarray:jsArray];
-(void)downLoadJSarray:(NSArray*)jsArray{
dispatch_queue_tqueue =dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0ul);
dispatch_group_tgroup =dispatch_group_create();
for(inti =0; i < jsArray.count; i++)
{
NSString*jsUrl = [jsArrayobjectAtIndex:i];
NSString*key = [MD5md5:jsUrl];
NSData*data = [FTWCacheobjectForKey:key];
NSURL*jsURL = [NSURLURLWithString:jsUrl];
NSString*index = [NSStringstringWithFormat:@"%d", i];
if(data) {
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetJS:index
jsUrl:key]];
}else{
dispatch_group_async(group, queue, ^{
NSData*data = [NSDatadataWithContentsOfURL:jsURL];
if(data !=nil) {
[FTWCachesetObject:dataforKey:key];
dispatch_sync(dispatch_get_main_queue(), ^{
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetJS:index
jsUrl:key]];
NSLog(@"js i %d",i);
});
}
});
}
}
dispatch_group_notify(group,dispatch_get_main_queue(), ^{
//这里是所有js下载完成后执行的操作。
});
}
- (NSString*)createSetJS:(NSString*) index jsUrl:(NSString*) jsurl{
NSData*jsData = [FTWCacheobjectForKey:jsurl];
NSString*jsSource = [NSStringstringWithFormat:@"data:text/javascript;base64,%@",[jsDatabase64Encoding]];
NSString*js = [NSStringstringWithFormat:@"var jsArray = document.querySelectorAll(\"script\"); jsArray[%@].src=\"%@\"", index, jsSource];
returnjs;
}
3.css缓存
NSString*css =@"var linkArray = document.querySelectorAll(\"link\"); var linkhref = ''; function l(){ for(var i = 0; i < linkArray.length; i++){ linkhref += linkArray[i].href;linkhref += ';';} return linkhref; } l();";
NSString*cssstr = [webViewstringByEvaluatingJavaScriptFromString:css];
NSString*newcssstr = [cssstrsubstringToIndex:cssstr.length-1];
NSArray*cssArray = [NSArrayarrayWithArray:[newcssstrcomponentsSeparatedByString:@";"]] ;
[selfdownLoadCSSarray:cssArray];
-(void)downLoadCSSarray:(NSArray*)cssArray{
dispatch_queue_tqueue =dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0ul);
dispatch_group_tgroup =dispatch_group_create();
for(inti =0; i < cssArray.count; i++)
{
NSString*cssUrl = [cssArrayobjectAtIndex:i];
NSString*key = [MD5md5:cssUrl];
NSData*data = [FTWCacheobjectForKey:key];
NSURL*cssURL = [NSURLURLWithString:cssUrl];
NSString*index = [NSStringstringWithFormat:@"%d", i];
if(data) {
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetCSS:index
cssUrl:key]];
}else{
dispatch_group_async(group, queue, ^{
NSData*data = [NSDatadataWithContentsOfURL:cssURL];
if(data !=nil) {
[FTWCachesetObject:dataforKey:key];
dispatch_sync(dispatch_get_main_queue(), ^{
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetCSS:index
cssUrl:key]];
NSLog(@"css i %d",i);
});
}
});
}
}
dispatch_group_notify(group,dispatch_get_main_queue(), ^{
//这里是所有css下载完成后执行的操作。
});
}
- (NSString*)createSetCSS:(NSString*) index cssUrl:(NSString*) cssurl{
NSData*cssData = [FTWCacheobjectForKey:cssurl];
NSString*cssSource = [NSStringstringWithFormat:@"data:text/css;base64,%@",[cssDatabase64Encoding]];
NSString*js = [NSStringstringWithFormat:@"var cssArray = document.querySelectorAll(\"link\"); cssArray[%@].src=\"%@\"", index, cssSource];
returnjs;
}
欢迎大家指导交流，qq：1192026016
