ASP.NET Core Blazor JavaScript birlikte çalışabilirliği (JS birlikte çalışma) en iyi performans yöntemleri

.NET ve JavaScript arasındaki çağrılar ek yük gerektirir çünkü:

• Çağrılar zaman uyumsuz.
• Parametreler ve dönüş değerleri, .NET ve JavaScript türleri arasında anlaşılması kolay bir dönüştürme mekanizması sağlamak için JSON serileştirilmiştir.

Ayrıca, sunucu tarafı Blazor uygulamalar için bu çağrılar ağ üzerinden geçirilir.

Aşırı ayrıntılı aramalardan kaçının

Her çağrı biraz ek yük içerdiğinden, çağrı sayısını azaltmak değerli olabilir. Bir öğe koleksiyonunu tarayıcının localStorageiçinde depolayan aşağıdaki kodu göz önünde bulundurun:

private async Task StoreAllInLocalStorage(IEnumerable<TodoItem> items)
{
    foreach (var item in items)
    {
        await JS.InvokeVoidAsync("localStorage.setItem", item.Id, 
            JsonSerializer.Serialize(item));
    }
}

Yukarıdaki örnek, her öğe için ayrı JS bir birlikte çalışma çağrısı yapar. Bunun yerine, aşağıdaki yaklaşım birlikte çalışma işlemini JS tek bir çağrıya düşürür:

private async Task StoreAllInLocalStorage(IEnumerable<TodoItem> items)
{
    await JS.InvokeVoidAsync("storeAllInLocalStorage", items);
}

Karşılık gelen JavaScript işlevi, tüm öğe koleksiyonunu istemcide depolar:

function storeAllInLocalStorage(items) {
  items.forEach(item => {
    localStorage.setItem(item.id, JSON.stringify(item));
  });
}

Uygulamalar için Blazor WebAssembly tek tek JS birlikte çalışma çağrılarının tek bir çağrıya aktarılması genellikle yalnızca bileşen çok sayıda JS birlikte çalışma çağrısı yaptığında performansı önemli ölçüde artırır.

Zaman uyumlu çağrıların kullanımını göz önünde bulundurun

.NET’ten JavaScript’i çağırma

Bu bölüm yalnızca istemci tarafı bileşenleri için geçerlidir.

JS Interoperabilite çağrıları, çağrılan kodun senkron veya asenkron olmasına bakılmaksızın asenkron olarak gerçekleştirilir. Çağrılar, bileşenlerin sunucu tarafı ve istemci tarafı işleme modları arasında uyumlu olduğundan emin olmak için zaman uyumsuz olarak yapılır. Sunucuda, tüm JS birlikte çalışma çağrıları bir ağ bağlantısı üzerinden gönderildiğinden asenkron olmalıdır.

Bileşeninizin yalnızca WebAssembly üzerinde çalıştığından emin olduğunuzda, senkronize birlikte çalışma çağrıları yapmayı seçebilirsiniz. Bu, zaman uyumsuz çağrılar yapmaktan biraz daha az işlem yüküne sahiptir ve sonuçları beklerken ara durum olmadığından daha az render döngüsüne neden olabilir.

İstemci tarafı bileşeninde .NET'ten JavaScript'e eşzamanlı bir çağrı yapmak için, IJSRuntime öğesini IJSInProcessRuntime tipine dönüştürerek JS etkileşim çağrısını gerçekleştirin.

@inject IJSRuntime JS

...

@code {
    protected override void HandleSomeEvent()
    {
        var jsInProcess = (IJSInProcessRuntime)JS;
        var value = jsInProcess.Invoke<string>("javascriptFunctionIdentifier");
    }
}

.NET 5 veya daha yeni istemci tarafı bileşenleriyle çalışırken, IJSObjectReference yerine IJSInProcessObjectReference'i zaman uyumlu olarak kullanabilirsiniz. IJSInProcessObjectReference IAsyncDisposable / IDisposable uygular ve aşağıdaki örnekte gösterildiği gibi bellek sızıntısını önlemek için çöp toplama için atılmalıdır:

@inject IJSRuntime JS
@implements IDisposable

...

@code {
    ...
    private IJSInProcessObjectReference? module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var jsInProcess = (IJSInProcessRuntime)JS;
            module = await jsInProcess.Invoke<IJSInProcessObjectReference>("import", 
                "./scripts.js");
            var value = module.Invoke<string>("javascriptFunctionIdentifier");
        }
    }

    ...

    void IDisposable.Dispose()
    {
        if (module is not null)
        {
            await module.Dispose();
        }
    }
}

Önceki örnekte, bir JSDisconnectedException uygulamada kaybedilecek bir BlazorSignalR devresi olmadığından modül atma sırasında bir etkilenme söz konusu değildir. Daha fazla bilgi için bkz. ASP.NET Core Blazor JavaScript interoperabilite (JSinterop).

JavaScript’ten .NET’i çağırma

Bu bölüm yalnızca istemci tarafı bileşenleri için geçerlidir.

JS Interoperabilite çağrıları, çağrılan kodun senkron veya asenkron olmasına bakılmaksızın asenkron olarak gerçekleştirilir. Çağrılar, bileşenlerin sunucu tarafı ve istemci tarafı işleme modları arasında uyumlu olduğundan emin olmak için zaman uyumsuz olarak yapılır. Sunucuda, tüm JS birlikte çalışma çağrıları bir ağ bağlantısı üzerinden gönderildiğinden asenkron olmalıdır.

Bileşeninizin yalnızca WebAssembly üzerinde çalıştığından emin olduğunuzda, senkronize birlikte çalışma çağrıları yapmayı seçebilirsiniz. Bu, zaman uyumsuz çağrılar yapmaktan biraz daha az işlem yüküne sahiptir ve sonuçları beklerken ara durum olmadığından daha az render döngüsüne neden olabilir.

JavaScript'ten .NET'e zaman uyumlu bir çağrı yapmak için istemci tarafı bileşeninde DotNet.invokeMethodyerine DotNet.invokeMethodAsync kullanın.

Zaman uyumlu çağrılar şu durumlarda çalışır:

• Bileşen yalnızca WebAssembly'de yürütülmeye yönelik olarak işlenir.
• Çağrılan işlev zaman uyumlu olarak bir değer döndürür. İşlev bir async yöntem değildir ve .NET Task veya JavaScript Promisedöndürmez.

JavaScript [JSImport]/[JSExport] interop kullanımı

JavaScript [JSImport]/[JSExport] birlikte çalışma, Blazor WebAssembly uygulamaları için, .NET 7'de ASP.NET Core'dan önceki çerçeve sürümlerinde birlikte çalışma API'sine göre JS gelişmiş performans ve kararlılık sunar.

Daha fazla bilgi için bkz: ASP.NET Core ile JavaScript JSImport/JSExport birlikte çalışma Blazor.