Wie kann man den folgenden Code schneller machen?

Question

Ich entwickle eine Anwendung mit Phonegap. Auf meinem PC läuft alles gut, aber auf meinem mobilen Gerät ist es einfach zu langsam.

Ich denke, das Problem liegt in der Show-Funktion, der Android-Browser scheint sehr lange zu brauchen, um Elemente ein- und auszublenden.

Was kann verbessert werden?

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)
}

die 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

Während es auf Desktops vielleicht keine Auswirkungen hat, kann Ihr massiver Mangel an Semikolons an den richtigen Stellen Auswirkungen auf mobile Geräte haben.

Die JavaScript-Engine muss durchlaufen und versuchen, herauszufinden, wo die Semikolons hingehören. Siehe dieses Transkript aus der ECMAScript-Spezifikation .

Um ehrlich zu sein, denke ich, dass das nur ein paar Millisekunden Zeitersparnis bedeutet, aber es ist ein Anfang für jetzt - und eine gute Übung für die Zukunft.

Answer 2

Das ist Ihr Problem:

for(var category in categories){

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

    f(category)
}

Sie haben hier zwei GROSSE Probleme:

1. Sie definieren eine Funktion innerhalb einer Schleife. Auch wenn dies manchmal notwendig ist, sollten Sie es tunlichst vermeiden, Dinge innerhalb einer Schleife zu definieren, es sei denn, Sie müssen es unbedingt. In diesem Fall könnten Sie wahrscheinlich die f Funktion ganz aus der Schleife herausnehmen, ohne den Code zu verändern.
2. Verschachtelte Schleifen. Sie haben eine for ... in innerhalb einer for ... in Schleife. Dies ist größtenteils auf das erste Problem zurückzuführen, auf das ich hingewiesen habe, aber im Allgemeinen sind verschachtelte Schleifen aus Sicht der Leistung ein großes Tabu.

Answer 3

Ok, ich glaube, ich habe die einzige Möglichkeit, die Leistung zu verbessern: Wenn jemand auf eine Schaltfläche (class="btn") klickt, wird er auf eine neue Seite umgeleitet, die die gesamte Seite in HTML hat und nicht mit Javascript aufgebaut ist.