JQuery UI производительность DatePicker на

Question

выберите

У меня есть экземпляр DatePicker JQuery UI здесь:

https://app.shvitz.com.au/en/listings/11-yoga-in-the-park

Подождите несколько секунд для того, чтобы загрузить на правой стороне страницы.

Я испытываю некоторые странные проблемы с производительностью при выборе дат. Вы можете просмотреть исходный код в calendar.js, но это соответствующая часть:

function onSelect(date, instance) { 
    var mDate = moment(date, "DD-MM-YYYY"); 
    var $timeslots = renderTimeslots(mDate); 
    $container.children('.timeslots-container').remove(); 
    $container.append($timeslots); 
} 

function renderTimeslots(date) { 
    if (!date) date = moment(calendar.datepicker('getDate').getTime()); 

    var times = availabilities.filter(function (a) { 
     return moment(a.start_time).startOf('day').isSame(date.startOf('day')); 
    }); 

    function availToPrice(a) { 
     function getPrice(a) { 
      if (!api.getShared()) return 66; 

      var left = a.capacity - a.bookings; 
      switch (left) { 
       case 1: 
        return 20; 
       case 2: 
        return 25; 
       case 3: 
        return 35; 
       case 4: 
        return 35; 
      } 
     } 

     var ret = '$' + (getPrice(a) * (a.duration/60)).toFixed(2); 
     var people = a.bookings + ' people'; 
     if (a.bookings == 0) { 
      people = 'Empty'; 
     } else if (a.bookings == 1) { 
      people = '1 person'; 
     } 
     return ret + ' - ' + people; 
    } 

    var timeslots = times.map(function (t) { 
     return $('<div class="clearfix switch-field"><input id="' + t.start_time + '" name="calendar-timeslots" type="radio" value="' + t.start_time + '"/> <label for="' + t.start_time + '" style="margin:0" class="btn btn-success calendar-timeslot">' + moment(t.start_time).format('hh:mm a') + '(' + availToPrice(t) + ')' + 
      '</label></div>'); 
    }); 
    if (onChange !== null) { 
     timeslots.forEach(function ($t) { 
      $t.children('input').click(function() { 
       onChange({ 
        'shared': api.getShared(), 
        'time': api.getTime() 
       }); 
      }); 
     }); 
    } 
    var $cont = $('<div class="timeslots-container"></div>'); 
    $cont.append(timeslots); 
    return $cont; 
} 

При нажатии на дату вы заметите задержку, прежде чем он меняет цвет на синий и временные интервалы оказываются ниже. Я бы оценил задержку как минимум на несколько сотен миллисекунд. Однако, когда я использую console.time для измерения времени, проведенного в функции onSelect, он обычно составляет около 20 мс, а худшее, что я видел, - 60 мс. Откуда эта дополнительная задержка, и как я могу ее исправить?

Answer 1

Jquery ui на самом деле имеет задержку для процессов, поэтому, если вы хотите оптимизировать свой ui, вы должны использовать html5 без jquery.