如何使以下代码更快？

问题描述

| 我正在使用phonegap开发应用程序。在我的PC上，一切正常，但在移动设备上，速度太慢。 我认为问题出在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>
...

    

解决方法

        尽管它可能对台式机没有影响，但在正确的位置大量缺少分号可能会对移动设备产生影响。 JavaScript引擎必须运行并尝试找出分号需要去的地方。请参阅ECMAScript规范的抄本。 老实说，我认为这仅节省了几毫秒的时间，但这只是现在的起点-也是未来的良好做法。     ,        这是您的问题：

for(var category in categories){

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

    f(category)
}

您在这里有两个BIG问题： 您正在循环内定义一个函数。尽管有时需要这样做，但除非绝对需要，否则应尽最大努力避免在循环中定义事物。在这种情况下，您可能会完全将

f

函数移出循环而不会破坏代码。 嵌套循环。您在

for ... in

循环中有一个

for ... in

。这主要是由于我指出的第一个问题，但是从性能的角度来看，嵌套循环通常是很大的禁忌。     ,        好的，我认为我有提高性能的唯一方法： 如果有人单击按钮（class = \“ btn \”），他将被重定向到一个新的全新页面，该页面具有HTML的整个页面，并且不使用javascript构建。