Blazor Server应用读取大文件过慢：如何优化读取与展示？

首先明确：5MB、10万行的本地文件读取耗时20秒完全不正常，本地磁盘读取这类文件通常只需几十到几百毫秒，你的性能瓶颈集中在同步IO阻塞主线程、全量存储所有行、大量DOM节点渲染这三个环节，以下是针对性优化方案：

一、优化文件读取逻辑 #

1. 改用异步读取避免阻塞 #

Blazor Server基于单线程模型，同步IO操作会卡住整个应用的UI响应。替换同步的File.ReadLines为异步读取方式：

// 编码注册只需全局执行一次，比如在Program.cs中添加：
Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);

// 改写为异步读取方法，支持按需加载
public async Task LoadLogSegment(int startIndex, int count)
{
    try
    {
        Error_log.Clear();
        using var reader = new StreamReader(CommonClass.error_path, Encoding.GetEncoding("Windows-1254"));
        string? line;
        int currentLine = 0;

        // 跳过起始行之前的内容
        while (currentLine < startIndex && (line = await reader.ReadLineAsync()) != null)
        {
            currentLine++;
        }

        // 读取指定数量的行
        while (currentLine < startIndex + count && (line = await reader.ReadLineAsync()) != null)
        {
            Error_log.Add(line);
            currentLine++;
        }

        TotalLogLines = currentLine; // 记录当前已读取的总行数（可预计算总行数优化体验）
        Error_log_loaded = true;
        await InvokeAsync(StateHasChanged);
    }
    catch (Exception e)
    {
        // 避免错误日志写入目标文件引发循环错误，单独使用应用错误日志文件
        var errorLogPath = Path.Combine(Path.GetDirectoryName(CommonClass.error_path)!, "app_runtime_errors.log");
        using var sw = File.AppendText(errorLogPath);
        await sw.WriteLineAsync($"LoadLogSegment Error: {e.Message} | {DateTime.Now:yyyy-MM-dd HH:mm:ss}");
    }
}

2. 预计算总行数（可选） #

如果需要展示总行数或更精准的分页，可以单独异步计算总行数：

public async Task<int> GetTotalLogLines()
{
    int count = 0;
    using var reader = new StreamReader(CommonClass.error_path, Encoding.GetEncoding("Windows-1254"));
    while (await reader.ReadLineAsync() != null)
    {
        count++;
    }
    return count;
}

二、优化前端渲染性能 #

直接渲染10万行DOM节点会导致浏览器卡顿，甚至崩溃。使用Blazor内置的Virtualize组件实现虚拟滚动，只渲染当前可见区域的行：

<div style="height: 600px; overflow-y: auto; border: 1px solid #eee;">
    @if (TagService.Error_log_loaded)
    {
        <Virtualize 
            Items="@TagService.Error_log" 
            Context="logLine" 
            ItemSize="20" <!-- 每行预估高度，单位px -->
            OnItemsRequested="@LoadLogItems">
            <div class="log-line p-1 border-bottom">@logLine</div>
        </Virtualize>
    }
    else
    {
        <div class="d-flex justify-content-center p-3">
            <span>加载日志中...</span>
        </div>
    }
</div>

@code {
    private async ValueTask<ItemsProviderResult<string>> LoadLogItems(ItemsProviderRequest request)
    {
        // 每次请求时加载指定范围的行
        await TagService.LoadLogSegment(request.StartIndex, request.Count);
        // 如果已预计算总行数，替换为TagService.TotalLogLines
        return new ItemsProviderResult<string>(TagService.Error_log, TagService.TotalLogLines);
    }
}

三、额外优化建议 #

• 避免全量存储：不要把10万行全部存在TagService.Error_log列表中，按需加载的片段存储即可，减少内存占用。
• 动态文件监听：如果日志文件会实时更新，使用FileSystemWatcher监听文件变化，仅读取新增的行追加到列表，无需全量重新读取。
• 错误日志隔离：不要将读取错误写入目标日志文件，避免触发循环错误，单独维护应用运行时错误日志。

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