Question

我正在开发一个带有phonegap的应用程序。在我的电脑上一切运行正常，但在我的移动设备上它太慢了。

我认为问题出在show函数上，android浏览器似乎需要很长时间来隐藏和显示元素

可以改进什么？

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引擎必须运行并尝试找出分号需要去的地方。请参阅this transcript from the ECMAScript specification。

老实说，我认为这只节省了几毫秒的时间，但它是现在的起点 - 也是未来的良好实践。

Answer 2

这是你的问题：

for(var category in categories){

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

    f(category)
}

这里有两个大问题：

您正在循环中定义一个函数。虽然有时需要这样做，但除非绝对需要，否则应尽量避免在循环中定义内容。在这种情况下，您可以在不破坏代码的情况下将f函数完全移出循环。
嵌套循环。您在for ... in循环中有一个for ... in。这很大程度上是由于我指出的第一个问题，但一般而言，从性能的角度来看，嵌套循环是一个很大的禁忌。

Answer 3

好吧，我认为我有改善性能的唯一方法：如果有人点击一个按钮（class =“btn”），他将被重定向到一个新的页面，该页面包含整个HTML页面并且不使用javascript构建它。

如何使下面的代码更快？

3 个答案: