UIWebView、WKWebViewの使用の詳細とパフォーマンス分析

一、全体紹介
UIWebViewはiOS 2からあり、WKWebViewはiOS 8からあり、WKWebViewが不器用なUIWebViewに取って代わることは間違いない.簡単なテストでは、UIWebViewがメモリを消費しすぎ、メモリのピークが誇張されていることがわかります.WKWebViewWebページのロード速度も向上していますが、メモリほど向上していません.その他のメリットを以下に示します.

より多くのHTML 5をサポートする機能

公式に発表された60 fpsまでのスクロールリフレッシュ率と内蔵ジェスチャー

Safari同じJavaScriptエンジン

UIWebViewDelegateとUIWebViewを14クラスと3つのプロトコル(公式ドキュメントの説明)

に分割

は別途使用することが多く、ロード進捗属性を増加する:estimatedProgress

二、UIWebView使用説明
1.例:簡単な使用
UIWebViewは非常に使いやすく、3つのステップに分けることができ、最も簡単な使い方でもあり、Webページを表示します.

- (void)simpleExampleTest {
    // 1.  webview，     ，"20"      
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];
    // 2.    
    NSMutableURLRequest *request =[NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]];
    // 3.    
    [webView loadRequest:request];
    // 4.   webView     
    [self.view addSubview:webView];
}

2.いくつかの実用的な関数

ロード関数

- (void)loadRequest:(NSURLRequest *)request;
- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;

UIWebViewはHTMLページをロードするだけでなく、pdf、word、txt、各種画像などの表示もサポートします.以下、macデスクトップ上のpngピクチャ:/Users/cs/desktop/iconをロードします.pngを例に

// 1.  url
NSURL *url = [NSURL fileURLWithPath:@"/Users/cs/Desktop/icon.png"];
// 2.    
NSURLRequest *request=[NSURLRequest requestWithURL:url];
// 3.    
[self.webView loadRequest:request];

Webナビゲーション更新関連関数

//   
- (void)reload;
//     
- (void)stopLoading;
//     
- (void)goBack;
//     
- (void)goForward;
//       
@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack;
//       
@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward;
//       
@property (nonatomic, readonly, getter=isLoading) BOOL loading;

3.エージェントプロトコル使用:UIWebViewDelegate
全部で4つの方法があります

Webページのロードを許可するかどうか、jsが開くurlを取得するかどうか、このurlを切り取ることでjsと対話する

.

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSString *urlString = [[request URL] absoluteString];
    urlString = [urlString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

    NSArray *urlComps = [urlString componentsSeparatedByString:@"://"];
    NSLog(@"urlString=%@---urlComps=%@",urlString,urlComps);
    return YES;
}

Webページのロードを開始

- (void)webViewDidStartLoad:(UIWebView *)webView {
    NSURLRequest *request = webView.request;
    NSLog(@"webViewDidStartLoad-url=%@--%@",[request URL],[request HTTPBody]);
}

Webロード完了

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSURLRequest *request = webView.request;
    NSURL *url = [request URL];
    if ([url.path isEqualToString:@"/normal.html"]) {
        NSLog(@"isEqualToString");
    }
    NSLog(@"webViewDidFinishLoad-url=%@--%@",[request URL],[request HTTPBody]);
    NSLog(@"%@",[self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]);
}

Webロードエラー

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    NSURLRequest *request = webView.request;
    NSLog(@"didFailLoadWithError-url=%@--%@",[request URL],[request HTTPBody]);
}

4.jsとのインタラクション
主に2つの方面があります:jsはOCコードを実行して、ocは書いたjsコードを呼び出します

js実行OCコード:jsはocコードを実行できないが、変相して実行することができ、jsは実行する操作をネットワーク要求にカプセル化し、ocはこの要求をブロックし、urlの中の文字列解析を取得すればよい.ここではエージェントプロトコルの-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebView NavigationType)navigationType関数を用いる.

oc書き上げたjsコードを呼び出す:ここではUIwebviewの1つの方法を用いる.stringByEvaluatingJavaScriptFromString、サンプルコード1つはウェブページの位置付け、1つはウェブページのtitle:

を取得する

//       js  , htmlLocationID      ( js      )，        ，              
NSString *javascriptStr = [NSString stringWithFormat:@"window.location.href = '#%@'",htmlLocationID];
// webview    
[self.webView stringByEvaluatingJavaScriptFromString:javascriptStr];

//      title
NSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]

三.WKWebViewの使用説明
1.簡単に使う
UIWebviewと同様に、インポート(#import)を覚えるには3つのステップしかかかりません.

- (void)simpleExampleTest {
    // 1.  webview，     ，"20"      
    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];
    // 2.    
    NSMutableURLRequest *request =[NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]];
    // 3.    
    [webView loadRequest:request];

    //    webView     
    [self.view addSubview:webView];
}

2.いくつかの実用的な関数

は、UIWebviewに比べてローカルリソースファイルをロードし、WKWebViewも様々なファイルフォーマットをサポートし、loadFileURL関数を追加し、その名の通りローカルファイルをロードします.

