优化 WebView 的加载速度实例

问题

WebView 在 App 中承载着网页加载的功能，所以对于一些内容的展示占据着很重要的地位，在进行加载网页的时候如果直接进行内容的加载，会发现网页加载速度有点让人不是很满意，尤其是一些内容较为丰富的页面，加载速度就变得让人着急了。

优化方案

对UIWebView稍有了解的人都会知道，它的加载机制如下：

web 加载过程

由于在初始化以及展现的过程不是我们所能控制的，优化的地方也就集中在了白屏与 loading 的过程中了。我们知道 webView 在进行 request 的时候是去加载一个 URL 链接，通过链接进行页面的下载，页面加载的同时去加载一些样式表以及 js 相关的脚本，最后渲染界面进而进行网页的展示。

考虑到中间的白屏阶段主要集中在页面的链接、以及一些相关样式的加载中，所以我们可以在这块想办法进行优化。一般一个页面的样式、js 脚本的内容都是固定的。每次去浏览网页内容的时候，实际上是网页的正文内容的变化，这些样式以及 js 脚本不会随之改变，所以鉴于此，就有了一种方案：

可以考虑去把某个页面的相关的 css 样式以及js脚本在加载该页面前缓存到本地，在加载的时候直接去加载缓存，而网页的正文内容进行单独的网络请求进而达到加载速度上的优化

而这个思路的简言之就是通过本地模板缓存机制进行加载速度优化，省去了网络获取这些固定文件的时间。

实现

整个原理的实现流程可以通过下面的过程进行展示

缓存与加载过程

因为加载本地的模板只是将网页的样式以及相关的 js 脚本加载上了，正文内容还需要单独去请求，这里有两种方案去实现网页正文的请求：

方案一：通过原生接口去实现正文的内容的请求，这里需要 js 与本地 native 的相关调用，需要与后台配合完成（推荐方案）方案二：通过js 脚本直接去请求正文内容，不需要 navtive 去请求数据，native 只需要加载页面的 html 既可

因为原生接口请求速度要比 js 脚本去线上那数据要快，所以可以通过 js 与本地代码相互调用的方式去获取网页正文内容。

编码

为了最大化提升网页的加载速度，这里我选择了方案一来进行优化。由于内容的获取放在了 App 中进行，所以为了保证在 js 调用本地内容请求的方法之前，我们需要将js 与本地的交互的对象注入到 js 中，以便加载的时候能够调起本地的内容请求方法。

创建 js 与App 本地交互的对象

#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>

@protocol JSExportDelegate<JSExport>

- (void)requestData;

@end

@interface LCJSExportApi : NSObject<JSExportDelegate>

@property(nonatomic,weak) JSContext *context;

- (void)requestData;

@end

#import "LCJSExportApi.h"

@implementation LCJSExportApi

- (void)requestData{

    NSLog(@"网络请求");

    //保存当前的线程
    NSThread *currentThread = [NSThread currentThread];
    //模拟网络请求
    dispatch_async(dispatch_get_main_queue(), ^{

        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

            NSString *path = [[NSBundle mainBundle] pathForResource:@"response" ofType:@"json"];
            NSData *data = [NSData dataWithContentsOfFile:path];

            NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
            NSDictionary *dataDict = dict[@"data"];
            NSString *title = dataDict[@"title"];
            NSString *content = dataDict[@"content"];

            //由于网络请求是异步请求，在获取到数据之后放在之前的线程中进行数据的回传
            [self performSelector:@selector(transToRespnose:) onThread:currentThread withObject:@[title,content] waitUntilDone:NO];

        });

    });

}

- (void)transToRespnose:(NSArray *)array{
    [self.context[@"returnData"] callWithArguments:array];
};

@end

这里需要说明一下，在创建交互对象的时候我们需要同时去写一个管理 js 与本地对象交互的协议，这个协议继承自 JSExport，对于 js 中需要调用的方法需要在此协议中进行注册，这样才能保证 js方法到本地的映射。

属性context 是用来保存当前 webView 的上下文的，为了方便在网络请求之后回传数据，这里需要通过上下文 context 去调用 js 中的方法进而完成数据的回传

这里模仿了网络的异步请求，因为是异步线程操作，所以在最后获取完数据之后要返回到当前的线程中去执行js 数据的回传操作，否则会造成界面线程的卡死，所以在进行网络请求之前保存当前的线程，然后在当前线程上去回传数据（坑点）

其实 js 的注入分两种，另一种是直接将本地的代码注入到 js 中，如下：

self.jsContext[@"fastConnect.request"] = ^(){
        NSLog(@"网络请求");
    };

这种方式是通过找到 js 中的 fastConnect.request 方法，然后通过 block来响应对应的调用，前提是这些方法的映射是在当前网页已存在 context的基础上。如果当前网页没有 context，那么这些映射是无效的。而网络的请求的注入需要加在 js 的加载之前，否则在加载 js 的时候会因为没有注入方法而导致方法调用失败进而出现问题。所以这里采用了注入对象的方法，在加载之前就已经将相关的代码注入到js 中，从而达到调用本地内容请求的目的。

创建 webView 注入 js 交互对象


@interface LCCacheTempateVC ()

@property (nonatomic,strong) UIWebView *webView;

@property (nonatomic,strong) JSContext *jsContext;

@end

@implementation LCCacheTempateVC

- (void)viewDidLoad {
    [super viewDidLoad];

    [self creatView];
}

- (void)creatView{
    self.view.backgroundColor = [UIColor whiteColor];

    _webView = [UIWebView new];
    _webView.frame = self.view.bounds;
    [self fillJsExportMethod];

    [self.view addSubview:self.webView];

    NSString *path = [[NSBundle mainBundle] pathForResource:@"news" ofType:@"html"];
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];
    [self.webView loadRequest:request];

}

- (void)fillJsExportMethod{

    //获取该UIWebview的javascript上下文
    self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    LCJSExportApi *JsObjct = [LCJSExportApi new];
    JsObjct.context = self.jsContext;

    [self.jsContext setObject:JsObjct forKeyedSubscript:@"fastConnect"];

}

为了避免 jsContext 强引用导致引用问题的发生，注意在管理JS对象中将其属性设置为 weak。

总结

经测试，如果将网页的基本构架（模板）缓存到本地，再去加载复杂网页的时候，有着明显的速度提升，为此，设计一个适用于自己项目的模板的通用模块是提升用户浏览网页体验的绝佳选择，所以，了解一下？