UIWebView、WKWebView使用详解及性能分析

谁践踏了优雅 2022-04-15 04:06 379阅读 0赞

# [UIWebView、WKWebView使用详解及性能分析][UIWebView_WKWebView] #

【[原文地址][UIWebView_WKWebView]】

## 一、整体介绍 ##

`UIWebView`自iOS2就有，`WKWebView`从iOS8才有，毫无疑问`WKWebView`将逐步取代笨重的`UIWebView`。通过简单的测试即可发现`UIWebView`占用过多内存，且内存峰值更是夸张。`WKWebView`网页加载速度也有提升，但是并不像内存那样提升那么多。下面列举一些其它的优势：

*  更多的支持HTML5的特性
 *  官方宣称的高达60fps的滚动刷新率以及内置手势
 *  Safari相同的JavaScript引擎
 *  将UIWebViewDelegate与UIWebView拆分成了14类与3个协议([官方文档说明][Link 1])
 *  另外用的比较多的，增加加载进度属性：`estimatedProgress`

## 二、UIWebView使用说明 ##

1 举例：简单的使用

`UIWebView`使用非常简单，可以分为三步，也是最简单的用法，显示网页

![复制代码][copycode.gif]

- (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];
    
        // 最后将webView添加到界面
        [self.view addSubview:webView];
    }

![复制代码][copycode.gif]

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/coohua/Desktop/bigIcon.png`为例

![复制代码][copycode.gif]

// 1.获取url
    NSURL *url = [NSURL fileURLWithPath:@"/Users/coohua/Desktop/bigIcon.png"];
    // 2.创建请求
    NSURLRequest *request=[NSURLRequest requestWithURL:url];
    // 3.加载请求
    [self.webView loadRequest:request];

![复制代码][copycode.gif]

*  网页导航刷新有关函数

![复制代码][copycode.gif]

// 刷新
    - (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;

![复制代码][copycode.gif]

3 代理协议使用：UIWebViewDelegate

一共有四个方法

![复制代码][copycode.gif]

/// 是否允许加载网页，也可获取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;
    }
    /// 开始加载网页
    - (void)webViewDidStartLoad:(UIWebView *)webView {
        NSURLRequest *request = webView.request;
        NSLog(@"webViewDidStartLoad-url=%@--%@",[request URL],[request HTTPBody]);
    }
    /// 网页加载完成
    - (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"]);
    }
    /// 网页加载错误
    - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
        NSURLRequest *request = webView.request;
        NSLog(@"didFailLoadWithError-url=%@--%@",[request URL],[request HTTPBody]);
    
    }

![复制代码][copycode.gif]

4 与js交互

主要有两方面：js执行OC代码、oc调取写好的js代码

*  js执行OC代码：js是不能执行oc代码的，但是可以变相的执行，js可以将要执行的操作封装到网络请求里面，然后oc拦截这个请求，获取url里面的字符串解析即可，这里用到代理协议的`- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType`函数。
 *  oc调取写好的js代码：这里用到UIwebview的一个方法。示例代码一个是网页定位，一个是获取网页title：

![复制代码][copycode.gif]

// 实现自动定位js代码, htmlLocationID为定位的位置(由js开发人员给出)，实现自动定位代码，应该在网页加载完成之后再调用
    NSString *javascriptStr = [NSString stringWithFormat:@"window.location.href = '#%@'",htmlLocationID];
    // webview执行代码
    [self.webView stringByEvaluatingJavaScriptFromString:javascriptStr];
    
    // 获取网页的title
    NSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]

![复制代码][copycode.gif]

## 三、WKWebView使用说明 ##

1 简单使用

与UIWebview一样，仅需三步:记住导入（\#import <WebKit/WebKit.h>）

![复制代码][copycode.gif]

- (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];
    }

![复制代码][copycode.gif]

2 一些实用函数

*  加载网页函数  
    相比UIWebview，WKWebView也支持各种文件格式，并新增了`loadFileURL`函数，顾名思义加载本地文件。

![复制代码][copycode.gif]

/// 模拟器调试加载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];
    }

![复制代码][copycode.gif]

/// 其它三个加载函数
    - (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;

*  网页导航刷新相关函数  
    和UIWebview几乎一样，不同的是有返回值，WKNavigation(已更新)，另外增加了函数`reloadFromOrigin`和`goToBackForwardListItem`。
    
     *  reloadFromOrigin会比较网络数据是否有变化，没有变化则使用缓存，否则从新请求。
     *  goToBackForwardListItem：比向前向后更强大，可以跳转到某个指定历史页面

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

*  一些常用属性
    
     *  allowsBackForwardNavigationGestures：BOOL类型，是否允许左右划手势导航，默认不允许
     *  estimatedProgress：加载进度，取值范围0~1
     *  title：页面title
     *  .scrollView.scrollEnabled：是否允许上下滚动，默认允许
     *  backForwardList：WKBackForwardList类型，访问历史列表，可以通过前进后退按钮访问，或者通过goToBackForwardListItem函数跳到指定页面

3 代理协议使用

一共有三个代理协议：

*  **WKNavigationDelegate**：最常用，和UIWebViewDelegate功能类似，追踪加载过程，有是否允许加载、开始加载、加载完成、加载失败。下面会对函数做简单的说明，并用数字标出调用的先后次序：1-2-3-4-5

三个是否允许加载函数：

![复制代码][copycode.gif]

/// 接收到服务器跳转请求之后调用 (服务器端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;

![复制代码][copycode.gif]

追踪加载过程函数:

![复制代码][copycode.gif]

/// 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;

![复制代码][copycode.gif]

*  **WKScriptMessageHandler**：必须实现的函数，是APP与js交互，提供从网页中收消息的回调方法

/// message: 收到的脚本信息.
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

*  **WKUIDelegate**：UI界面相关，原生控件支持，三种提示框：输入、确认、警告。首先将web提示框拦截然后再做处理。

![复制代码][copycode.gif]

/// 创建一个新的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;

![复制代码][copycode.gif]

## 四、示例代码 ##

*  代码可以实现一般网络显示，加载本地文件(pdf、word、txt、图片等等)
 *  搜索框搜索界面，搜索框输入`file://`则加载本地文件，`http://`则加载网络内容，如果两者都不是则搜索输入的关键字。
 *  下部网络导航，后退、前进、刷新、用Safari打开链接四个按钮

