2012-04-15 5 views
14

Je construis une application qui comprend un UIWebView contenant un grand nombre d'images, de CSS, de vidéo intégrée, et de gestionnaires de prise JavaScript. La performance de défilement est stuttery et je cherche un aperçu des moyens les plus efficaces pour améliorer cela.Comment améliorer les performances de défilement d'UIWebView?

Laquelle des caractéristiques suivantes mène à un retard de défilement UIWebView? Quels autres facteurs peuvent entraver la performance?

  • Quantité d'images
    • Dois-je me retirer des images du DOM comme l'utilisateur fait défiler devant eux, et en les ajoutant en arrière s'ils défilent de secours?
  • Taille des images
    • Will images Retina-qualité dans une vue web défilement des performances affect beaucoup plus que des versions plus petites Would?
  • image mise à l'échelle
    • Would redimensionner les images à l'avance faire une grande différence, plutôt que de compter sur la vue Web à l'échelle en fonction des déclarations comme width: 100%;?
  • CSS
    • j'ai évité box-shadow, mais y at-il d'autres propriétés CSS qui sont également connus pour nuire aux performances de défilement?

S'il y a d'autres ressources ou des outils qui peuvent être utilisés pour le profilage, j'ai l'amour d'entendre à leur sujet.

Répondre

1

J'ai eu un problème similaire il y a quelque temps. J'ai trouvé que mettre le webview à l'intérieur d'une scrollview a considérablement amélioré les performances de défilement. Après la fin du chargement du webview, j'ai désactivé le défilement sur le webview, défini le cadre du webview et contentSize du scrollview comme étant la taille du contenu du webview.

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

Je suppose que le WebView ne charge pas une image jusqu'à ce qu'il soit sur le point d'apparaître à l'écran, ce qui a provoqué le bégaiement, et en le mettant dans un scrollview et le réglage du cadre à la taille du contenu, il Je dois les charger à l'avance, mais je ne suis pas certain. Je suis également sûr que cela a des conséquences (par exemple, l'augmentation de l'utilisation de la mémoire à l'avance), mais je n'ai jamais eu de problèmes de le faire de cette façon.

+3

Je ne peux pas vers le bas vote encore, mais cela est un grave non-non. Cette solution provoque le dessin de l'ensemble webView dans son calayer (invalidant le mécanisme de rendu du pavage de UIWebView), provoquant une énorme utilisation de la mémoire. La description de ses pages par OP, "contenant un grand nombre d'images, de CSS, de vidéo incorporée, et de gestionnaires de prise JavaScript", conduirait l'application à utiliser une quantité excessive de mémoire. –

+2

Donc, ce que vous dites est que j'ai échangé de la mémoire pour la performance? C'est un peu ce que je pensais. Je suis d'accord que ce n'est pas une bonne solution, mais c'était le seul moyen que j'ai trouvé pour améliorer le défilement. Et étant donné que je savais exactement ce qui allait être chargé dans le webview à l'avance et que tous les assets étaient regroupés avec l'application, je n'avais aucun problème à le faire de cette façon. – rjowens

+1

Eh bien, ce genre de trading est très dangereux avec UIWebView, car il grandit dans la mémoire très rapidement et agressivement. Et quand le contenu devient plus grand et plus complexe, vous trouverez bientôt un barrage de didReceiveMemoryWarning-s et finalement des accidents. –

8

Ceci est la réponse que je suis arrivé d'Apple Developer Support technique il y a un certain temps:

A cette époque, nous ne fournissons pas de mécanismes pour optimiser le rendu des UIWebView. La raison pour laquelle vous constatez une différence est due au fait que Mobile Safari et UIWebView n'utilisent pas le même moteur de rendu.

La performance dépend du contenu chargé. Si javascripts est en cours d'exécution ou si des plugins sont utilisés, cela peut nuire aux performances.

Je vous recommande de déposer un rapport de bug au http://developer.apple.com/bugreporter/ détaillant votre situation. Cela vous tiendra également informé de l'état de votre rapport de bogue.

Une alternative possible à UIWebView serait la bibliothèque DTCoreText open-source: https://github.com/Cocoanetics/DTCoreText, qui alimente l'app Reader Float: http://itunes.apple.com/us/app/float-reader/id447992005?mt=8

+0

Je sais que la performance dépend du contenu chargé. Je cherche à comprendre que _which_ change mon contenu (par exemple, des images plus petites, moins d'images, en évitant certaines propriétés CSS, etc.) aura le plus grand effet. –

5

Les gars de LinkedIn ont fait beaucoup de travail avec UIWebView et HTML5 sur leur application iPad . Leur flux entier, chargé d'images, de textes et de vidéos, est rendu à l'intérieur d'un UIWebView.

Le billet de blog ci-dessous devrait vous donner beaucoup de points de départ pour l'amélioration des performances

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

Questions connexes