WPF项目中CefSharp高效传递大C# Float数组至JavaScript的方案咨询

核心思路：跳过字符串序列化，直接实现内存共享或二进制传递 #

你当前用字符串序列化20万长度的float数组，本质是把二进制数据转成文本再解析，开销极大。下面是几种可行的高性能方案：

1. 共享内存直接读写（最优，适合高频更新） #

利用CefSharp的进程间内存共享，让JS直接访问C#端的内存块，避免任何数据拷贝开销：

C#端实现

// 全局维护共享内存的指针、数组长度和内存大小
private IntPtr _sharedMemPtr;
private int _arrayLength;
private int _memSize;

// 初始化共享内存（只做一次）
public void InitSharedMemory(int arrayLength)
{
    _arrayLength = arrayLength;
    _memSize = arrayLength * sizeof(float); // float占4字节
    _sharedMemPtr = Marshal.AllocHGlobal(_memSize); // 分配非托管内存
}

// 更新数组到共享内存（每秒30次调用此方法）
public void UpdateSharedArray(float[] newData)
{
    if (newData.Length != _arrayLength) throw new ArgumentException("数组长度不匹配");
    // 直接把新数组拷贝到已分配的内存块，无序列化开销
    Marshal.Copy(newData, 0, _sharedMemPtr, _arrayLength);
}

// 向JS暴露内存信息的对象
public class SharedMemInfo
{
    public IntPtr MemAddress => _sharedMemPtr;
    public int MemSize => _memSize;
    public int ArrayLength => _arrayLength;
}

// 在CefSharp浏览器初始化时绑定对象
browser.JavascriptObjectRepository.Register("SharedMem", new SharedMemInfo(), isAsync: false);

JS端实现

// 绑定C#暴露的内存信息对象
const memInfo = await CefSharp.BindObjectAsync("SharedMem");
// 将共享内存映射为Float32Array，直接读取最新数据
const floatArray = new Float32Array(new Uint8Array(memInfo.MemSize).buffer);

// 每秒30次读取最新数据（根据你的更新频率调整）
setInterval(() => {
    // 直接使用floatArray，内存中的数据已经是最新的
    // 示例：读取第一个元素
    console.log(floatArray[0]);
}, 1000/30);

关键注意事项

• 内存释放：程序退出时必须调用Marshal.FreeHGlobal(_sharedMemPtr)，避免内存泄漏。
• 线程安全：如果C#端更新和JS端读取并发，建议用双缓冲机制：分配两块内存，更新A块时JS读B块，更新完成后切换指针，避免读写冲突。
• CefSharp配置：需要在初始化CefSettings时开启WebAssembly支持：

  var settings = new CefSettings();
  settings.CefCommandLineArgs.Add("enable-webassembly", "1");
  Cef.Initialize(settings);
  

2. 二进制消息传递（次优，实现更简单） #

如果共享内存的配置太复杂，可以用CefSharp的进程间消息直接传递二进制数组，跳过字符串序列化：

C#端实现

// 自定义消息处理器
public class CustomRenderHandler : IRenderProcessMessageHandler
{
    public void OnContextCreated(IWebBrowser browser, IBrowser chromiumBrowser, IFrame frame)
    {
        // 启用消息路由
        CefSharp.CefSharpSettings.LegacyJavascriptBindingEnabled = true;
    }
}

// 发送二进制数组到JS
public void SendFloatArray(float[] data)
{
    // 把float数组转成字节数组
    var byteBuffer = new byte[data.Length * sizeof(float)];
    Buffer.BlockCopy(data, 0, byteBuffer, 0, byteBuffer.Length);
    
    // 创建消息并发送到渲染进程
    var message = CefSharp.CefSharpMessageRouter.GetGlobal().CreateMessage("floatArrayUpdate");
    message.ArgumentList.Add(byteBuffer);
    browser.GetMainFrame().SendMessageToRenderProcess(message);
}

JS端实现

// 监听C#发来的二进制消息
CefSharp.AddMessageHandler("floatArrayUpdate", (byteBuffer) => {
    // 把字节数组转成Float32Array
    const floatArray = new Float32Array(new Uint8Array(byteBuffer).buffer);
    // 处理数据
});

3. 自定义序列化器（兼容现有绑定） #

如果不想改架构，可以自定义CefSharp的对象序列化器，直接把float数组序列化为二进制，替代默认的JSON字符串序列化：

• 实现IJsObjectSerializer接口，在序列化float数组时直接输出二进制数据。
• 注册序列化器到JavascriptObjectRepository，JS端接收后直接转成Float32Array。

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