主界面——简述主页

![复制代码][copycode.gif]

/// 控件高度
    #define kSearchBarH  44
    #define kBottomViewH 44
    
    /// 屏幕大小尺寸
    #define kScreenWidth  [UIScreen mainScreen].bounds.size.width
    #define kScreenHeight [UIScreen mainScreen].bounds.size.height
    
    #import "ViewController.h"
    #import <WebKit/WebKit.h>
    
    
    @interface ViewController () <UISearchBarDelegate, WKNavigationDelegate>
    
    @property (nonatomic, strong) UISearchBar *searchBar;
    /// 网页控制导航栏
    @property (weak, nonatomic) UIView *bottomView;
    
    @property (nonatomic, strong) WKWebView *wkWebView;
    
    @property (weak, nonatomic) UIButton *backBtn;
    @property (weak, nonatomic) UIButton *forwardBtn;
    @property (weak, nonatomic) UIButton *reloadBtn;
    @property (weak, nonatomic) UIButton *browserBtn;
    
    @property (weak, nonatomic) NSString *baseURLString;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    //    [self simpleExampleTest];
    
        [self addSubViews];
        [self refreshBottomButtonState];
    
        [self.wkWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]]];
    
    }
    - (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 loadFileURL:[NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"] allowingReadAccessToURL:[NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"]];
        // 最后将webView添加到界面
        [self.view addSubview:webView];
    }
    /// 模拟器加载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];
    }
    - (void)addSubViews {
        [self addBottomViewButtons];
    
        [self.view addSubview:self.searchBar];
    
        [self.view addSubview:self.wkWebView];
    }
    
    - (void)addBottomViewButtons {
        // 记录按钮个数
        int count = 0;
        // 添加按钮
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button setTitle:@"后退" forState:UIControlStateNormal];
        [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
        [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];
        [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
        button.tag = ++count;    // 标记按钮
        [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];
        [self.bottomView addSubview:button];
        self.backBtn = button;
    
        button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button setTitle:@"前进" forState:UIControlStateNormal];
        [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
        [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];
        [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
        button.tag = ++count;
        [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];
        [self.bottomView addSubview:button];
        self.forwardBtn = button;
    
        button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button setTitle:@"重新加载" forState:UIControlStateNormal];
        [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
        [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];
        [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
        button.tag = ++count;
        [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];
        [self.bottomView addSubview:button];
        self.reloadBtn = button;
    
        button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button setTitle:@"Safari" forState:UIControlStateNormal];
        [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
        [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];
        [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
        button.tag = ++count;
        [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];
        [self.bottomView addSubview:button];
        self.browserBtn = button;
        // 统一设置frame
        [self setupBottomViewLayout];
    }
    - (void)setupBottomViewLayout
    {
        int count = 4;
        CGFloat btnW = 80;
        CGFloat btnH = 30;
    
        CGFloat btnY = (self.bottomView.bounds.size.height - btnH) / 2;
        // 按钮间间隙
        CGFloat margin = (self.bottomView.bounds.size.width - btnW * count) / count;
    
        CGFloat btnX = margin * 0.5;
        self.backBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
    
        btnX = self.backBtn.frame.origin.x + btnW + margin;
        self.forwardBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
    
        btnX = self.forwardBtn.frame.origin.x + btnW + margin;
        self.reloadBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
    
        btnX = self.reloadBtn.frame.origin.x + btnW + margin;
        self.browserBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
    }
    /// 刷新按钮是否允许点击
    - (void)refreshBottomButtonState {
        if ([self.wkWebView canGoBack]) {
            self.backBtn.enabled = YES;
        } else {
            self.backBtn.enabled = NO;
        }
    
        if ([self.wkWebView canGoForward]) {
            self.forwardBtn.enabled = YES;
        } else {
            self.forwardBtn.enabled = NO;
        }
    }
    /// 按钮点击事件
    - (void)onBottomButtonsClicled:(UIButton *)sender {
        switch (sender.tag) {
            case 1:
            {
                [self.wkWebView goBack];
                [self refreshBottomButtonState];
            }
                break;
            case 2:
            {
                [self.wkWebView goForward];
                [self refreshBottomButtonState];
            }
                break;
            case 3:
                [self.wkWebView reload];
                break;
            case 4:
                [[UIApplication sharedApplication] openURL:self.wkWebView.URL];
                break;
            default:
                break;
        }
    }
    
    #pragma mark - WKWebView WKNavigationDelegate 相关
    /// 是否允许加载网页 在发送请求之前，决定是否跳转
    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
        NSString *urlString = [[navigationAction.request URL] absoluteString];
    
        urlString = [urlString stringByRemovingPercentEncoding];
        //    NSLog(@"urlString=%@",urlString);
        // 用://截取字符串
        NSArray *urlComps = [urlString componentsSeparatedByString:@"://"];
        if ([urlComps count]) {
            // 获取协议头
            NSString *protocolHead = [urlComps objectAtIndex:0];
            NSLog(@"protocolHead=%@",protocolHead);
        }
        decisionHandler(WKNavigationActionPolicyAllow);
    }
    
    
    #pragma mark - searchBar代理方法
    /// 点击搜索按钮
    - (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
        // 创建url
        NSURL *url = nil;
        NSString *urlStr = searchBar.text;
    
        // 如果file://则为打开bundle本地文件，http则为网站，否则只是一般搜索关键字
        if([urlStr hasPrefix:@"file://"]){
            NSRange range = [urlStr rangeOfString:@"file://"];
            NSString *fileName = [urlStr substringFromIndex:range.length];
            url = [[NSBundle mainBundle] URLForResource:fileName withExtension:nil];
            // 如果是模拟器加载电脑上的文件，则用下面的代码
    //        url = [NSURL fileURLWithPath:fileName];
        }else if(urlStr.length>0){
            if ([urlStr hasPrefix:@"http://"]) {
                url=[NSURL URLWithString:urlStr];
            } else {
                urlStr=[NSString stringWithFormat:@"http://www.baidu.com/s?wd=%@",urlStr];
            }
            urlStr = [urlStr stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]];
            url=[NSURL URLWithString:urlStr];
    
        }
        NSURLRequest *request=[NSURLRequest requestWithURL:url];
    
        // 加载请求页面
        [self.wkWebView loadRequest:request];
    }
    #pragma mark - 懒加载
    - (UIView *)bottomView {
        if (_bottomView == nil) {
            UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, kScreenHeight - kBottomViewH, kScreenWidth, kBottomViewH)];
            view.backgroundColor = [UIColor colorWithRed:230/255.0 green:230/255.0 blue:230/255.0 alpha:1];
            [self.view addSubview:view];
            _bottomView = view;
        }
        return _bottomView;
    }
    - (UISearchBar *)searchBar {
        if (_searchBar == nil) {
            UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 20, kScreenWidth, kSearchBarH)];
            searchBar.delegate = self;
            searchBar.text = @"http://www.cnblogs.com/mddblog/";
            _searchBar = searchBar;
    
        }
        return _searchBar;
    }
    
    - (WKWebView *)wkWebView {
        if (_wkWebView == nil) {
            WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20 + kSearchBarH, kScreenWidth, kScreenHeight - 20 - kSearchBarH - kBottomViewH)];
            webView.navigationDelegate = self;
    //                webView.scrollView.scrollEnabled = NO;
    
            //        webView.backgroundColor = [UIColor colorWithPatternImage:self.image];
            // 允许左右划手势导航，默认允许
            webView.allowsBackForwardNavigationGestures = YES;
            _wkWebView = webView;
        }
    
        return _wkWebView;
    }
    
    
    @end

