如何確定我的JavaScript是否使用了太多資源（並幫助優化）

Question

這是非常低效還是看起來不錯？我如何測試它使用的資源？

$.easing.def = "easeOutBack"; 
     $(document).ready(function() { 
      var numResults = $("#scroll > div").size(); 
      var scrollSize = numResults * 264; 
      var stopSize = ((numResults - 6) * 264) * -1; 
      $("#scroll").width(scrollSize); 
      $("#page-left").hide(); 
      $("#page-right").click(function() { 
       var marginleft = parseInt(jQuery("#scroll").css("margin-left")); 
       if(marginleft > stopSize) { 
        $("#page-left").show(); 
        $(this).hide(); 
        $("#scroll").animate({"margin-left": "-=783px"}, 800, function() { 
         var marginleft = parseInt(jQuery("#scroll").css("margin-left")); 
         if(marginleft > stopSize) { 
          $("#page-right").show(); 
         } 
        }); 
       } 
      }); 
      $("#page-left").click(function() { 
       var marginright = parseInt(jQuery("#scroll").css("margin-left")); 
       if(marginright < -10) { 
        $("#page-right").show(); 
        $(this).hide(); 
        $("#scroll").animate({"margin-left": "+=783px"}, 800, function() { 
         var marginright = parseInt(jQuery("#scroll").css("margin-left")); 
         if(marginright < -10) { 
          $("#page-left").show(); 
         } 
        }); 
       } 
      }); 
     }); 

Answer 1

Chrome使您能夠拍攝堆快照。 DeveloperTools-> Profiles-> HeapSnapshots

您可以在不同的時間間隔拍攝快照以比較內存使用情況。 另一種選擇是支付一個http://www.softwareverify.com/javascript/memory/feature.html

Answer 2

我沒有看到任何理由爲什麼會消耗大量的資源。你只是左右做動畫，對吧？我想我會指出的一些更好的編碼習慣是將您重複使用的東西（如$("#scroll")）存儲在一個變量中，這樣您就不必每次都搜索DOM以獲取相同的內容，並且還可以選擇jQuery或$之一，除非您否則需要做。

我真正的問題是783究竟代表什麼。如果因爲您的屏幕寬度爲800像素，請記住，並非每個人都會以這種方式看到您的頁面。

至於性能測試部分，Rizwan的答案爲+1。