搭建自動化 Web 頁面性能檢測系統 —— 實作篇

我們是袋鼠云數堆疊 UED 團隊，致力于打造優秀的一站式資料中臺產品，我們始終保持工匠精神，探索前端道路，為社區積累并傳播經驗價值，，

本文作者：琉易 liuxianyu.cn

前段時間分享了《搭建自動化 Web 頁面性能檢測系統 —— 設計篇》，我們提到了性能檢測的一些名詞和自研性能檢測系統的原因，也簡單介紹了一下系統的設計，在這里我們書接上篇記錄下是如何實作一個性能檢測系統的，

開始前歡迎大家 Star：https://github.com/DTStack/yice-performance

先看下性能檢測系統 —— 易測的實作效果：

一、技術選型

服務端框架選擇的是 Nestjs，Web 頁面選擇的是 Vite + React，由于所在團隊當前的研發環境已經全面接入自研的 devops 系統，易測收錄的頁面也是對接 devops 進行檢測的，

1.1、整體架構設計

易測的檢測服務基于 Lighthouse + Puppeteer 實作，下圖是易測的一個整體架構圖：

1.2、實作方案

易測的檢測流程是：根據子產品的版本獲取到待檢測的地址、對應的登錄地址、用戶名和密碼，然后通過 Puppeteer 先跳轉到對應的登錄頁面，接著由 Puppeteer 輸入用戶名、密碼、驗證碼，待登錄完成后跳轉至待檢測的頁面，再進行頁面性能檢測，如果登錄后還在登錄頁，表示登錄失敗，則獲取錯誤提示并拋出到日志，為了檢測方便，檢測的均為開發環境且將登錄的驗證碼校驗關閉，

以下是易測的檢測流程圖：

二、Lighthouse

易測通過 Node 模塊引入 Lighthouse，不需要登錄的頁面檢測可以直接使用 Lighthouse，基礎用法：

const lighthouse = require('lighthouse');
const runResult = await lighthouse(url, lhOptions, lhConfig);

2.1、options

lhOptions 的主要引數有：

{
  port: PORT, // chrome 運行的埠
  logLevel: 'error',
  output: 'html', // 以 html 檔案的方式輸出報告
  onlyCategories: ['performance'], // 僅采集 performance 資料
  disableStorageReset: true, // 禁止在運行前清除瀏覽器快取和其他存盤 API
}

2.2、config

lhConfig 的主要引數有：

{
  extends: 'lighthouse:default', // 繼承默認配置
  settings: {
    onlyCategories: ['performance'],
    // onlyAudits: ['first-contentful-paint'],
    formFactor: 'desktop',
    throttling: {
      rttMs: 0, // 網路延遲，單位 ms
      throughputKbps: 10 * 1024,
      cpuSlowdownMultiplier: 1,
      requestLatencyMs: 0, // 0 means unset
      downloadThroughputKbps: 0,
      uploadThroughputKbps: 0,
    },
    screenEmulation: {
      mobile: false,
      width: 1440,
      height: 960,
      deviceScaleFactor: 1,
      disabled: false,
    },
    skipAudits: ['uses-http2'], // 跳過的檢查
    emulatedUserAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Safari/537.36 Chrome-Lighthouse',
  },
}

settings 屬于 Lighthouse 的運行時配置，主要是用來模擬網路和設備的資訊，以及使用到哪些審查器，如果檢測的頁面有 web 端和 h5 端之分，也是在 settings 進行配置，

檢測結果會有總分、各小項的耗時、瀑布圖、改進建議等，如下：

三、Puppeteer

需要登錄后才能訪問的頁面涉及到登錄、點擊等操作，我們需要借助 Puppeteer 來模擬點擊，基礎用法：

const puppeteer = require('puppeteer');

const browser = await puppeteer.launch(puppeteerConfig);
const page = await browser.newPage();

3.1、puppeteerConfig

{
  args: ['--no-sandbox', '--disable-setuid-sandbox', `--remote-debugging-port=${PORT}`],
  headless: true, // 是否使用無頭瀏覽器
  defaultViewport: { width: 1440, height: 960 }, // 指定打開頁面的寬高
  slowMo: 15, // 使 Puppeteer 操作減速，可以觀察到 Puppeteer 的操作
}

當 headless 為 false 時方便本地除錯，通過調整 slowMo 的大小可以觀察到 Puppeteer 的模擬操作，

四、開始檢測

4.1、主方法

