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

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

=＆GT;

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 2

您正在使用所有代码，属性选择器而不指定元素类型。

效果不佳，因为所有您的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 3

我猜这个带有前缀txt的字段都是文本框？如果为必须使用建议ID提取的元素指定标记名称，那么CSS选择器将更有效。像这样：

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

然后将不同的操作链接在一起，这样你只需要像CMS在答案中提出的那样获取每个元素一次。

指定无标记名称的问题是jQuery必须获取所有元素并检查它们的id属性是否与选择器对应。如果指定标记名称，则可以使用getElementsByTagName，并且仅提取具有指定标记名称的元素。

另一个性能提升是将给定元素作为另一个元素的子元素进行搜索。您可以将其与指定某个“范围”进行比较，其中jQuery应搜索与给定选择器匹配的所有元素，如下所示：

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

如果这不能提高性能，您可以发布某一行的HTML代码段，那么就会更容易看到性能问题所处的位置。

Answer 4

我会使用profiler in Firebug来查看代码中花费的时间。这是another thread，其中包含有关如何使用它的一些解释。

Answer 5

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

我建议将Get ...和Set ...函数合并为一个，它只获取DOM选择器。

Answer 6

如果您选择的所有元素属于同一类型，则为属性选择器添加前缀。这将加速比赛。

e.g

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

提高jquery / javascript网页逻辑的性能

6 个答案: