Анимация Rive очень медленная (в Blazor WASM) после перенаправления на страницу с анимацией (даже с реализованным удалением)

Поэтому я попытался отобразить рив-анимацию (страница «/») с помощью 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 поддерживает объектно-ориентированное программирование.


58
1

Ответ:

Решено

Здесь могут быть две проблемы:

  1. В последнем выпуске была исправлена ​​утечка памяти, v1.0.98, поэтому я бы попробовал обновить до этой версии, и вы должны увидеть более стабильное потребление ресурсов в памяти.
  2. При использовании среды выполнения Web JS вам необходимо убедиться, что вы очищаете созданный экземпляр Rive. Под капотом создание экземпляра Rive порождает ряд объектов C++ со стороны WASM, и их необходимо явно очищать, например, при переходе по страницам. Подробнее здесь: https://help.rive.app/runtimes/overview/web-js#4.-clean-up-rive

Надеюсь, это поможет некоторым!