UIWebView和WKWebView的对比

1.UIWebView和WKWebView

UIWebView

1)UIWebView是iOS2就有了的,占用内存也比较多,内存峰值也挺夸张的

2)UIWebView继承自UIView 是用来加载网页的类,可以简单理解成就是一个view

WKWebView

1)相比UIWebView的话,支持更多的HTML5的特性

2)滚动刷新率在60fps以及内置手势

3)添加了加载进度属性:estimatedProgress

4)和Safari想听的JavaScript引擎

WKWebView的流程

在发送请求之前决定是否跳转 --> 第一次进入页面 --> 页面开始加载时调用 --> 收到服务器跳转请求之后执行 --> 收到服务器跳转请求之后再执行 --> 收到响应后决定是否跳转 --> 内容开始返回时调用 --> 页面加载完成之后调用 

之后进入页面 --> 在发送请求之前决定是否跳转 -->  收到服务器跳转请求之后执行 --> 收到服务器跳转请求之后再执行 --> 收到响应后决定是否跳转 --> 内容开始返回时调用 --> 页面加载完成之后调用 

在开发过程中会经常遇到网页加载慢的现象,原因有：网速过慢，大图渲染，图片异步下载等，只要与线程异步处理有关都是，设备系统只是影响用户体验度。

OC和JS的交互方式

 WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];

    WKUserContentController *userController = [[WKUserContentController alloc] init];

    config.preferences.javaScriptEnabled = YES;

    config.userContentController = userController;

    [userController addScriptMessageHandler:self name:@"callbackNative"];

        WKWebView *web = [[WKWebView alloc] initWithFrame:CGRectMake(0, TOPBAR_H,SCREEN_W,SCREEN_H - TOPBAR_H) configuration:config];

    self.webView = web;

    web.UIDelegate = self;

    web.navigationDelegate = self;

    [web loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:self.urlStr]]];

    [self.view addSubview:web];

 

#pragma mark - 处理与js交互回调

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

{

    //message中包含了js中所有的信息

    //有两个重要的属性，一个是name，进行区分判断具体响应某个方法

    //body中就是js传过来的参数

    if ([message.name isEqualToString:@"callbackNative"]) {

        NSLog(@"----%@\n----%@\n-----%@",message,message.body,message.frameInfo);

        id obj = [NSJSONSerialization JSONObjectWithData:[message.body dataUsingEncoding:NSUTF8StringEncoding] options:NSJSONReadingAllowFragments error:nil];

        NSDictionary *dict = obj;

     }

}

网页内部也会进行一些处理方式,比如goback, [self.webview reload]等操作

在具体落实开发详情页面,会使用到网页进行加载,需要的就是计算webview的高度,再计算scrollView的高度,计算webview的高度就很耗时,因为网页是需要全部展示出来后才会去计算高度的,先算高度,再展示网页的文字,再展示网页的图片,图片可以慢慢缓存后再显示,这样的话不至于白屏时间过长

 

第一步：添加观察者

[_webView.scrollViewaddObserver:selfforKeyPath:@"contentSize"options:NSKeyValueObservingOptionNewcontext:nil];

第二步：观察者监听webView的contentSize变化

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void*)context {

   if ([keyPathisEqualToString:@"contentSize"]) {

      dispatch_async(dispatch_get_global_queue(0,0), ^{

          //document.documentElement.scrollHeight

          //document.body.offsetHeight

          [_webViewevaluateJavaScript:@"document.documentElement.offsetHeight"completionHandler:^(id_Nullable result,NSError * _Nullable error) {

              CGRect frame =_webView.frame;

             frame.size.height = [resultdoubleValue] + 50;

             _webView.frame = frame;

             _scrollViewHeight =220 + _webView.height;

             _scrollView.contentSize =CGSizeMake(kScreenWidth,_scrollViewHeight);

          }];

       });

    }

}

第三步：移除观察者

- (void)dealloc

{

   [_webView.scrollViewremoveObserver:selfforKeyPath:@"contentSize"];

}