const taskRun = async (task: ITask, successCallback, failCallback, completeCallback) => {
  const { taskId, start, url, loginUrl } = task;
  try {
    // 依據是否包含 devops 來判斷是否需要登錄
    const needLogin = url.includes('devops') || loginUrl;
    console.log(
      `\ntaskId: ${taskId}, 本次檢測${needLogin ? '' : '不'}需要登錄，檢測地址：`,
      url
    );

    // 需要登錄與否會決定使用哪個方法
    const runResult = needLogin ? await withLogin(task) : await withOutLogin(task);

    // 保存檢測結果的報告檔案，便于預覽
    const urlStr = url.replace(/http(s?):\/\//g, '').replace(/\/|#/g, '');
    const fileName = `${moment().format('YYYY-MM-DD')}-${taskId}-${urlStr}`;
    const filePath = `./static/${fileName}.html`;
    const reportPath = `/report/${fileName}.html`;
    fs.writeFileSync(filePath, runResult?.report);

    // 整理性能資料
    const audits = runResult?.lhr?.audits || {};
    const auditRefs =
      runResult?.lhr?.categories?.performance?.auditRefs?.filter((item) => item.weight) || [];
    const { score = 0 } = runResult?.lhr?.categories?.performance || {};

    const performance = [];
    for (const auditRef of auditRefs) {
      const { weight, acronym } = auditRef;
      const { score, numericValue } = audits[auditRef.id] || {};
      if (numericValue =https://www.cnblogs.com/dtux/archive/2023/06/20/== undefined) {
        throw new Error(
          `檢測結果出現問題，沒有單項檢測時長，${JSON.stringify(audits[auditRef.id])}`
        );
      }
      performance.push({
        weight,
        name: acronym,
        score: Math.floor(score * 100),
        duration: Math.round(numericValue * 100) / 100,
      });
    }
    const duration = Number((new Date().getTime() - start).toFixed(2));

    // 匯總檢測結果
    const result = {
      score: Math.floor(score * 100),
      duration,
      reportPath,
      performance,
    };

    // 拋出結果
    await successCallback(taskId, result);

    console.log(`taskId: ${taskId}, 本次檢測耗時：${duration}ms`);
    return result;
  } catch (error) {
    // 錯誤處理
    const failReason = error.toString().substring(0, 10240);
    const duration = Number((new Date().getTime() - start).toFixed(2));
    await failCallback(task, failReason, duration);
    console.error(`taskId: ${taskId}, taskRun error`, `taskRun error, ${failReason}`);
    throw error;
  } finally {
    completeCallback();
  }
};

4.2、不需要登錄

const withOutLogin = async (runInfo: ITask) => {
  const { taskId, url } = runInfo;
  let chrome, runResult;
  try {
    console.log(`taskId: ${taskId}, 開始檢測`);

    // 通過 API 控制 Node 端的 chrome 打開標簽頁，借助 Lighthouse 檢測頁面
    chrome = await chromeLauncher.launch(chromeLauncherOptions);
    runResult = await lighthouse(url, getLhOptions(chrome.port), lhConfig);
    
    console.log(`taskId: ${taskId}, 檢測完成，開始整理資料`);
  } catch (error) {
    console.error(`taskId: ${taskId}, 檢測失敗`, `檢測失敗，${error?.toString()}`);
    throw error;
  } finally {
    await chrome.kill();
  }

  return runResult;
};

4.3、需要登錄

const withLogin = async (runInfo: ITask) => {
  const { taskId, url } = runInfo;
  
  // 創建 puppeteer 無頭瀏覽器
  const browser = await puppeteer.launch(getPuppeteerConfig(PORT));
  const page = await browser.newPage();

  let runResult;
  try {
    // 登錄
    await toLogin(page, runInfo);
    // 選擇租戶
    await changeTenant(page, taskId);

    console.log(`taskId: ${taskId}, 準備作業完成，開始檢測`);

    // 開始檢測
    runResult = await lighthouse(url, getLhOptions(PORT), lhConfig);
    
    console.log(`taskId: ${taskId}, 檢測完成，開始整理資料`);
  } catch (error) {
    console.error(`taskId: ${taskId}, 檢測出錯`, `${error?.toString()}`);
    throw error;
  } finally {
    // 檢測結束關閉標簽頁、無頭瀏覽器
    await page.close();
    await browser.close();
  }

  return runResult;
};

4.4、模擬登錄

所在團隊的子產品均需要登錄后才能訪問，且每次檢測打開的都是類似無痕瀏覽器的標簽頁，不存在登錄資訊的快取，所以每次檢測這些頁面前需要完成登錄操作：

const toLogin = async (page, runInfo: ITask) => {
  const { taskId, loginUrl, username, password } = runInfo;
  try {
    await page.goto(loginUrl);
    // 等待指定的選擇器匹配元素出現在頁面中
    await page.waitForSelector('#username', { visible: true });

    // 用戶名、密碼、驗證碼
    const usernameInput = await page.$('#username');
    await usernameInput.type(username);
    const passwordInput = await page.$('#password');
    await passwordInput.type(password);
    const codeInput = await page.$('.c-login__container__form__code__input');
    await codeInput.type('bz4x');

    // 登錄按鈕
    await page.click('.c-login__container__form__btn');
    // await page.waitForNavigation();
    await sleep(Number(process.env.RESPONSE_SLEEP || 0) * 2);

    const currentUrl = await page.url();
    // 依據是否包含 login 來判斷是否需要登錄，若跳轉之后仍在登錄頁，說明登錄出錯
    if (currentUrl.includes('login')) {
      throw new Error(`taskId: ${taskId}, 登錄失敗，仍在登錄頁面`);
    } else {
      console.log(`taskId: ${taskId}, 登錄成功`);
    }
  } catch (error) {
    console.error(`taskId: ${taskId}, 登錄出錯`, error?.toString());
    throw error;
  }
};

4.5、得分落庫

等待所有的檢測步驟都完成后，在 successCallback 方法中處理檢測資料，此時可根據不同的性能指標計算得出最終得分和小項得分，統一落庫，

五、自動檢測

除了可以在頁面手動觸發檢測，易測主要使用的是自動檢測，自動檢測的目的是方便統計所有子產品的性能趨勢，便于分析各版本間的性能變化，以及子產品間的性能優劣，最終得出優化方向，

5.1、任務主動調度

易測驗運行階段，由于使用的是開發環境進行檢測，所以將自動檢測時間設定為作業時間的間隙，減少影響檢測結果的干擾因素，后續正式部署后，也將調低檢測的頻率，

自動檢測可以主動進行任務的調度，也可以手動觸發任務，借助 @nestjs/schedule 實作定時任務：

import { Cron } from '@nestjs/schedule';

export class TaskRunService {
  // 每分鐘執行一次 https://docs.nestjs.com/techniques/task-scheduling#declarative-cron-jobs
  @Cron('0 * * * * *')
  async handleCron() {
    // 檢測版本的 cron 符合當前時間運行的則創建任務
    process.env.NODE_ENV === 'production' && this.checkCronForCurrentDate();
  }
}

5.2、失敗告警

檢測失敗會有釘釘通知，點擊可快速跳轉至易測內查看具體原因，

5.3、性能趨勢圖

由下方的趨勢圖簡單分析后，可以得出子產品版本間的性能變化，

六、對接內部系統

6.1、對接 Jenkins

所在團隊的子產品在版本間做了一些腳手架的封裝升級，對接 Jenkins 就可以采集到各個版本間構建時長和構建后的檔案大小等資訊的變化，有助于性能相關資料的匯總、腳手架的分析改進，
在 Jenkins 的構建回呼里，處理后可以拿到構建時長和構建后的檔案大小等資訊，由 Jenkins 呼叫易測提供的介面，按分支處理好版本后將資料落庫，在易測中展示出來，

七、結尾

如果你也準備搭建一個自己團隊的檢測系統，可以參考下易測的設計思路，希望這兩篇文章對你的作業有所助力，
完成上述作業后，接下來需要考慮的有易測功能的權限控制、資料分析、如何根據業務場景進行檢測等方面，畢竟 Lighthouse 檢測的一般是單個頁面，而業務場景一般是作業流程的編排即流程的整體操作，

最后，歡迎大家不吝 Star：https://github.com/DTStack/yice-performance

最后

歡迎關注【袋鼠云數堆疊UED團隊】~
袋鼠云數堆疊UED團隊持續為廣大開發者分享技術成果，相繼參與開源了歡迎star

• 大資料分布式任務調度系統——Taier
• 輕量級的 Web IDE UI 框架——Molecule
• 針對大資料領域的 SQL Parser 專案——dt-sql-parser
• 袋鼠云數堆疊前端團隊代碼評審工程實踐檔案——code-review-practices
• 一個速度更快、配置更靈活、使用更簡單的模塊打包器——ko

標籤：其他

上一篇：StencilJs學習之事件

下一篇：返回列表