praktik terbaik performa inti Blazor ASP.NET

Blazor dioptimalkan untuk performa tinggi dalam sebagian besar skenario antarmuka pengguna aplikasi yang realistis. Namun, performa terbaik tergantung pada pengembang yang mengadopsi pola dan fitur yang benar.

Nota

Contoh kode di dalam node artikel ini mengadopsi tipe referensi nullable (NRTs) dan analisis statis null-state dari kompilator .NET, yang didukung di ASP.NET Core pada .NET 6 atau yang lebih baru.

Kompilasi pendahuluan (AOT)

Kompilasi ahead-of-time (AOT) mengkompilasi Blazor kode .NET aplikasi langsung ke WebAssembly asli untuk eksekusi langsung oleh browser. Aplikasi yang dikompilasi AOT menghasilkan aplikasi yang lebih besar yang membutuhkan waktu lebih lama untuk diunduh, tetapi aplikasi yang dikompilasi AOT biasanya memberikan performa runtime yang lebih baik, terutama untuk aplikasi yang menjalankan tugas intensif CPU. Untuk informasi selengkapnya, lihat alat build ASP.NET Core Blazor WebAssembly dan kompilasi awalan (AOT).

Metrik dan pelacakan

Metrik dan kemampuan pelacakan membantu Anda memantau dan mendiagnosis performa aplikasi, melacak interaksi pengguna, dan memahami perilaku komponen di lingkungan produksi.

Konfigurasi

Untuk mengaktifkan Blazor metrik dan pelacakan di aplikasi Anda, konfigurasikan OpenTelemetry dengan meter dan sumber aktivitas berikut dalam file aplikasi Program tempat layanan terdaftar:

builder.Services.ConfigureOpenTelemetryMeterProvider(meterProvider =>
{
    meterProvider.AddMeter("Microsoft.AspNetCore.Components");
    meterProvider.AddMeter("Microsoft.AspNetCore.Components.Lifecycle");
    meterProvider.AddMeter("Microsoft.AspNetCore.Components.Server.Circuits");
});

builder.Services.ConfigureOpenTelemetryTracerProvider(tracerProvider =>
{
    tracerProvider.AddSource("Microsoft.AspNetCore.Components");
    tracerProvider.AddSource("Microsoft.AspNetCore.Components.Server.Circuits");
});

Pengukur kinerja

Untuk informasi selengkapnya tentang pengukur performa berikut, lihat metrik bawaan ASP.NET Core.

Microsoft.AspNetCore.Components meter:

• aspnetcore.components.navigate: Melacak jumlah total perubahan rute di aplikasi.
• aspnetcore.components.handle_event.duration: Mengukur durasi pemrosesan peristiwa browser, termasuk logika bisnis.

Microsoft.AspNetCore.Components.Lifecycle meter:

• aspnetcore.components.update_parameters.duration: Mengukur durasi parameter komponen pemrosesan, termasuk logika bisnis.
• aspnetcore.components.render_diff.duration: Melacak durasi rendering batch.
• aspnetcore.components.render_diff.size: Melacak ukuran kelompok pemrosesan.

Microsoft.AspNetCore.Components.Server.Circuits meter:

Di aplikasi sisi Blazor server, metrik khusus sirkuit tambahan meliputi:

• aspnetcore.components.circuit.active: Menunjukkan jumlah sirkuit aktif yang saat ini dalam memori.
• aspnetcore.components.circuit.connected: Melacak jumlah sirkuit yang terhubung ke klien.
• aspnetcore.components.circuit.duration: Mengukur durasi masa pakai sirkuit dan menyediakan jumlah total sirkuit.

Blazor Menelusuri

Untuk informasi selengkapnya tentang aktivitas pelacakan berikut, lihat metrik bawaan ASP.NET Core.

Kemampuan pelacakan aktivitas baru menggunakan Microsoft.AspNetCore.Components sumber aktivitas dan menyediakan tiga jenis utama aktivitas pelacakan: siklus hidup sirkuit, navigasi, dan penanganan peristiwa.

Pelacakan siklus hidup sirkuit:

Microsoft.AspNetCore.Components.StartCircuit: Melacak inisialisasi sirkuit dengan format Circuit {circuitId}.

Tags:

• aspnetcore.components.circuit.id: Pengidentifikasi sirkuit unik.
• error.type: Nama lengkap jenis pengecualian (opsional)

Link:

• Pelacakan HTTP
• SignalR bekas

Penggunaan: Menautkan pelacakan lain Blazor dari sesi/sirkuit yang sama ke konteks HTTP dan SignalR.

Pelacakan navigasi:

Microsoft.AspNetCore.Components.Navigate: Melacak perubahan rute dengan format Route {route} -> {componentType}.

Tags:

• aspnetcore.components.route: Pola jalur URL halaman.
• aspnetcore.components.type: Nama kelas Razor komponen.
• error.type: Nama lengkap jenis pengecualian (opsional).

Link:

• Pelacakan HTTP
• SignalR bekas
• Jalur rangkaian

Penggunaan: Halaman mana yang Blazor dikunjungi sesi ini?

Pelacakan penanganan peristiwa:

Microsoft.AspNetCore.Components.HandleEvent: Melacak penanganan peristiwa dengan format Event {attributeName} -> {componentType}.{methodName}.

Tags:

• aspnetcore.components.attribute.name: Nama atribut HTML yang memicu peristiwa (misalnya: onClick).
• code.function.name: Nama metode C# dari handler.
• aspnetcore.components.type: Nama lengkap komponen C# target yang menerima peristiwa.
• error.type: Nama lengkap jenis pengecualian (opsional).

Link:

• Jalur rangkaian
• Pelacakan rute

Penggunaan:

• Klik komponen mana yang menyebabkan pengecualian dan di halaman mana?
• Pada sirkuit mana yang tertaut dan dengan konteks HTTP seperti apa itu terjadi?