comment rendre le code suivant plus vite?

Question

Je développe une application avec phonegap. sur mon PC tout fonctionne bien mais sur mon appareil mobile c'est juste trop lent.

Je pense que le problème est sur la fonction show, le navigateur Android semble vraiment besoin de long pour afficher et masquer les éléments

ce qui peut être amélioré?

function show(id){ 
    $('.view').hide() 
    //alert('show ' + id) 
    $('#'+id+'View').show() 
    scroll(0,0) 
} 


function getSoundHTML(id, myname, del){ 

    if (del != true){ 
     var imgsrc = 'plus.png' 
     var f = function(){ 
      addToCostumSounds(id) 
      alert('added to favorites') 
     } 
    }else{ 
     var imgsrc = 'minus.png' 
     var f = function(){ 
      removeFromCostumSounds(id); 
      $(this).fadeOut().next('div').fadeOut(); 
     } 
    } 

    var div = $('<div></div>').addClass('box').html(myname).css('border-color', '999999').click(function(){ 
     play(id) 
    }) 
    var img = $('<img></img>').attr('src', imgsrc).addClass('sideimg').click(f) 

    return $('<div></div>').append(img).append(div) 
} 

for(var category in categories){ 

    var f = function(category){ 
     $('#'+category+'Btn').click(function(){ 
       show(category) 

       var categoryView = $('#'+category+'View') 
       for(var key in categories[category]){ 
        var div = getSoundHTML(key, categories[category][key]) 
        categoryView.prepend(div) 
       } 
       var img = '<img src="menu.png" class="menuimg"/>' 
       categoryView.prepend(img) 
       categoryView.append(img) 
     }) 
    } 
    f(category) 
} 

le code html:

<div class="btn" id="noBtn">no _</div> 
    <div class="btn" id="thatIsBtn">that is _</div> 
    <div class="btn" id="thereIsBtn">there is _</div> 
    <div class="btn" id="thisIsBtn">this is _</div> 
    ... 


<div class="view" id="noView"></div> 
<div class="view" id="thatIsView"></div> 
<div class="view" id="thereIsView"></div> 
<div class="view" id="thisIsView"></div> 
... 

Answer 1

ok, je pense que je suis la seule façon d'améliorer la peroformance: si quelqu'un clique sur un bouton (class = « btn »), il est redirigé vers une nouvelle page nouvelle qui a toute la page en HTML et ne le construit pas avec javascript.

Answer 2

Bien qu'il ne peut pas avoir un effet sur les ordinateurs, votre manque massif de points-virgules dans les bons endroits peut avoir un effet sur les appareils mobiles.

Le moteur JavaScript doit fonctionner et essayer de déterminer où les points-virgules doivent être placés. Voir this transcript from the ECMAScript specification.

Pour être honnête, je pense que ce n'est que quelques millisecondes de gain de temps, mais c'est un point de départ pour l'instant - et de bonnes pratiques pour l'avenir.

Answer 3

Voici votre problème:

for(var category in categories){ 

    var f = function(category){ 
     ... 
     for(var key in categories[category]) 
     ... 
    } 

    f(category) 
} 

Vous avez deux questions BIG ici:

1. vous définissez une fonction dans une boucle. Bien que cela soit parfois nécessaire, vous devriez faire de votre mieux pour éviter de définir des choses dans une boucle, sauf si vous en avez absolument besoin. Dans ce cas, vous pouvez probablement déplacer complètement la fonction f de la boucle sans casser votre code.
2. Boucles imbriquées. Vous avez un for ... in dans une boucle for ... in. C'est en grande partie dû au premier problème que j'ai signalé, mais en général les boucles imbriquées sont un grand non-non du point de vue des performances.