首頁猿問 Blazor wasm 調(diào)用...

Blazor wasm 調(diào)用 javascript，傳遞大數(shù)組非常慢

JavaScript

一只斗牛犬 2023-03-03 15:33:23

我有一個 blazor wasm 應(yīng)用程序。因?yàn)槲艺谡{(diào)用一個接收雙精度數(shù)組的 javascript 函數(shù)。這非常慢，尤其是當(dāng)數(shù)組很大時(shí)。有關(guān)測試，請參見以下代碼：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"); }}并完成 - 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>運(yùn)行一次會在我的機(jī)器上產(chǎn)生以下輸出：從 JS，求和時(shí)間：0.0037800000282004476 sC# 調(diào)用 js 和總和的時(shí)間：7.000 秒這似乎是一個相當(dāng)高的開銷時(shí)間......有誰知道是否有辦法加快這個速度（真正的功能做了我目前在 Blazor/C# 中不能做的事情 - 在 Leaflet 中更新一個層）

查看完整描述

1 回答

斯蒂芬大帝

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個贊

剛找到在 js 中使用 .net 字節(jié)或浮點(diǎn)數(shù)組的方法。

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);

}

腳本：

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);

}

這里的結(jié)果是在合理的時(shí)間段內(nèi)分別來自 byte[] 和 float[] 的 Uint8Array 和 Float32Array 對象。

可能有任何獲取 js 數(shù)組的方法，因?yàn)槟梢詮?ArrayBuffers 訪問整個 .net 堆，例如 Module.HEAPU8（Uint8Array 內(nèi)的堆）或 Module.HEAPF32（Float32Array 內(nèi)的堆），并且可以通過 InvokeUnmarshalled 參數(shù)的指針輕松訪問對象.

反對回復(fù) 2023-03-03