как сделать следующий код быстрее?

Question

Я занимаюсь разработкой приложения с помощью PhoneGap.на моем компьютере все работает нормально, но на моем мобильном устройстве оно слишком медленное.

Я думаю, что проблема в функции показа, кажется, что браузеру андроида нужно очень долго, чтобы скрыть и показать элементы

что можно улучшить?

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

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

Хотя это может не повлиять на рабочие столы, ваше массовое отсутствие точек с запятой в нужных местах может повлиять на мобильные устройства.

Движок JavaScript должен пробежать и попытаться определить, где нужно использовать точки с запятой. См. эту стенограмму из спецификации ECMAScript .

Если честно, я думаю, что это всего лишь несколько миллисекунд сэкономленного времени, но это отправная точка на данный момент - и хорошая практика на будущее.

Answer 2

Вот ваша проблема:

for(var category in categories){

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

    f(category)
}

У вас есть две БОЛЬШИЕ проблемы здесь:

1. Вы определяете функцию в цикле. Хотя это иногда необходимо, вы должны сделать все возможное, чтобы избежать определения вещей в цикле, если вам это абсолютно не нужно. В этом случае вы, вероятно, могли бы полностью вывести функцию f из цикла, не нарушая ваш код.
2. Вложенные циклы. У вас есть for ... in в цикле for ... in. Во многом это связано с первой проблемой, которую я указал, но, как правило, вложенные циклы - это большое «нет-нет» с точки зрения производительности.

Answer 3

хорошо, я думаю, что у меня есть единственный способ улучшить производительность: если кто-то нажимает на кнопку (class = "btn"), он перенаправляется на новую свежую страницу, которая содержит всю страницу в HTML и не создает ее с помощью JavaScript.