提高 UIWebView 滚动性能的方法

Question

我正在构建一个应用程序，其中包含一个包含大量图像、CSS、嵌入式视频和 JavaScript 点击处理程序的UIWebView。滚动性能是卡顿的，我正在寻找改善这一点的最有效方法。

如果以下任何特征导致滚动UIWebView滞后，该怎么办？还有哪些其他因素可能影响性能？

• 图像数量
  • 当用户滚动过去图像时，我是否应该从 DOM 中删除图像，并在它们向上滚动时将它们重新添加？
• 图像大小
  • Web 视图中的 Retina 质量图像对滚动性能的影响是否比较小版本大得多？
• 图像缩放
  • 提前调整图像大小会产生很大的不同，而不是依靠 Web 视图根据 width: 100%; 等声明进行缩放？
• .CSS
  • 我已经避免了box-shadow，但是是否有其他CSS属性也以对滚动性能产生不利影响而闻名？

如果还有其他资源或工具可用于分析，我很想听听它们。

Answer 1

这是我不久前从Apple开发人员技术支持那里得到的答案：

目前，我们不提供任何机制来优化 UIWebView 的呈现。 您看到差异的原因是 Mobile Safari 和 UIWebView 未使用相同的渲染引擎。

性能取决于加载的内容。如果有正在运行的 javascript 或使用插件，这可能会阻碍性能。

我建议您在 http://developer.apple.com/bugreporter/提交错误报告，详细说明您的情况。这也将使您随时了解错误报告的状态。

UIWebView的一个可能的替代方案是开源的DTCoreText库：https://github.com/Cocoanetics/DTCoreText，它为Float Reader应用程序提供支持：http://itunes.apple.com/us/app/float-reader/id447992005?mt=8

Answer 2

LinkedIn的家伙在他们的iPad应用程序上使用UIWebView和HTML5做了大量的工作。他们的整个提要充满了图像，文本和视频，在UIWebView中呈现。

以下博客文章应该为您提供许多性能改进的起点

iPad LinkedIn：HTML5 中平滑无限滚动的 5 种技术

Answer 3

不久前我遇到了类似的问题。 我发现将 Web 视图放在滚动视图中可以显着提高滚动性能。 Web 视图加载完成后，我禁用了在 Web 视图上的滚动，将 Web 视图的框架和滚动视图的内容大小设置为网络视图内容的大小。

-(void) webViewDidFinishLoad:(UIWebView *)webView {   
    float size = [[self.webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"] floatValue];
    [self.scrollView setContentSize:CGSizeMake(self.view.frame.size.width, size)];
    [webView setFrame:CGRectMake(webView.frame.origin.x,
                                 webView.frame.origin.y,
                                 webView.frame.size.width,
                                 size)];
    [(UIScrollView*)[webView.subviews objectAtIndex:0] setScrollEnabled:NO];
}

我假设 web 视图在即将出现在屏幕上之前不会加载图像，这会导致卡顿，并且通过将其放入滚动视图并将框架设置为内容大小，它必须提前加载它们，但我不确定。 我也确信这会产生后果（即，预先增加内存使用量），但我这样做从来没有遇到任何问题。