Quelle est la vitesse de démarrage de l'application PhoneGap? Conseils pour accélérer?

Je me demande comment rapidement vous pourriez faire simple app PhoneGap chargé.
Mon simple application prend de 6 à 8 secondes sur le Galaxy S3 (toutes les ressources sont stockées dans le disque local). Ne sais pas si c'est normal que PhoneGap.

Tout le monde peut battre 2 à 3 secondes de temps de chargement? Des conseils pour rendre le chargement plus rapide?

source d'informationauteur Pahlevi Fikri Auliya

cordova

28

Les données anecdotiques:

Mon phonegap apps pouvez charger dans les 2 secondes (à partir tapant sur l'icône) sur un iPad 3. Même ainsi, il est conseillé d'utiliser l'écran de démarrage plugin pour maintenir le démarrage jusqu'à l'INTERFACE utilisateur de votre application est chargée, afin d'éviter le scintillement, etc.

Choses Que Vous Pouvez Faire:

1) Ne pas attendre sur vos données pour démarrer l'affichage de l'interface utilisateur.

Dans une de mes applications, le système de fichiers fournit les données de sauvegarde. Bien que le système de fichiers est rapide, il n'y a pas de raison de bloquer l'affichage initial de l'interface utilisateur, lors de l'attente pour elle. Bien qu'il y aura un vide d'interface pour un moment, c'est OK, en fait, d'Apple pour les écrans de démarrage sont de montrer l'interface utilisateur comme si elle était déserte. (Pas que la plupart des gens sont d'accord ou de suivre les conseils).

La même chose est vraie si vous chargez des données réseau -- afficher l'INTERFACE utilisateur dès que vous le pouvez pour éliminer la sensation de lenteur de chargement de l'application. Alors si vos données vont être lent à charger, mettre en place un spinner. L'utilisateur ne peut voir que votre application a chargé rapidement et que le réseau est maintenant le goulot d'étranglement.

2) de Réduire la taille/nombre de départ de l'actif

Le moins de scripts, feuilles de style, etc., que vous pouvez charger au démarrage, le mieux. La plupart des vues sont raisonnablement bonnes à pipelining ces autant que possible, mais fondamentalement, le plus de données de la vue web doit charger juste pour montrer votre INTERFACE utilisateur, le plus lent, le temps de chargement de votre application sera. (C'est pourquoi Apple des conseils pour les écrans de démarrage de sens: montrer un vide de l'INTERFACE utilisateur presque immédiatement est censé aider les utilisateurs ont l'impression que l'application est chargé rapidement, même quand elle n'a pas. Je ne suis pas entièrement convaincu par cet argument...!)

Essentiellement, vous devriez essayer de charger le minimum de moyens nécessaires pour générer un vide de l'INTERFACE utilisateur, puis charger le reste après c'est affiché. Si cela va prendre du temps, jeter un spinner.

3) Réduire le nombre de plugins pour le nu-nombre requis pour votre application les fonctionnalités de

Plugins prendre le temps de s'initialiser, et ils le font avant deviceready d'être appelé. Le plus de plugins que vous avez, forcément, plus votre application pour aller de l'avant. Vous pouvez atténuer ce à un certain degré, si vous pouvez jeter un vide de l'INTERFACE utilisateur avant devicereadymais cela ne fonctionne que si vous n'êtes pas complètement dépendante sur un ou plusieurs plugins en cours de chargement. Encore une fois, c'est pourquoi l'écran de démarrage plugin est utile.)

4) Éviter tout calcul complexes au démarrage jusqu'à ce que après l'INTERFACE utilisateur est présenté

Si possible, bien sûr. Même si votre application a besoin de pousser des données (dire de créer une base de données lors de la première de lancement), de lancer l'INTERFACE utilisateur en premier, puis un spinner tandis que les données sont traitées. Si votre application a besoin pour calculer quelque chose de complexe, de lancer l'INTERFACE utilisateur d'abord, et ensuite crunch vos numéros.

5) Comprendre que certains temps de chargement est hors de votre contrôle

Le natif wrapper doit être chargé, qui a pour initialiser un affichage web (ce qui prend du temps), puis, à la charge cordova.js (dans l'ordre d'interface entre le natif web et de côtés). Ce sont des choses que vous ne pouvez vraiment pas éviter (bien que vous pourriez éviter d'cordova.js si vous n'utilisez pas tout de Cordoue sa fonctionnalité. Mais alors, pourquoi ne pas simplement construire un simple shell dans ce cas, pas besoin d'utiliser Cordova à tous.)

6) Appareils varient largement

