Blazor客户端应用页面加载时长监测方案咨询

一、纯JavaScript原生实现（覆盖浏览器+Blazor全加载流程） #

客户端Blazor基于WebAssembly，普通浏览器加载事件无法直接覆盖Blazor应用初始化完成的节点，通过结合浏览器导航事件和Blazor启动钩子，能精准统计从页面请求到应用就绪的全流程时长。

实现步骤： #

1. 在wwwroot/index.html的<head>最顶部插入初始计时脚本：

<head>
    <script>
        // 捕获最早的页面导航起点
        const navigationStartTime = performance.now();
        let blazorReadyTime;

        // 监听自定义的Blazor初始化完成事件
        document.addEventListener('blazor-app-ready', () => {
            blazorReadyTime = performance.now();
            const totalLoadDuration = blazorReadyTime - navigationStartTime;
            console.log(`Blazor应用加载总时长: ${totalLoadDuration.toFixed(2)}ms`);
            
            // 可选：上报数据到后端接口（根据需求启用）
            /*
            fetch('/api/Performance/RecordLoadTime', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ 
                    loadTimeMs: totalLoadDuration,
                    recordTime: new Date().toISOString()
                })
            });
            */
        });
    </script>
    <!-- 原有head内容 -->
</head>

2. 在Blazor启动脚本后添加钩子，触发初始化完成事件：
   在index.html中<script src="_framework/blazor.webassembly.js"></script>下方追加：

<script>
    // 拦截Blazor.start方法，在初始化完成后触发自定义事件
    const originalBlazorStart = Blazor.start;
    Blazor.start = async function() {
        await originalBlazorStart.apply(this, arguments);
        document.dispatchEvent(new CustomEvent('blazor-app-ready'));
    };
</script>

二、Blazor JS互操作 + C# 结合方案 #

如果需要在C#业务逻辑中处理加载时长数据（比如结合业务日志、内部监控系统），可以通过JS互操作把计时结果传递给C#：

实现步骤： #

1. 先在wwwroot/index.html中编写计时并调用C#方法的逻辑：

<script>
    const navigationStartTime = performance.now();

    document.addEventListener('blazor-app-ready', () => {
        const totalLoadDuration = performance.now() - navigationStartTime;
        // 调用C#静态方法传递时长数据
        window.invokeMethodAsync('LoadTimeReporter.RecordLoadTime', totalLoadDuration);
    });

    // 重写Blazor.start触发初始化完成事件
    const originalBlazorStart = Blazor.start;
    Blazor.start = async function() {
        await originalBlazorStart.apply(this, arguments);
        document.dispatchEvent(new CustomEvent('blazor-app-ready'));
    };
</script>

2. 在Blazor项目中创建C#处理类：

public static class LoadTimeReporter
{
    [JSInvokable]
    public static void RecordLoadTime(double loadTimeMs)
    {
        // 在这里处理时长数据：写入本地日志、上报内部监控、存储到本地存储等
        Console.WriteLine($"[性能监测] Blazor页面加载时长: {loadTimeMs:F2}ms");
        
        // 如果需要在组件内处理，也可以在布局组件（如MainLayout.razor）中定义方法：
        // [JSInvokable]
        // public void RecordLoadTime(double loadTimeMs)
        // {
        //     // 组件内业务逻辑，比如更新UI显示加载时长
        // }
    }
}

3. 如需依赖注入，在Program.cs中注册服务：

builder.Services.AddSingleton<LoadTimeReporter>();

三、针对认证Web应用的后台定期监测方案 #

对于已认证的Blazor应用，可通过C#编写轻量级监测服务，模拟用户认证请求来定期统计页面加载性能：

实现代码： #

using System;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading.Tasks;

public class AuthenticatedBlazorMonitor
{
    private readonly HttpClient _httpClient;
    private readonly string _validAuthToken; // 从配置获取有效JWT或认证凭证

    public AuthenticatedBlazorMonitor(string appBaseUrl, string authToken)
    {
        _httpClient = new HttpClient { BaseAddress = new Uri(appBaseUrl) };
        _validAuthToken = authToken;
        // 根据应用认证方式设置请求头（示例为Bearer Token）
        _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _validAuthToken);
    }

    public async Task<double> MeasureAuthenticatedPageLoad(string pageRelativeUrl)
    {
        var stopwatch = System.Diagnostics.Stopwatch.StartNew();
        
        // 发送认证请求到目标页面
        var response = await _httpClient.GetAsync(pageRelativeUrl);
        response.EnsureSuccessStatusCode(); // 确保请求成功
        
        stopwatch.Stop();
        return stopwatch.Elapsed.TotalMilliseconds;
    }

    // 启动定期监测
    public async Task StartPeriodicMonitoring(int intervalMinutes)
    {
        while (true)
        {
            var loadTime = await MeasureAuthenticatedPageLoad("/dashboard"); // 监测目标页面
            Console.WriteLine($"[{DateTime.Now:yyyy-MM-dd HH:mm:ss}] 认证页面加载时长: {loadTime:F2}ms");
            
            // 可选：将结果写入数据库或内部监控平台
            // await SaveLoadTimeToMonitorSystem(loadTime);
            
            await Task.Delay(TimeSpan.FromMinutes(intervalMinutes));
        }
    }
}

说明：需确保认证凭证长期有效（比如配置刷新令牌自动更新），或根据应用认证机制调整请求头（如传递认证Cookie），该方案可模拟真实用户请求，获取服务端响应到客户端接收的完整时长。

内容的提问来源于stack exchange，提问作者BenIffland