Kendo MVC通过GroupPaging优化百万级Grid首屏加载过慢问题

一、GroupPaging分组按需加载实现（核心需求） #

当前性能瓶颈的核心原因是配置了ServerOperation(false)，会一次性拉取全量百万条数据做客户端分组/排序，直接导致首次加载超时。开启GroupPaging后仅首次加载分组头和聚合数据，展开指定分组时才加载组内数据，可将首次加载耗时降至秒级。

1. 调整Grid配置代码 #

<div>
    @(Html.Kendo().Grid<Portal.Data.Models.InfoModel>()
        .Name("gridSummary")
        .DataSource(dataSource => dataSource
            .Ajax()
            // 开启分组分页
            .GroupPaging(true)
            // 开启服务端操作，所有分组/排序/聚合逻辑转移到服务端执行
            .ServerOperation(true)
            // 按需设置每页展示的分组数量，不要过大
            .PageSize(20)
            .Aggregates(aggregates =>
            {
                aggregates.Add(p => p.OutstandingCount).Sum(); 
            })
            .Group(groups =>
            {
                groups.Add(p => p.OfficeNumber);
            })
            .Batch(true)
            .Sort(sort => sort.Add(column => column.Date))
            // 新增Grid数据读取接口
            .Read(read => read.Action("GridSummary_Read", "sample").Data("getSelectedDropdownValue"))
        )
        .Columns(columns =>
        {
            columns.Bound(c => c.OfficeState).Width(70).Title("xxxx");
            columns.Bound(c => c.OfficeNumber).Width(70).Title("zzzz");
            columns.Bound(c => c.OutstandingCount).Width(60).Title("yyyy");
        })
        // 可选：默认收起所有分组，避免展开自动加载
        .Groupable(g => g.CollapseAll(true))
    )
</div>

2. 新增下拉框值传递方法 #

在JS中新增方法，Grid请求时携带下拉框选中值：

function getSelectedDropdownValue() {
    return {
        selectedGrid: $("#samplegrid").val()
    }
}

3. 新增Grid读取控制器接口 #

引用Kendo.Mvc命名空间，使用内置的DataSourceRequest处理分组、分页、聚合请求：

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;

public async Task<IActionResult> GridSummary_Read([DataSourceRequest] DataSourceRequest request, string selectedGrid)
{
    try
    {
        // 根据下拉框选中值查询对应数据源，不要全量查询
        var query = _eService.GetInfoQueryable(selectedGrid);
        // 自动处理分组、分页、聚合逻辑，返回对应数据
        var result = await query.ToDataSourceResultAsync(request);
        return Json(result);
    }
    catch (Exception ex)
    {
        Log.Error($"Username: {User.Identity.Name} - Grid load failed: {ex}");
        return StatusCode(StatusCodes.Status500InternalServerError);
    }
}

二、其他额外提速方案 #

• 数据库层优化：给分组字段OfficeNumber、排序字段Date以及下拉框关联的过滤字段增加数据库索引，降低查询耗时
• 预聚合优化：如果分组聚合值（如OutstandingCount的Sum）允许非实时更新，可提前定时计算聚合结果存到专用表，首次加载分组头时直接读预计算值，无需实时统计
• 传输优化：服务端开启接口gzip/brotli压缩，可将传输体积降低70%以上
• 联动逻辑优化：页面初始化时不给Grid绑定空数据源，仅在下拉框选中值变更后再触发Grid的read请求，避免无效请求
• 渲染优化：关闭不必要的Grid功能，如列拖拽、单元格编辑（如果不需要），减少客户端渲染压力

内容的提问来源于stack exchange，提问作者Yonatan