Bien sûr, un temps de chargement sur un appareil n'a pas d'incidence, ce que-si-jamais sur un autre appareil. Cela est vrai sur toute plate-forme, bien que je soupçonne que c'est plus visible sur Android en raison de la large gamme de prix des appareils. Une lente appareil android est évidemment à prendre beaucoup plus de temps à charger votre application que du haut de gamme android. La même généralement vrai pour les nouveaux appareils en tant que bien. Par exemple, si mon application peut charger en 2s sur un nouvel iPad, les chances sont bonnes qu'il va prendre un peu plus sur le matériel plus ancien. (Pour moi, je me dis que si je peux charger l'application 2 à 3 secondes sur un iPad 3, ce qui n'est pas le plus récent -- il doit charger encore plus vite sur du matériel récent).

Enfin:

Je ne suis pas sûr que vous allez obtenir beaucoup au-dessous de 1 ou 2 secondes temps de chargement ici. Je peux également préciser que 2-3 deuxième temps de chargement est généralement pas difficile à réaliser -- je n'ai pas mis un effort particulier dans la plupart de mes applications, et de les charger plus rapidement et efficacement. (En fait, mon une application native charge plus lentement que mon phonegap apps -- 4 secondes vs 2-3.)
3

Vous Pouvez augmenter la vitesse d'application:

1. À l'aide de minifiés versions de js qui vous avez inclus dans votre projet.

2. Éviter d'utiliser des images avec une plus grande taille. tune avec web compatible fichiers PNG
Optimiser Les Images
Utiliser les CSS Feuilles Sprite
```
   .icon {
      width: 14px; height: 14px;
      background-image: url("glyphicons-halflings.png");
    }
    .icon-glass {
      background-position: 0 0;
    }
    .icon-music {
      background-position: -24px 0;
    }
    .icon-search {
      background-position: -48px 0;
    }
```
Utilisez le bouton droit de la taille de l'image (ne pas redimensionner des images dans le HTML)
Héberger des images sur des systèmes distribués (c'est à dire S3)
Éviter une erreur 404 pour les images
```
<img src="{{pic}}" onerror='this.src="nopic.jpg"'/>
```
3. Évitez d'utiliser beaucoup de CSS.Limiter les Ombres et les Dégradés de liaison box-shadow,border-radius,des dégradés,des text-align
Essayez de désactiver certains des CSS qui la ralentit. Dans votre jquery mobile .fichier css ajoutez à cela le fond:
```
* {
text-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius:0 !important;
-webkit-border-top-left-radius:0 !important;
-webkit-border-bottom-left-radius:0 !important;
-webkit-border-bottom-right-radius:0 !important;
-webkit-border-top-right-radius:0 !important;
}
```
4. Utiliser les Transitions CSS + Accélération Matérielle Natif de Défilement

5. Si vous utilisez une url pour obtenir JS mieux les télécharger et de les utiliser localement.

6. FastClick FastClick est un simple, facile à utiliser la bibliothèque pour éliminer les 300 ms délai entre la physique et appuyez sur le déclenchement d'un événement de clic sur les navigateurs mobiles.

7. utilisation Slpash écran.

8. Évitez d'utiliser des framework à utiliser seulement si nécessaire. Essayez de faire du responsive design.

9. Ne pas générer l'INTERFACE utilisateur sur le serveur.Créer l'INTERFACE utilisateur en JavaScript côté client

10. Réduire Les Remboursements
- De réduire le nombre d'éléments du DOM.
- Minimiser l'accès au DOM de mise à Jour des éléments "hors ligne" avant
  réinsérer dans le DOM.
- Éviter de peaufiner la mise en page dans JavaScript
lent
```
$("#header a.back").on("click", clickHandler);
$("#header a.back").css("color", "white");
$("#header a.back").css("text-decoration", "none");
$("#header a.back").attr("href", "#");
```
Rapide
```
var $backButton = $("#header a.back");
$backButton.on("click", clickHandler);
$backButton.css("color", "white");
$backButton.css("text-decoration", "none");
$backButton.attr("href", "#");
```
11. Éviter D'Accès Au Réseau
Ne faites pas le réseau dependend apps pour obtenir de contenu
```
$.ajax({url: "services/states"}).done(function(data) {
    states = data;
});
```
utilisation du Cache de Données Statiques LocalStorage, Base de données & Fichier
lent
```
$.ajax({url: "slow/feed"}).done(function(data) {

});
```
rapide
```
dataAdapter.getItems().done(function(data) {

});
```
12. N'attendez pas pour les données à afficher l'INTERFACE utilisateur
```
//Display view
displayView();

//Get data
$.ajax({url: "product/101"}).done(function(product) {
    //Update view
});
```

Vous devez vous connecter pour publier un commentaire.