fullcalendar event rendering performance issue

Question

Итак, в основном все мои события (есть мин. 360 из них) имеют team1 vs. team2 или - vs. team2 или team1 vs. - заполнители. И при первоначальных событиях рендеринга меняется цвет в зависимости от того, имеет ли событие одну или две команды. Оранжевый цвет для одной команды и зеленый для двух команд. Кроме того, событие меняет цвет при нажатии.

Но в основном я заинтересован в повышении производительности с помощью событий рендеринга.

Эффективность рендеринга в полноэкранном режиме очень плохая, и я не смог найти решение этой проблемы.

Так вот мой код:

eventRender: function (event, element) { 
       $(element).append((event.teams[0] != null ? event.teams[0] : '-') + '</br> vs. </br>' + (event.teams[1] != null ? event.teams[1] : '-')); 
       if (event.teams.length === 1) { 
        $(element).css('background', 'orange'); 
       } 
       else if (event.teams.length > 1) { 
        $(element).css('background', 'green'); 
       } 
      } 

Моя главная проблема в том, что, когда я нажимаю на события, чтобы изменить его цвет, скрипт автоматически переходит к событию eventRender или eventAfterRender, и его поведение в точности как for statement - он выполняет итерацию по событиям, а затем делает вещи, которые я хочу делать с отдельным событием, но только тогда, когда цикл попадает на событие с кликом.

Кроме того, в eventClick я назвал $('#myCalendar').fullcalendar('updateEvent',event), и я думаю, что есть ошибка, потому что он автоматически переходит в eventAfterRender или eventRender, снова итерации по коллекции целых событий.

Даже жесткий параметр 'updateEvent' должен дать команду fullCalendar обновить/отобразить только конкретное событие.

У кого-нибудь есть совет по этой теме?

Answer 1

В исходном коде fullcalendars (по крайней мере, в моей версии) есть обработчик renderEvent, который вызывает функцию reportEvents, которая является узким местом производительности. Я работал над этой проблемой, добавив обработку исходных кодов события массового рендеринга.

Я написал короткую функцию:

function massRenderEvents(events, stick) { 
    var i; 

    for (i = 0; i < events.length; i += 1) { 
     normalizeEvent(events[i]); 
     if (!events[i].source) { 
      if (stick) { 
       stickySource.events.push(events[i]); 
       events[i].source = stickySource; 
      } 
      cache.push(events[i]); 
     } 
    } 

    reportEvents(cache); 
} 

Под "EventManager" -функции, и добавить его на экспорт EventManagers, как:

t.massRenderEvents = massRenderEvents; 

Теперь для каждой партии оказываемых событий, тяжелый и медленный reportEvents вызывается только один раз. Обратите внимание, что функция massRenderEvents очень похожа на исходную функцию renderEvent.

Answer 2

Я изменил

$("#calendar").fullCalendar('renderEvent', eventData1, true); 

в

$("#calendar").fullCalendar('addEventSource', eventData1, true); 

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

Главное отличие между renderEvent и addEventSource заключается в том, что первый пытается взаимодействовать с календарем, когда даже одно созданное событие занимает много времени из-за регулярной функции обратного вызова, а второе отправляет ведро событий JSON в календарь, требуется только одна функция обратного вызова, которая повышает производительность и занимает меньше времени.