![复制代码][copycode.gif]

## 五、UIWebView 和 WKWebView的性能分析 ##

iOS 8 推出 WKWebView 以及相关特性，告诉开发者提高多么多么大的性能，实测告诉你WKWebView的性能有多好！

为了验证，我在项目中的分别 使用UIWebView 和 WKWebView 测试，来回加载十多个网页 产生的内存状况如下：

UIWebView

![2][]

WKWebView

![2 1][]

对比发现 WKWebview 这货 在persistent 常驻内存 使用得少多了，想想看，一个app去哪儿省下几十M的内存，再加上用户量分布  
iOS 9 60%  
iOS 8 30%  
iOS 7 6％左右  
所以我建议能换WKWebview 就换吧，省下一大块内存减少不必要的异常bug。

# iOSH5性能监控技术角度分析 #

性能数据了解

分析移动端H5性能数据，首先我们说说是哪些性能数据。

*  **白屏时间**，白屏时间无论安卓还是iOS在加载网页的时候都会存在的问题，也是目前无法解决的；
 *  **页面耗时**，页面耗时指的是开始加载这个网页到整个页面load完成即渲染完成的时间；
 *  **加载链接的一些性能数据**，重定向时间，DNS解析时间，TCP链接时间，request请求时间，response响应时间，dom节点解析时间，page渲染时间，同时我们还需要抓取资源时序数据，

