Travail avec WebAssembly et C# : techniques avancées et optimisation

Travail avancé avec WebAssembly et C# : de la théorie à l'optimisation

WebAssembly (Wasm) est devenu une technologie clé pour exécuter du code haute performance dans le navigateur. Dans l'écosystème .NET, l'outil principal pour travailler avec Wasm est Blazor, mais pour résoudre des problèmes complexes, une compréhension approfondie des mécanismes internes est nécessaire. Dans cet article, nous aborderons des aspects avancés : l'optimisation du temps d'exécution, le transfert de structures de données complexes, le réglage fin de la compilation AOT et une interaction efficace avec JavaScript.

Cet article est destiné aux développeurs déjà familiers avec les bases de Blazor WebAssembly et souhaitant obtenir des performances et une flexibilité maximales pour leurs applications.

1. Optimisation des performances : AOT vs JIT et gestion de la mémoire

Par défaut, Blazor WebAssembly utilise un interpréteur .NET IL (MSIL) dans le navigateur. Pour les sections de code critiques en termes de performances, il est nécessaire de passer à la compilation AOT (Ahead-of-Time).

Configuration de la compilation AOT

Ajoutez le drapeau <RunAOTCompilation>true</RunAOTCompilation> dans le fichier projet (.csproj). Cela compilera votre code en bytecode Wasm natif, accélérant l'exécution de 5 à 10 fois, mais augmentant la taille de l'assembly.

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">  <PropertyGroup>    <TargetFramework>net8.0</TargetFramework>    <RunAOTCompilation>true</RunAOTCompilation>  </PropertyGroup></Project>

Gestion de la mémoire : évitez le marshaling

Chaque appel de C# vers JavaScript (et inversement) est une opération coûteuse. Pour transférer de grands tableaux de données, utilisez System.Buffers.ArrayPool<T> et la mémoire partagée via MonoWasmRuntime.

using System.Buffers;using System.Runtime.InteropServices;

public class MemoryOptimizer{    public static void ProcessLargeArray(int size)    {        // Location d'un tableau depuis le pool pour éviter la pression GC        int[] buffer = ArrayPool<int>.Shared.Rent(size);        try        {            // Votre travail intensif avec le tableau            for (int i = 0; i < size; i++)            {                buffer[i] = i * 2;            }        }        finally        {            ArrayPool<int>.Shared.Return(buffer);        }    }}

Profilage des performances

Utilisez les outils intégrés du navigateur (Chrome DevTools) pour profiler le code Wasm. Activez <WasmProfiling>true</WasmProfiling> dans la configuration du projet pour obtenir des traces de pile lisibles.

2. Interopérabilité JavaScript avancée : transfert d'objets complexes et appels sans copie

Le IJSRuntime standard sérialise les objets en JSON, ce qui est lent pour les grandes données. Utilisez le travail direct avec la mémoire via MonoWasmRuntime et System.Runtime.InteropServices.JavaScript.

Accès direct à la mémoire JS depuis C#

using System.Runtime.InteropServices.JavaScript;

public partial class WasmInterop{    // Importation d'une fonction JavaScript qui retourne un pointeur vers un tableau    [JSImport("getDataPointer", "main.js")]    public static partial nint GetDataPointer(int length);

    public static void ProcessExternalData(int length)    {        nint ptr = GetDataPointer(length);        // Conversion du pointeur en tableau managé sans copie        Span<byte> data = new Span<byte>((void*)ptr, length);                // Travail direct avec les données        for (int i = 0; i < data.Length; i++)        {            data[i] = (byte)(data[i] ^ 0xFF); // Exemple : inversion des bits        }    }}

Exportation de fonctions C# pour appel depuis JavaScript

public partial class ExportedFunctions{    [JSExport]    public static int Add(int a, int b)    {        return a + b;