我有一个blazor wasm应用程序。我调用了一个JavaScript函数，它接收一个double数组。这是非常慢的，特别是当数组很大的时候。
下面是一个测试代码：
JavaScript（“test.js”）：

function testSumArray(array) {
    var t0 = performance.now();
    sumArray(array);
    var t1 = performance.now();
    console.log('From JS, time to sum: ' + (t1 - t0) / 1000 + ' s');
}

function sumArray(array) {
    var i;
    var s = 0;
    for (i = 0; i < array.length; i++) {
        s += array[i];
    }
    return s;
}

字符串
C#代码（index.razor）：

@page "/"
@inject IJSRuntime JSRuntime;

@using System.Text
@using BlazorWasmOnlyTest.Shared
<h1>Hello, world!</h1>

Welcome to your new app.

<div class="container">
    <div class="row mb-2">
        <div class="col">
            <button class="btn btn-primary" @onclick="@TestInvokeJS">Test invoke js</button>
        </div>
    </div>
</div>

@code {
    private int _id;
    private string _status = "";
    private DataInputFileForm _dataInputFileForm;

    private async void TestInvokeJS()
    {
        var n = 100000;
        var array = new double[n];
        for (int i = 0; i < n; i++)
        {
            array[i] = i;
        }
        var w = new System.Diagnostics.Stopwatch();
        w.Start();
        await JSRuntime.InvokeVoidAsync("testSumArray",array);
        w.Stop();
        Console.WriteLine($"C# time to invoke js and sum: {w.ElapsedMilliseconds/1000:F3} s");
    }
}

型
对于completion -index.html：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorWasmOnlyTest</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <script src="js/test.js"></script>
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

型
在我的机器上运行一次，会得到以下输出：
从JS，求和时间：0.0037800000282004476 s
C#调用js和sum的时间：7.000 s
这似乎是一个相当高的开销时间.有没有人知道是否有一种方法可以加快这一速度（真实的函数可以做一些我目前在Blazor/C#中无法做的事情-更新Leaflet中的层）
编辑：我已经尝试了here描述的同步方法，在执行时间上没有任何差异。
c#：

var jsInProcess2 = (IJSInProcessRuntime)JSRuntime;
    jsInProcess2.InvokeVoid("testSumArray", array);

型
js：JavaScript与上面的testSumArray相同。
编辑2：
我尝试通过同步互操作传递JSON字符串：
c#：

var jsInProcess3 = (IJSInProcessRuntime)JSRuntime;
    var array_json3 = System.Text.Json.JsonSerializer.Serialize(array);
    jsInProcess3.InvokeVoid("testSumArray3", array_json);

型
js：

function testSumArray3(array_json_string) {
    var t0 = performance.now();
    var array = JSON.parse(array_json_string);
    var s = sumArray(array);
    var t1 = performance.now();
    console.log('From JS, time to sum: ' + (t1 - t0) / 1000 + ' s');
    console.log('Array sum = ' + s);
}

型
使用JSON字符串和Unmarshalled js interopcall：
c#：

var jsInProcess4 = (Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime)JSRuntime;
    var array_json4 = System.Text.Json.JsonSerializer.Serialize(array);
    jsInProcess4.InvokeUnmarshalled<string,string>("testSumArray4", array_json4);

型
js：

function testSumArray4(array_mono_json_string) {
    var t0 = performance.now();
    const array_json_string = BINDING.conv_string(array_mono_json_string);
    var array = JSON.parse(array_json_string);
    var s = sumArray(array);
    var t1 = performance.now();
    console.log('From JS, time to sum: ' + (t1 - t0) / 1000 + ' s');
    console.log('Array sum = ' + s);
}

型
所有的方法都需要大约相同的时间，6-7秒完成（在JavaScript函数中大约0.0015-0.006秒）。
我试图弄清楚如何调用unmarshalled传递一个数组，使用BINDING.mono_array_to_js_array在这个file中找到，但抛出了一个长错误。c#：

var sum = jsInProcess4.InvokeUnmarshalled<double[],double>("testSumArray5",array)

型
js：

function testSumArray5(array_in) {
    var t0 = performance.now();
    var array = BINDING.mono_array_to_js_array(array_in);
    console.log(array[0]);
    var s = sumArray(array);
    var t1 = performance.now();
    console.log('From JS, time to sum: ' + (t1 - t0) / 1000 + ' s');
    console.log('Array sum = ' + s);
    return s;
}

型

编辑2024-01-02

似乎（至少在NET 8中）这不再是问题了，因为默认的IJSRuntime.InvokeVoidAsync似乎（几乎）一样快，至少从NET 7开始，InvokeUnmarshalled被标记为[System.Obsolete("This method is obsolete. Use JSImportAttribute instead.")]。但是我不理解JSImportAttribute，我在没有任何属性的情况下几乎一样快。

刚刚找到了在js中使用.net字节或浮点数组的方法。

c#：

[Inject] //Injected JSRuntime from Blazor DI
private IJSRuntime JSRuntime { get; set; }

byte[] bytes1;
float[] floats2;
...
if (JSRuntime is IJSUnmarshalledRuntime webAssemblyJSRuntime)
{
    webAssemblyJSRuntime.InvokeUnmarshalled<byte[], float[], object> 
        ("downloadArray", bytes1, floats2);
}

字符串

JavaScript：

function downloadArray(bytes1, floats2) {
    // Easy way to convert Uint8 arrays
    var byteArray = Blazor.platform.toUint8Array(bytes1);

    // Adapted method above for float32
    var m = floats2 + 12;
    var r = Module.HEAP32[m >> 2]
    var j = new Float32Array(Module.HEAPF32.buffer, m + 4, r);
}

型
这里的结果是在合理的时间段内分别从byte[]和float[]得到的Uint8Array和Float32Array对象。
可能有任何方法可以获得js数组，因为你可以从ArrayBuffers访问整个.net堆，比如Module.HEAPU8（Uint8Array内的堆）或Module.HEAPF32（Float32Array内的堆），并且可以通过指针从ReplikeUnmarshalled参数轻松访问对象。

Blazor wasm调用JavaScript，传递大数组很慢

编辑2024-01-02

1条答案

c#：

JavaScript：

相关问题

热门标签

最新问答