測量效能

想要測量 MSAL.js 驗證流程效能的應用程式,可以手動測量,或使用由程式庫本身蒐集的效能測量資料。 若要使用效能測量資料,必須在 遙測設定選項 中設定效能用戶端,並新增效能回呼函式。

設定遙測效能客戶端

import { PublicClientApplication, BrowserPerformanceClient } from "@azure/msal-browser";

const msalConfig = {
    auth: {
        ...
    },
    cache: {
        ...
    },
    system: {
        ...
    }
}

const msalInstance = new PublicClientApplication({
    ...msalConfig,
    telemetry: {
        client: new BrowserPerformanceClient(msalConfig)
    }
});
msalInstance.initialize();

新增效能回調

應用程式可以註冊回呼,以接收函式庫取得的效能測量結果。 這些衡量將包括頂層API的端對端測量,以及重要內部API的測量。

MSFT 第一方應用程式注意事項:我們將發佈已預先插裝、可擷取此遙測資料的 @azure/msal-browser 內部組建。 歡迎聯絡我們了解更多詳情。

Example

const msalInstance = new PublicClientApplication(config);

msalInstance.addPerformanceCallback((events: PerformanceEvent[]) => {
    events.forEach(event => {
        console.log(event);
    });
});

範例事件:

const event: PerformanceEvent = {
    correlationId: "aaaa0000-bb11-2222-33cc-444444dddddd",
	durationMs: 1873,
	endPageVisibility: "hidden",
	fromCache: false,
	name: "acquireTokenSilent",
	startPageVisibility: "visible",
	startTimeMs: 1636414041888,
	success: true,
    silentCacheClientAcquireTokenDurationMs: 0,
    silentRefreshClientAcquireTokenDurationMs: 150,
    silentIframeClientAcquireTokenDurationMs: 0
    cryptoOptsGetPublicKeyThumbprintDurationMs: 200,
    cryptoOptsSignJwtDurationMs: 8,
    clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
    authority: "https://login.microsoftonline.com/common",
    libraryName: "@azure/msal-browser-1p",
    libraryVersion: "5.0.0",
    appName: "my-application",
    appVersion: "1.0.0"
}

完整的物件細節 PerformanceEvents 可 在此查閱。 以下是一些值得注意的物業清單:

Property 類型 Description
name string 操作名稱通常與頂層 API 名稱相符(例如 acquireTokenSilent, acquireTokenByCode, ssoSilent)。
durationMs number 手術的端到端持續時間以毫秒計。
success boolean 不管手術成功與否。
fromCache boolean 操作是否從快取中取得結果。
correlationId string 用於操作的相關ID(最好是每個請求唯一)。
libraryVersion string 用於操作的 MSAL.js 版本。
authority string 這次行動所用的權限。
<internalFunctionName>DurationMs number 內部操作的持續時間以毫秒計。

移除PerformanceCallback。

addPerformanceCallback API 會傳回一個回呼 ID,應用程式可將該回呼 ID 傳遞給 PublicClientApplication.removePerformanceCallback,以取消註冊該回呼,使其不再接收效能事件。 它會回傳一個布林值,表示該回呼函式是否已成功移除。

Example

const msalInstance = new PublicClientApplication(config);

const callbackId: string = msalInstance.addPerformanceCallback((events: PerformanceEvent[]) => {
    events.forEach(event => {
        console.log(event);
    });
});

const removed: boolean = msalInstance.removePerformanceCallback(callbackId);

衡量瀏覽器效能

由於瀏覽器效能測量會帶來顯著的效能負擔,預設會被關閉。 想要將效能測量結果回報到瀏覽器的效能時間軸的應用程式,應:

  1. 開啟瀏覽器開發工具
    • Edge、Chrome 和 Firefox 瀏覽器:按 F12
    • Safari:進入 Safari 的偏好設定(Safari Menu>Preferences),選擇 Advanced Tab,並啟用 Show features for web developers。 啟用該選單後,你可以點擊 Develop>Show Javascript Console 找到開發人員主控台。
  2. 前往 Session Storage:
    • Edge
    • 鉻
    • Firefox
    • Safari:導覽到 Storage 分頁並展開 Session Storage
  3. 選擇目標領域
  4. 將鍵msal.browser.performance.enabled加入 Session Storage ,將其值設為 1,重新整理頁面並檢查瀏覽器的效能時間軸。