Blazor WASM中IJSRuntime InvokeAsync反序列化性能优化求助

针对你遇到的Blazor WASM中从IndexedDB通过JSInterop反序列化大量对象的性能瓶颈，以下是具体的优化建议，按优先级排序：

1. 使用System.Text.Json源生成器消除反射开销 #

System.Text.Json默认的运行时反射序列化对于多属性对象和大量实例来说开销极大，源生成器可以提前编译序列化逻辑，性能提升非常显著。

步骤： #

• 创建序列化上下文类，标记需要序列化的类型：

[JsonSerializable(typeof(MyClass[]))]
internal partial class MyJsonSerializerContext : JsonSerializerContext
{
}

• 配置自定义序列化选项并关联源生成上下文：

// 注册为单例服务，全局复用
builder.Services.AddSingleton(_ => new JsonSerializerOptions
{
    PropertyNamingPolicy = null,
    PropertyNameCaseInsensitive = true,
    TypeInfoResolver = MyJsonSerializerContext.Default
});

• 手动反序列化时使用该上下文：

private readonly JsonSerializerOptions _jsonOptions;
private readonly IJSRuntime _js;

public MyService(JsonSerializerOptions jsonOptions, IJSRuntime js)
{
    _jsonOptions = jsonOptions;
    _js = js;
}

// 调用JS方法获取JSON字符串，再手动反序列化
var jsonString = await _js.InvokeAsync<string>("RetrieveData");
var data = JsonSerializer.Deserialize<MyClass[]>(jsonString, _jsonOptions);

2. 优化JS侧数据返回方式，直接返回JSON字符串 #

默认情况下，InvokeAsync<T>会先将JS对象序列化为JSON（由JSInterop内部处理），再反序列化为C#对象。让JS侧直接返回JSON字符串，可减少一次序列化步骤：

修改JS函数： #

async function RetrieveData() {
    const db = await openDB();
    const tx = db.transaction('store', 'readonly');
    const store = tx.objectStore('store');
    const index = store.index('myIndex');
    const results = await index.getAll();
    // 直接返回JSON字符串，避免JSInterop自动序列化
    return JSON.stringify(results);
}

3. 精准配置客户端JSON序列化选项 #

你之前只配置了服务端的序列化选项，客户端可通过注册JsonSerializerOptions单例来全局复用配置：

builder.Services.AddSingleton(new JsonSerializerOptions
{
    PropertyNamingPolicy = null,
    PropertyNameCaseInsensitive = true,
    // 可选：忽略空值进一步减少数据量
    IgnoreNullValues = true,
    // 可选：禁用注释和缩进提升效率
    AllowTrailingCommas = true,
    WriteIndented = false
});

4. 减少跨边界数据传输量 #

如果业务场景不需要完整的对象属性，在JS侧从IDB获取数据时只提取必要字段：

async function RetrieveData() {
    // ... 省略IDB查询逻辑
    const results = await index.getAll();
    // 只保留需要的属性
    const filteredResults = results.map(item => ({
        Id: item.Id,
        Name: item.Name,
        CreatedAt: item.CreatedAt,
        // 仅保留业务所需的47个属性中的子集
    }));
    return JSON.stringify(filteredResults);
}

5. 优化DateTime和Decimal类型的序列化 #

这两种类型是System.Text.Json反序列化的性能热点，可通过以下方式优化：

• DateTime：JS侧将日期转为毫秒时间戳（数字），C#侧通过属性转换处理：

  public class MyClass
  {
      public long CreatedAtTimestamp { get; set; }
      
      [JsonIgnore]
      public DateTime CreatedAt => DateTimeOffset.FromUnixTimeMilliseconds(CreatedAtTimestamp).DateTime;
  }
  

• Decimal：如果精度允许，JS侧转为数字存储；若需高精度，存储为字符串，避免自动转换带来的开销。

6. 分批加载数据 #

若业务允许，将1400个对象分批加载（如每次200个），避免单次反序列化的长时间阻塞：

JS侧分页查询： #

async function RetrieveData(page = 1, pageSize = 200) {
    const db = await openDB();
    const tx = db.transaction('store', 'readonly');
    const store = tx.objectStore('store');
    const index = store.index('myIndex');
    const totalCount = await index.count();
    // 分页获取数据
    const results = await index.getAll(null, pageSize, (page - 1) * pageSize);
    return JSON.stringify({
        Data: results,
        TotalCount: totalCount
    });
}

C#侧分批处理： #

public async Task<List<MyClass>> LoadDataInBatches()
{
    var allData = new List<MyClass>();
    int page = 1;
    const int pageSize = 200;
    
    while (true)
    {
        var jsonString = await _js.InvokeAsync<string>("RetrieveData", page, pageSize);
        var batchResult = JsonSerializer.Deserialize<BatchResult>(jsonString, _jsonOptions);
        
        allData.AddRange(batchResult.Data);
        if (allData.Count >= batchResult.TotalCount) break;
        
        page++;
    }
    
    return allData;
}

// 定义批量结果类
public class BatchResult
{
    public MyClass[] Data { get; set; }
    public int TotalCount { get; set; }
}

7. 尝试切换到Newtonsoft.Json（可选） #

如果System.Text.Json的优化仍未达标，可尝试使用Newtonsoft.Json，它在某些复杂对象场景下性能更优：

• 安装NuGet包：Newtonsoft.Json
• 手动反序列化：

var jsonString = await _js.InvokeAsync<string>("RetrieveData");
var data = JsonConvert.DeserializeObject<MyClass[]>(jsonString, new JsonSerializerSettings
{
    ContractResolver = new DefaultContractResolver { NamingStrategy = null },
    NullValueHandling = NullValueHandling.Ignore
});

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