如何使下面的代碼更快？

我正在開發一個手機應用程序。在我的電腦上，一切運行良好，但在我的移動設備上它太慢了。如何使下面的代碼更快？

我認爲這個問題是在展示功能，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> 
...

來源

2011-05-30 nomoral

使用原生JavaScript？ – 2011-05-30 08:26:31

您可以嘗試通過JSLint（http://www.jslint.com/）運行您的代碼，以便首先將其加入。 – isNaN1247 2011-05-30 08:30:20

在第二次讀完這篇文章之後：是否有任何理由在同一個地方定義和使用'f'函數？似乎多餘。 – 2011-05-31 07:47:25

好吧，我想我得到了改善peroformance的唯一途徑：如果有人點擊一個按鈕（類=「BTN」），他被重定向到包含整個頁面的HTML和新的新的一頁不使用JavaScript構建它。

來源

2011-05-31 12:05:51 nomoral

雖然它可能不會對桌面的效果，你的大量缺乏正確的地方分號可以在移動設備上的效果。

JavaScript引擎必須運行並試圖找出分號需要去的地方。見this transcript from the ECMAScript specification。

說實話，我認爲這隻需要幾毫秒的時間節省，但它現在是一個起點 - 以及未來的良好實踐。

來源

2011-05-30 08:35:36 isNaN1247

我認爲JS解析器在這方面簡單得多：1條語句在1行=沒有問題，2條語句在1行而不分離; = bug（FF 4.01與我一致）。所以，在代碼中添加或刪除分號應該使解析器本身沒有任何區別（據我所知，實際上只有一個符號可以讀取，而這完全不重要）。 – Voo 2011-05-30 16:51:00

@Voo - 我的回答是基於Douglas Crockford在關於The Good Parts的演講中的評論。另外我現在已經鏈接到了這方面的規範。 – isNaN1247 2011-05-30 17:36:32

我懷疑分號是問題。分號也是[可選]（http://mislav.uniqpath.com/2010/05/semicolons/），我懷疑分號插入足以導致OP描述的掛起。 – 2011-05-30 17:52:56

這是你的問題：

for(var category in categories){ 

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

    f(category) 
}

您這裏有兩個大問題：

你定義一個循環內的功能。儘管有時需要這樣做，但您應該盡最大努力避免在循環中定義事物，除非您絕對需要。在這種情況下，你可以將f函數完全移出循環而不會破壞你的代碼。
嵌套循環。您在for ... in循環內有for ... in。這主要是由於我指出的第一個問題，但總的來說，從性能的角度來看，嵌套循環是一個很大的禁忌。

來源

2011-05-30 17:48:30

謝謝，我將函數定義從循環移開。但我無法注意到任何區別。循環中沒有循環。第二個循環是在一個函數中定義的，只是通過點擊調用 – nomoral 2011-05-30 19:03:29

也許我應該使用更多的靜態html，而不是用javascript構建它？ – nomoral 2011-05-30 19:06:28

@nomoral：你是正確的先生，儘管我幾乎在任何情況下都支持我關於嵌套'for ... in'循環的評論。 – 2011-05-31 07:46:07

如何使下面的代碼更快？

回答

相關問題