Blazor中JavaScript调用批处理：定义、实现及性能疑问

什么是批处理？ #

批处理就是把原本要多次执行的JavaScript调用，打包成一个单一请求，一次性从C#代码发送到JavaScript运行时，而非每次操作单独发起跨边界调用。

Blazor里C#（.NET运行时）和JavaScript（浏览器运行时）属于不同执行环境，每次互操作都要经历对象序列化、跨运行时通信、反序列化、上下文切换这些固定开销。批处理的核心就是把N次这类开销压缩成1次，减少重复消耗。

如何实现JS调用批处理？ #

根据场景不同，有两种常见实现方式：

1. 通用任务批处理（支持多种JS方法） #

适合需要调用多个不同JS函数的场景，把每个任务的方法名和参数打包成集合，传给统一的JS处理函数：

C# 端代码

// 定义描述JS任务的模型
public class JsBatchTask
{
    public string MethodName { get; set; }
    public object[] Args { get; set; }
}

// 在组件/服务中打包任务
var batchTasks = new List<JsBatchTask>
{
    new JsBatchTask { MethodName = "updateElementText", Args = new object[] { "title", "新页面标题" } },
    new JsBatchTask { MethodName = "toggleElementVisibility", Args = new object[] { "sidebar", true } },
    new JsBatchTask { MethodName = "setElementStyle", Args = new object[] { "content", "fontSize", "16px" } }
};

// 一次性调用JS批处理函数
await JSRuntime.InvokeVoidAsync("processJsBatch", batchTasks);

JavaScript 端代码

// 统一的批处理执行函数
window.processJsBatch = function(tasks) {
    tasks.forEach(task => {
        // 校验方法存在性，避免报错
        if (typeof window[task.MethodName] === 'function') {
            window[task.MethodName](...task.Args);
        }
    });
};

// 原有单个JS方法保持不变
window.updateElementText = function(elementId, text) {
    const elem = document.getElementById(elementId);
    if (elem) elem.textContent = text;
};

window.toggleElementVisibility = function(elementId, isVisible) {
    const elem = document.getElementById(elementId);
    if (elem) elem.style.display = isVisible ? 'block' : 'none';
};

window.setElementStyle = function(elementId, prop, value) {
    const elem = document.getElementById(elementId);
    if (elem) elem.style[prop] = value;
};

2. 特定操作的批量处理（针对同一种JS操作） #

如果是重复执行同一种JS操作（比如批量更新DOM元素文本），直接把所有参数打包成集合，传给专门的批量处理函数，更简洁高效：

C# 端代码

// 打包所有元素更新信息
var textUpdates = new List<ElementTextUpdate>
{
    new ElementTextUpdate { ElementId = "item1", Text = "第一条内容" },
    new ElementTextUpdate { ElementId = "item2", Text = "第二条内容" },
    new ElementTextUpdate { ElementId = "item3", Text = "第三条内容" }
};

// 调用批量更新函数
await JSRuntime.InvokeVoidAsync("batchUpdateElementTexts", textUpdates);

// 对应的模型类
public class ElementTextUpdate
{
    public string ElementId { get; set; }
    public string Text { get; set; }
}

JavaScript 端代码

window.batchUpdateElementTexts = function(updates) {
    updates.forEach(update => {
        const elem = document.getElementById(update.ElementId);
        if (elem) elem.textContent = update.Text;
    });
};

批处理能提升性能吗？还是浪费时间？ #

这绝对不是浪费时间，性能提升幅度取决于原本的调用次数：

• 如果是单次或3次以内的调用：批处理收益微乎其微，甚至因序列化额外集合有极微小开销，但可忽略，没必要特意做批处理。
• 如果是几十次甚至上百次的频繁调用：批处理能把跨运行时固定开销从N次降到1次，性能提升非常明显——比如100次单独调用的总耗时可能是1次批处理的几十倍，具体数值依操作复杂度而定。

此外，批处理还能减少JS引擎上下文切换次数，让DOM操作更连贯，间接提升页面响应速度。

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