jQuery FullCalendar获取事件优化

Question

我想知道是否有人可以给我一些指导来帮助优化我的jQuery完整日历代码.我遇到的问题是当我通过AJAX(> 25)获取大量事件时,浏览器停止并变得无响应,通常会导致向用户发送消息以中止脚本.我试图避免这个错误,我想知道我的功能是否可以做些什么来改善加载时间.

这是我正在运行的函数的副本:

//Load the Business Unit Calendar Events
function ajaxBUEvents(start, end){
    //Loop through the selected checked calendars
    $(selectBUCalendars()).each(function(i, cal){
        $.ajax({
            type: 'POST',
            data: {'startDate': start, 'endDate': end, 'buCals[]': cal}, 
            url: '<?= site_url('AJAX/calendar_ajax/get_cal_events'); ?>', 
            dataType: 'json',
            async: false,
            beforeSend: function(){
                $('#loading-dialog').dialog({minHeight: 100, width: 250}).dialog('open');
                $('#loading-dialog p').text('Loading '+cal+' Calendar Events');
            }, 
            success: function(calevents){
                $.each(calevents, function(i, calevent){
                    $('#calendar').fullCalendar('renderEvent', calevent, true); 
                }); 
            }
        });
    }); 
    $('#loading-dialog').dialog('close');
}

以下是返回的JSON示例,这只是一个事件.有时可能会返回50多个事件:

[{"id":4377,"title":"BWR - Lighting Affiliates Dinner - Actualized","start":1259874000,"end":1259888400,"className":"BWR Actualized","allDay":false,"editable":false}]

感谢您的帮助!

Answer 1

诀窍是使用addEventSource而不是renderEvent.因为renderEvent您添加的每个事件都会重新绘制整个日历.addEventSource添加您提供的源中的所有事件,然后对日历进行一次重绘.

success: function(calevents){
    $('#calendar').fullCalendar('addEventSource', calevents); 
}

我甚至为你做了两次复制,所以你可以检查性能上的差异.

慢速版本通过renderEvent添加50个事件(注意每个事件如何重绘整个日历)

http://jsbin.com/ewuka

快速版本通过addEventSource添加50个事件(请注意日历仅重绘一次)

http://jsbin.com/udode