**什么是资源时序数据**呢？每个网页是有很多个资源组成的，有.js、.png、.css、.script等等，我们就需要将这些每个资源链接的耗时拿到，是什么类型的资源，完整链接；对于客户来说有了这些还不够，还需要JS错误，页面的ajax请求。JS错误获取的当然是堆栈信息和错误类型。ajax请求一般是获取三个时间，响应时间，ajax下载时间，ajax回调时间。

上面分析的是能够获取到移动端H5的性能数据，这些数据怎么得到就是接下来要讲的了。数据获取是需要js来做的，都知道移动端是通过webView来加载网页的，js里面能通过performance这个接口来从webView内部api获取上面的那些数据，js获取的数据然后发给OC；那JS怎么样才能拿到这些数据呢，这就是最关键的，OC代码如何写才能让JS获取数据。

### 代码编写 ###

有两种方法可以得到数据,先介绍用NSURLProtocol这个类获取数据。

iOS的UIWebView加载网页的时候会走进NSURLProtocol这个类,所以我们就需要在这个类里面作文章了,我们先用UIWebView加载一个链接，例如百度等等,然后创建一个继承NSURLProtocol的类。

![strip][]

继承NSURLProtocol

NSURLProtocol里面有很多方法，就不一一介绍了，有一个startLoading的方法,我们在这个方法里面用NSURLConnection发送一个请求,设置代理,请求的request就是加载网页的request，因为NSURLProtocol有一个NSURLRequest的属性。

> \- (instancetype)initWithRequest:(NSURLRequest\*)request delegate:(id)delegate startImmediately:(BOOL)startImmediately

这个就是请求的方法。

![strip 1][]

发送请求

> \- (void)connection:(NSURLConnection \*)connection didReceiveData:(NSData \*)data

通过NSURLConnection设置代理,就需要写出代理方法，在其中一个代理方法里面能获得网页的代码，这就是我们最关键的地方，就是上面这个方法，将data用utf-8转码就会得到代码。

![strip 2][]

插入js代码的方法

得到网页的代码有什么用呢？熟悉网页端代码的都知道，网页端的代码都是由很多标签组成,我们先找到<head>这个标签，在下面插入一个<script>标签，里面放入js代码,这个js代码就是用来获取上面介绍的性能数据。

