問題
WebView 在 App 中承載著網頁加載的功能，所以對于一些內容的展示占據著很重要的地位，在進行加載網頁的時候如果直接進行內容的加載，會發現網頁加載速度有點讓人不是很滿意，尤其是一些內容較為豐富的頁面，加載速度就變得讓人著急了。
優化方案
對UIWebView稍有了解的人都會知道，它的加載機制如下：
<figcaption></figcaption>
由于在初始化以及展現的過程不是我們所能控制的，優化的地方也就集中在了白屏與 loading 的過程中了。我們知道 webView 在進行 request 的時候是去加載一個 URL 鏈接，通過鏈接進行頁面的下載，頁面加載的同時去加載一些樣式表以及 js 相關的腳本，最后渲染界面進而進行網頁的展示。
考慮到中間的白屏階段主要集中在頁面的鏈接、以及一些相關樣式的加載中，所以我們可以在這塊想辦法進行優化。一般一個頁面的樣式、js 腳本的內容都是固定的。每次去瀏覽網頁內容的時候，實際上是網頁的正文內容的變化，這些樣式以及 js 腳本不會隨之改變，所以鑒于此，就有了一種方案：
可以考慮去把某個頁面的相關的 css 樣式以及js腳本在加載該頁面前緩存到本地，在加載的時候直接去加載緩存，而網頁的正文內容進行單獨的網絡請求進而達到加載速度上的優化
而這個思路的簡言之就是通過本地模板緩存機制進行加載速度優化，省去了網絡獲取這些固定文件的時間。
實現
整個原理的實現流程可以通過下面的過程進行展示
<figcaption></figcaption>
因為加載本地的模板只是將網頁的樣式以及相關的 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。
總結
經測試，如果將網頁的基本構架（模板）緩存到本地，再去加載復雜網頁的時候，有著明顯的速度提升，為此，設計一個適用于自己項目的模板的通用模塊是提升用戶瀏覽網頁體驗的絕佳選擇，所以，了解一下？