///        mac    
- (void)loadLocalFile {
    // 1.  webview，     ，"20"      
    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];
    // 2.  url  userName：     
    NSURL *url = [NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"];
    // 3.    
    [webView loadFileURL:url allowingReadAccessToURL:url];
    //    webView     
    [self.view addSubview:webView];
}

他の3つのロード関数

- (WKNavigation *)loadRequest:(NSURLRequest *)request;
- (WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;
- (WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL;

Webナビゲーション更新関連関数

UIWebviewとほぼ同じで、異なるのは戻り値、WKNavigation(更新済み)、さらに関数reloadFromOriginとgoToBackForwardListItemを追加したことです.
(1)reloadFromOriginは、ネットワークデータに変化があるかどうかを比較し、変化がない場合はキャッシュを使用します.そうでない場合は、新しいリクエストから使用します.(2)goToBackForwardListItem:前より後ろよりも強く、特定の履歴ページにジャンプできます

@property (nonatomic, readonly) BOOL canGoBack;
@property (nonatomic, readonly) BOOL canGoForward;
- (WKNavigation *)goBack;
- (WKNavigation *)goForward;
- (WKNavigation *)reload;
- (WKNavigation *)reloadFromOrigin; //      
- (WKNavigation *)goToBackForwardListItem:(WKBackForwardListItem *)item; //      
- (void)stopLoading;

一般的なプロパティ

allowsBackForwardNavigationGestures:BOOLタイプ、左右のストロークジェスチャーナビゲーションを許可するかどうか、デフォルトでは

は許可されていません

estimatedProgress:ロード進捗、取値範囲0~1

title:ページtitle

.scrollView.scrollEnabled:上下スクロールが許可されているかどうか、デフォルトでは

が許可されています.

backForwardList:WKBackForwardListタイプ、アクセス履歴リスト、前進後退ボタンでアクセス可能、またはgoToBackForwardListItem関数で指定ページ

にジャンプ可能

3.エージェントプロトコルの使用
3つのエージェント契約があります.

WKNavigationDelegateが最も一般的で、UIWebViewDelegate機能と同様に、ロードが許可されているかどうか、ロードの開始、ロードの完了、ロードの失敗があるかどうかを追跡します.以下では、関数について簡単に説明し、呼び出しの前後順序を数値で示します.1-2-3-4-5

3つの関数をロードできますか?

///                (    redirect)，     
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation; 
/// 3           ，  response    ，      。decisionHandler    ，       ，  WKNavigationActionPolicyCancel    ，WKNavigationActionPolicyAllow    
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
/// 1        ，       
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

トレース・ロード・プロシージャ関数:

/// 2       
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
/// 4             
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
/// 5           
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
///          
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

WKScriptMessageHandlerが実現しなければならない関数は、APPがjsと対話し、Webページからメッセージを受信するコールバック方法

を提供することである.

/// message:        .
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

WKUIdelegate UIインタフェース関連、オリジナルコントロールサポート、3種類のプロンプトボックス:入力、確認、警告.まずwebプロンプトボックスをブロックしてから処理します.

///       WebView
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
///    
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;
///    
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
///    
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;

四.UIWebViewとWKWebViewのパフォーマンス分析
iOS 8はWKWebViewと関連する特性を発表し、開発者にどれだけの性能を向上させるかを教え、WKWebViewの性能がどれだけ良いかを実測します.
比較するとWKWebviewはpersistent常駐メモリではあまり使われていないことがわかりました
五.iOS H 5性能監視技術角度分析
パフォーマンスデータの理解
モバイル端末H 5の性能データを分析し、まずどの性能データであるかを説明する.

ホワイトスクリーン時間ホワイトスクリーン時間アンドロイドでもiOSでもWebページをロードする際に存在する問題は、現在解決できません.

ページ消費時間ページ消費時間とは、ページ全体のloadが完了するとレンダリングが完了するまで、このページをロードし始める時間を指す.リンクをロードするいくつかの性能データ、リダイレクト時間、DNS解析時間、TCPリンク時間、request要求時間

response応答時間domノード解析時間、pageレンダリング時間、リソースタイミングデータのキャプチャも必要です.

リソースタイミングデータとは?各ページには多くのリソースが構成されています.js、.png、.css、.scriptなど、これらの各リソースリンクの時間を費やして、どのようなタイプのリソース、完全なリンクなのかを手に入れる必要があります.お客様にとっては、これらが十分ではありません.JSエラー、ページのajaxリクエストも必要です.JSエラーはもちろんスタック情報とエラータイプを取得します.ajaxリクエストは、一般に、3つの時間、応答時間、ajaxダウンロード時間、ajaxコールバック時間を取得する.
以上、モバイル端末H 5の性能データを取得できるように分析したが、これらのデータをどのように取得するかは後述する.データ取得にはjsが必要で、モバイル側がwebViewを通じてウェブページをロードしていることを知っています.jsの中でperformanceというインタフェースを通じてwebView内部apiから上のデータを取得することができ、jsが取得したデータはOCに送信されます.では、JSはどのようにしてこれらのデータを手に入れることができますか.これが最も重要です.OCコードはどのように書いてJSにデータを取得させることができますか.
本稿では、#UIWebView、WKWebViewの使用の詳細と性能点を参考に、著者に感謝する.