提高jquery/javascript網頁邏輯的性能

Question

編輯：我也在建議後，如果有更好的方式去這個？

我有一個顯示用戶填寫時間表的網頁。 時間表爲一個月，所以它有多少行 和5列數據，正常小時，延長小時，班次 假期小時和總數。

我有一個下拉列表，允許用戶選擇月份 和年文本框。

當他們選擇一個月份時，代碼將會忽略底部的 行，如果它們不是必需的，由於不能說31天爲 的示例。它還會根據是否是週末（不同顏色）設置每個行的背景顏色。

問題是當選擇月份時需要3-4秒到 運行代碼並且因爲他們不知道 發生了什麼而運行該代碼令人討厭。

有什麼辦法可以改善這種情況，你可以看到嗎？代碼 如下所示。

$('[id$=lstMonth]').change(function() { 
     MonthChange(); 
    });   
}); 

function MonthChange() { 

    var month = parseInt($('[id$=lstMonth]').val())-1; 
    var year = $('[id$=txtYear]').val(); 
    var daysInMonth = GetDaysInMonth(month, year); 
    var day, dte, bgcolor; 

    for(day=28; day<=31; day+=1) { 
     if(day > daysInMonth) 
      DisableRow(day); 
     else 
      EnableRow(day); 
    } 

    for(day=1; day<=daysInMonth; day+=1) { 
     dte = GetDate(day, month, year); 
     bgcolor = GetInputFieldColor(dte, false); 
     SetBackgroundColor(day, bgcolor); 
    } 
} 

function SetBackgroundColor(day, bgcolor) { 
    var selector = '[id$=txtNormal' + day + ']'; 

    $(selector).css("background-color", bgcolor); 
    $(selector).parent().css("background-color", bgcolor); 

    selector = '[id$=txtExtended' + day + ']'; 
    $(selector).css("background-color", bgcolor); 
    $(selector).parent().css("background-color", bgcolor); 

    selector = '[id$=txtShift' + day + ']'; 
    $(selector).css("background-color", bgcolor); 
    $(selector).parent().css("background-color", bgcolor); 

    selector = '[id$=txtHoliday' + day + ']'; 
    $(selector).css("background-color", bgcolor); 
    $(selector).parent().css("background-color", bgcolor); 

    selector = '[id$=txtTotal' + day + ']'; 
    $(selector).css("background-color", bgcolor); 
    $(selector).parent().css("background-color", bgcolor); 
} 

function DisableRow(day) { 
    var selector = '[id$=txtNormal' + day + ']'; 

    $(selector).css("background-color", "red"); 
} 

function EnableRow(day) { 
    var selector = '[id$=txtNormal' + day + ']'; 

    $(selector).css("background-color", "blue"); 
} 

Answer 1

您正在全部使用您的代碼，屬性選擇器而不指定元素類型。

這是沒有得到很好的執行，因爲所有的DOM元素進行檢查，例如：

您同時還使用endsWith [ID $ = XXX]這是真的需要你的情況？

我會考慮重新編寫SetBackgroundColor功能，這也爲可讀性：

function SetBackgroundColor(day, bgcolor) { 
    var types = ['Normal', 'Extended', 'Shift', 'Holiday']; 

    $.each(types, function(index, type){ 
    var selector = 'input[id$=txt' + type + day + ']'; // change input to your 
                 // element type 
       //'#txt' + type + day; or if you don't need the endsWith selector 
    $(selector).css("background-color", bgcolor) 
       .parent() 
       .css("background-color", bgcolor); 
    // 1 selector call, and using chaining 
    }); 
} 

Answer 2

function SetBackgroundColor(day, bgcolor) { 
     var selector = '[id$=txtNormal' + day + ']';  
     $(selector).css("background-color", bgcolor); 
     $(selector).parent().css("background-color", bgcolor); 
} 

=>

function SetBackgroundColor(day, bgcolor) { 
     var selector = '#txtNormal' + day; 
     var obj = $(selector); 
     obj.css("background-color", bgcolor); 
     obj.parent().css("background-color", bgcolor); 
} 

有很多tips如何改進jQuery的性能。

Answer 3

我會用profiler in Firebug上看到的時間在代碼中度過的。這裏的another thread有一些關於如何使用它的解釋。

Answer 4

bgcolor = GetInputFieldColor(dte, false); 
SetBackgroundColor(day, bgcolor); 

我建議加入得到...和...設置功能於一體，其獲得DOM選擇唯一的。

Answer 5

我猜測，有前綴txt的字段都是文本框？然後，如果您爲必須使用建議標識提取的元素指定標記名稱，那麼您的CSS選擇器將會更加高效。事情是這樣的：

selector = 'input[id$=txtExtended' + day + ']'; 

然後鏈中的不同操作在一起，使你獲取的每一個元素只有一次像CMS提出了他的答案。

指定沒有標籤名稱的問題是，jQuery必須提取所有元素並檢查它們的id屬性是否與選擇器相對應。如果您指定標籤名稱，則可以使用getElementsByTagName，並且只會獲取具有指定標籤名稱的元素。

另一個性能提升是將給定元素搜索爲另一個元素的子元素。你可以把它比作指定一個特定的「範圍」中的jQuery應搜索給定的選擇這樣的匹配的所有元素：

$('input[id$=txtExtended' + day + ']', $element); 

如果不提高性能的話，你可以張貼了一定的HTML代碼段排，可以更容易地看到性能問題的位置。

Answer 6

如果您正在選擇的所有元素都是相同類型，則在屬性選擇器前加前綴。這將加速比賽。

e.g

$('input[id$=something]')