iOS UIWebview调用stringByEvaluatingJavaScriptFromString获取HTML内容卡顿问题

这问题我之前帮同事排查过类似的，核心矛盾点在于谷歌搜索的动态DOM特性加上UIWebView本身的JS执行限制。咱们一步步拆解原因和解决方案：

为什么会卡顿？ #

• DOM体积暴增：谷歌搜索页面滚动时会动态加载更多搜索结果，页面的DOM节点数量会变得非常庞大。而stringByEvaluatingJavaScriptFromString是同步执行的，且运行在主线程——当它尝试获取整个页面的HTML时，需要遍历并序列化所有DOM节点，这个过程会阻塞主线程，导致UI卡顿。
• UIWebView的性能瓶颈：UIWebView本身已经被苹果标记为废弃，它的JS引擎和主线程是绑定的，处理复杂DOM时的性能远不如WKWebView，同步调用放大了这个问题。

解决方案 #

1. 优先迁移到WKWebView（最推荐） #

WKWebView把JS执行放在独立的进程中，不会阻塞主线程，而且提供了异步的evaluateJavaScript:completionHandler:方法，完美解决卡顿问题。示例代码：

// 初始化WKWebView
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
webView.navigationDelegate = self;
[self.view addSubview:webView];

// 加载谷歌搜索页面
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.google.com"]]];

// 在用户停止滚动后异步获取搜索结果区域的HTML
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self.webView evaluateJavaScript:@"document.getElementById('search').outerHTML" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        if (error) {
            NSLog(@"获取内容失败: %@", error.localizedDescription);
            return;
        }
        // 在这里处理返回的搜索结果HTML，完全不卡主线程
        NSString *resultsHTML = result;
        // 你的业务逻辑处理
    }];
}

2. 如果必须保留UIWebView，优化JS调用 #

如果暂时没法迁移，那就从减少JS处理的数据量入手：

• 只获取需要的DOM区域：不要直接取整个document.documentElement.outerHTML，谷歌搜索的结果容器一般是div#search，只获取这个节点的HTML能大幅减少数据量：

  NSString *targetJS = @"document.querySelector('div#search').outerHTML;";
  NSString *resultsHTML = [self.webView stringByEvaluatingJavaScriptFromString:targetJS];
  

• 延迟调用，避免频繁执行：不要在滚动过程中实时调用，等用户停止滚动0.5-1秒后再执行，减少主线程的压力：

  // 滚动时重置定时器
  - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
      [NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(fetchTargetHTML) object:nil];
      [self performSelector:@selector(fetchTargetHTML) withObject:nil afterDelay:0.7];
  }
  
  - (void)fetchTargetHTML {
      if (!self.webView.loading) {
          NSString *targetJS = @"document.querySelector('div#search').outerHTML;";
          NSString *resultsHTML = [self.webView stringByEvaluatingJavaScriptFromString:targetJS];
          // 处理获取到的内容
      }
  }
  

3. 额外优化：缓存已获取的内容 #

如果用户滚动后没有加载新的结果，没必要重复获取HTML，可以缓存上次的结果，判断DOM是否更新后再重新获取。

内容的提问来源于stack exchange，提问作者Purvi Mehta