Ways to improve UIWebView scrolling performance?

Question

I am building an application that includes a UIWebView containing a large number of images, CSS, embedded video, and JavaScript tap handlers. Scrolling performance is stuttery and I am looking for insight into the most effective ways to improve this.

Which if any of the following characteristics lead to laggy UIWebView scrolling? What other factors may be hindering performance?

• Quantity of images
  • Should I be removing images from the DOM as the user scrolls past them, and adding them back if they scroll back up?
• Size of images
  • Will Retina-quality images in a web view affect scrolling performance a lot more than smaller versions would?
• Image scaling
  • Would resizing the images ahead of time make a big difference, rather than relying on the web view to scale based on declarations like width: 100%;?
• CSS
  • I have avoided box-shadow, but are there other CSS properties that are also known for adversely affecting scrolling performance?

If there are any other resources or tools that can be used for profiling, I've love to hear about them.

Answer 1

This is the answer I got from Apple Developer Technical Support a while ago:

At this time, we do not provide any mechanisms to optimize the rendering of UIWebView. The reason you see a difference is due to Mobile Safari and UIWebView not using the same rendering engine.

The performance is dependent on the content loaded. If there are javascripts running or plugins being used, this can hinder the performance.

I recommend that you file a bug report at http://developer.apple.com/bugreporter/ detailing your situation. This will also keep you informed on the status of your bug report.

A possible alternative to UIWebView would be the open-source DTCoreText library: https://github.com/Cocoanetics/DTCoreText, which powers the Float Reader app: http://itunes.apple.com/us/app/float-reader/id447992005?mt=8

Answer 2

The guys at LinkedIn have done extensive work with UIWebView and HTML5 on their iPad application. Their entire feed which is heavy with images, texts and videos is rendered inside a UIWebView.

The following blog post should give you lots of starting points to performance improvements

LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5

Answer 3

I had a similar issue a while ago. I found that putting the webview inside of a scrollview improved scroll performance dramatically. After the webview finished loading I disabled scrolling on the webview, set the webview's frame and the scrollview's contentSize to be the size of the webview's content.

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

I'm assuming that the webview doesn't load an image until it is about to appear on screen, which caused the stuttering, and by putting it in a scrollview and setting the frame to the content size it must load them ahead of time, but I'm not certain. I'm also sure this has consequences (ie, increased memory usage up front), but I never had any problems doing it this way.