問題
WebView 在 App 中承載著網頁載入的功能，所以對於一些內容的展示佔據著很重要的地位，在進行載入網頁的時候如果直接進行內容的載入，會發現網頁載入速度有點讓人不是很滿意，尤其是一些內容較為豐富的頁面，載入速度就變得讓人著急了。
優化方案
對UIWebView稍有了解的人都會知道，它的載入機制如下：
由於在初始化以及展現的過程不是我們所能控制的，優化的地方也就集中在了白屏與 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。
總結
經測試，如果將網頁的基本構架（模板）快取到本地，再去載入複雜網頁的時候，有著明顯的速度提升，為此，設計一個適用於自己專案的模板的通用模組是提升使用者瀏覽網頁體驗的絕佳選擇，所以，瞭解一下？