Поэтому я попытался отобразить рив-анимацию (страница «/») с помощью Blazor WASM (базовый шаблон). Когда я нажимаю на счетчик (страница "/counter") и возвращаюсь на индексную страницу (страница "/"), скажем, 20-кратная анимация действительно зависает, и, возможно, после 27-кратной анимации требуется 20 секунд, чтобы даже отобразить анимацию. Также мой процессор увеличился на 12%, а оперативная память увеличилась на 120 МБ после этих 27x. Я пытался использовать инструменты разработчика, но как новичок это было довольно бесполезно. Я вижу, что самая большая стоимость памяти - это рив-библиотека. Также в моем коде реализовано Dispose (см. ниже).
Мой вопрос: это что-то, что я делаю неправильно, или я должен зарегистрировать новую проблему в репозитории riv или, возможно, asp.net?
Index.razor:
@page "/"
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable
<canvas id = "canvas" width = "500" height = "500"></canvas>
@code {
IJSObjectReference? rivWrapper;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
rivWrapper = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Pages/Index.razor.js");
await rivWrapper.InvokeVoidAsync("createRive");
}
}
public async ValueTask DisposeAsync()
{
await rivWrapper!.DisposeAsync();
}
}
Индекс.razor.js:
export function createRive() {
const r = new rive.Rive({
src: 'bear.riv',
canvas: document.getElementById('canvas'),
autoplay: true,
});
}
индекс.html:
<script src = "https://unpkg.com/@rive-app/[email protected]"></script>
и веб-приложение: https://laftek.github.io/BlazorApp1/
Спасибо.
🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.
Здесь могут быть две проблемы:
v1.0.98
, поэтому я бы попробовал обновить до этой версии, и вы должны увидеть более стабильное потребление ресурсов в памяти.Надеюсь, это поможет некоторым!