> \- (void)URLProtocol:(NSURLProtocol \*)protocol didLoadData:(NSData \*)data;

上面会用到很多这个方法,为什么要用这个呢，因为你注入了新的代码，你需要将这个新的网页代码用这个方法加载一下,不然网页会加载不出来的。

最后只需要将MonitorURLProtocol在appDelegate里面注册一下就可以了。

![strip 3][]

注册创建的类

以上是通过NSURLProtocol这个类注入获取数据的代码,将JS代码注入后就需要JS将数据发送给我们,可以通过交互这些方式，接下来我就介绍一种直白的交互,大多数的交互也是这么做的，只不过封装了,考虑的情况更多，我就只是根据实际情况来做了。

### OC与JS交互获取数据 ###

交互都会有一个标识，OC传一个标识给JS，JS通过标识判断，发送给你想要的数据。我首先是通过运行时动态加载的方法将加载链接的三个方法给hook，进入同一个我定义的方法，然后在这个方法里面传标识给JS。

![strip 4][]

hook

![strip 5][]

*数据获取*

将标识和block作为键值对存起来，然后将JS将数据用url的形式发过来，我们取出来，匹配一下对应相应的标识,然后用block回调相应的数据,相应的代码这里就不贴了,最后我会给github上代码的链接。接受url就是用UIWebView的代理方法。

> \- (BOOL)webView:(UIWebView \*)webView shouldStartLoadWithRequest:(NSURLRequest \*)request navigationType:(UIWebViewNavigationType)navigationType;
> 
> \{
> 
> \[WebViewTracker webView:webView withUrl:request.URL\];
> 
> return YES;
> 
> \}

我们还可以在didFinishLoad里面手动调用JS代码来获取获取数据,和NSURLProtocol结合起来用,各有各的优缺点,一个是在顶部注入代码,一个是在尾部调用代码，都是会丢失一部分数据，所以最好的办法就是结合起来用。

以上是自己获取这些数据,如果是做成SDK监控APP获取这些数据，就不一样了，需要去hookUIWebView的代理方法，hook静态库的方法和普通的运行时加载是不一样的，这个我可以在以后的文章里面介绍。

### WKWebView ###

WKWebView是iOS8.0以后出来的，目前使用的人还不是很多，但是这个比UIWebView性能方面好很多，从内核到内存优化等等，但是由于还有iOS7以下的用户，所以面使用的人不多，但是这个是趋势。WKWebView获取上面的性能数据是一模一样的，不同的是WKWebView不会走进NSURLProtocol，所以实在didFinishLoad里面手动调用，这里就不详细说了，直接给代码链接

github代码链接如下：

https://github.com/LonelyWise/WebViewMonitor

## **WKWebView** 和 **UIWebView** 允许背景音乐自动播放 ##

WKWebView

![复制代码][copycode.gif]

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    
    config.allowsInlineMediaPlayback = YES;
    
    config.mediaPlaybackRequiresUserAction = false;
    
    wkWebView=[[WKWebView alloc] initWithFrame:rect configuration:config];
    
    wkWebView.UIDelegate=self;
    
    wkWebView.navigationDelegate=self;

![复制代码][copycode.gif]

UIWebVIew

[self.webView setMediaPlaybackRequiresUserAction:NO];

[UIWebView_WKWebView]: https://www.cnblogs.com/junhuawang/p/5759224.html
[Link 1]: https://developer.apple.com/library/mac/documentation/Cocoa/Reference/WebKit/ObjC_classic/index.html
[copycode.gif]: /images/20220415/fd496e3b4d0c45ebbe944f3c57169972.png
[2]: /images/20220415/060bb2b870b94d7dbd73bc695fe71dba.png
[2 1]: /images/20220415/dc80375983d947f6ab390ae7dc89b92e.png
[strip]: /images/20220415/9d566a7020ac42d8b3c7a9d6aadd315b.png
[strip 1]: /images/20220415/56a9689644134748a9ee75b6d16b4717.png
[strip 2]: /images/20220415/05437995ef844d1ca4ac2de117657a5f.png
[strip 3]: /images/20220415/fcd1807db5524a7ea93c685956b21eab.png
[strip 4]: /images/20220415/c97938dcd7764cfc9468ec4a008ebb67.png
[strip 5]: /images/20220415/2e48c8ef3baf46e9986f4dad9f7ee470.png