Javascript 如何使下面的代码更快？

我正在用phonegap开发一个应用程序。在我的电脑上，一切都正常，但在我的移动设备上，速度太慢了

我认为问题在于显示功能，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)
}

功能显示（id）{
$（'.view'）.hide（）
//警报（'显示'+id）
$（'#'+id+'View'）.show（）
滚动（0,0）
}
函数getSoundHTML（id、myname、del）{
如果（del！=真）{
var imgsrc='plus.png'
var f=函数（）{
addToCostumSounds（id）
警报（'已添加到收藏夹'）
}
}否则{
var imgsrc='minus.png'
var f=函数（）{
移除CostumSounds（id）；
$（this.fadeOut（）.next（'div'）.fadeOut（）；
}
}
var div=$（''）.addClass（'box'）.html（myname）.css（'border-color'，'999999'）。单击（function（）{
播放（id）
})
变量img=$（''）.append（img）.append（div）
}
for（类别中的var类别）{
var f=功能（类别）{
$（'#'+category+'Btn'）。单击（函数（）{
节目（类别）
变量categoryView=$（“#”+类别+“视图”）
对于（类别中的var键[类别]）{
var div=getSoundHTML（键，categories[category][key]）
类别视图前置（分区）
}
变量img=''
类别视图预结束（img）
categoryView.append（img）
})
}
f（职类）
}

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引擎必须运行并尝试找出分号需要放在哪里。看

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

这是你的问题：

for(var category in categories){

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

    f(category)
}

这里有两个大问题：

您正在循环中定义一个函数。虽然有时需要这样做，但您应该尽最大努力避免在循环中定义事物，除非您绝对需要这样做。在这种情况下，您可以将

f

函数完全移出循环，而不中断代码

嵌套循环。您有一个

用于。。。在

中的

中，用于。。。在

循环中。这在很大程度上是由于我指出的第一个问题，但从性能的角度来看，嵌套循环通常是一个大禁忌

---

好的，我想我找到了提高性能的唯一方法：

---

如果有人单击按钮（class=“btn”），他将被重定向到一个新的新页面，该页面的整个页面都是HTML格式的，并且没有使用javascript进行构建。

您可以尝试通过JSLint（）运行代码在第二次阅读后：有没有任何理由在同一个地方定义和使用

f

函数？似乎是多余的。我认为JS解析器在这方面要简单得多：1行1条语句=没问题，1行2条语句不分开；=bug（FF 4.01同意我的观点）。因此，就我所见，在代码中添加或删除分号对解析器本身应该没有任何影响（实际上少了一个符号，这……完全不重要）。@Voo-我的答案是基于道格拉斯·克罗克福德（Douglas Crockford）在关于好部分的演讲中的评论。此外，我现在已经链接到这个领域的规范。我怀疑分号是个问题。分号也是，我怀疑分号插入是否足以导致OP描述的挂断。事实上，我只是谨慎地声明，它可能仅对移动设备产生影响。虽然是可选的，但最好不要在开始时使用草率的做法。更新-请阅读您的链接，感谢我们来自不同的思想流派@beartwizzle：哦，我用分号来表示最好的分号，我只是指出，任何现代的翻译都应该处理这两种情况，而不存在任何问题（晦涩或其他问题）。如果我决定使用sans-colons，JSLint会让我发疯的。谢谢，我把函数定义从循环中移开了。但我没注意到有什么不同。循环中没有循环。第二个循环是在一个函数中定义的，这个函数只是由一个click调用的。也许我应该使用更多的静态html，而不是用javascript来构建它？@nomoral：你是对的，先生，尽管我仍然支持我关于嵌套

的评论。。。在

中，几乎可以在任何情况下循环。