測試性能剖析指標監(jiān)控【免費下載鏈接】sitespeed.iositespeed.io is an open-source tool for comprehensive web performance analysis, enabling you to test, monitor, and optimize your website’s speed using real browsers in various environments.項目地址https://gitcode.com/gh_mirrors/si/sitespeed.io點擊查看免費下載sitespeed.io 11.0(2019-11-07 發(fā)布,同期發(fā)布 Browsertime 7.0)是該項目歷史上一次以外部貢獻者為主要動力的版本:它解決了困擾用戶多年的 Docker 結(jié)果文件屬主問題、讓 HTML 報告的列與匯總框變得可配置,并帶來了 Contentful Speed Index 視覺指標和 Firefox 內(nèi)置窗口錄屏兩條新能力。本文以該版本發(fā)布說明為主線,結(jié)合當前倉庫中的啟動腳本、CLI 選項定義與默認配置源碼,逐項還原這些功能的用法、實現(xiàn)細節(jié)與至今仍然有效的部分。版本背景:三大外部貢獻與容器瀏覽器升級11.0 發(fā)布說明特別致謝了三位核心團隊之外的貢獻者,他們分別對應本版本的三塊核心能力:Mason Malone:修復了 Linux 下測試運行時結(jié)果文件屬主為 root 的老問題,修復方式是拾取結(jié)果目錄的所有者并使用該用戶運行,即下文Docker 去 root 化一節(jié);Thapasya Murali:實現(xiàn)了首頁 summary boxes 與頁面頁(page summary)列的可配置,讓用戶可以自選展示哪些指標;Denis Palmeiro:新增了 Contentful Speed Index 指標與 Firefox 窗口錄屏器。除這三項外,根據(jù) CHANGELOG 中11.0.0條目,該版本容器內(nèi)升級為Chrome/ChromeDriver 78 與 Firefox 70,同時帶來了 AXE 接入 budget、budget 支持contentSize等配套能力。No root in Docker:結(jié)果文件不再屬于 root在 11.0 之前,用 Docker 容器在 Linux 宿主機上跑測試時,掛載卷里的結(jié)果文件全部以 root 屬主寫出(對應 issue #1459)。這在 CI 場景和后續(xù)用非 root 用戶處理結(jié)果目錄時會造成權(quán)限麻煩。Mason Malone 的修復思路是:容器啟動時讀取結(jié)果目錄(即掛載卷)的屬主 uid/gid,并用該身份運行 sitespeed.io 進程。這個方案在當前倉庫中依然可見,實現(xiàn)在 docker/scripts/start.sh:# write files owned by the user who runs the container # if your volume is mounted at /sitespeed.io, use it as CWD [[ -d /sitespeed.io $PWD / ]] cd /sitespeed.io uid$(stat -c %u . 2/dev/null || echo 0) gid$(stat -c %g . 2/dev/null || echo 0) if [[ $uid -ne 0 $gid -ne 0 ]]; then if ! getent group $gid /dev/null 21; then groupadd -g $gid sitespeedio-host 2/dev/null || true fi if ! getent passwd $uid /dev/null 21; then useradd -u $uid -g $gid -M -d /tmp -s /bin/bash sitespeedio-host 2/dev/null || true fi fi run_as_host() { if [[ $uid -ne 0 $gid -ne 0 ]]; then HOME/tmp chroot --skip-chdir --userspec${uid}:${gid} / $ else HOME/tmp $ fi }從源碼結(jié)構(gòu)看,腳本的邏輯是:先cd進掛載的/sitespeed.io(發(fā)布說明中pick up the owner of the result directory即指此處),用stat -c %u/%g取出屬主;若非 0,則在容器內(nèi)用useradd動態(tài)創(chuàng)建一個同 uid/gid 的sitespeedio-host用戶,隨后通過chroot --userspec降權(quán)執(zhí)行 node 進程(見execNode函數(shù))。這樣寫出的結(jié)果文件屬主與宿主機用戶一致,從根上消除了 root 屬主文件問題。可配置的 HTML 輸出:自選頁面列與 summary boxes這是 11.0 中最具實用價值的一項功能:結(jié)果 HTML 中所有頁面頁的表格列,以及首頁的 summary boxes,都可以按需挑選指標,而不再是固定一套。配置頁面列在命令行中,通過重復傳參添加多列:docker run --rm -v $(pwd):/sitespeed.io sitespeedio/sitespeed.io:version \ --html.pageSummaryMetrics timings.pageLoadTime \ --html.pageSummaryMetrics requests.total \ https://www.sitespeed.io更推薦在 JSON 配置文件中以數(shù)組形式聲明:html: { pageSummaryMetrics: [ googleWebVitals.largestContentfulPaint, googleWebVitals.cumulativeLayoutShift, googleWebVitals.totalBlockingTime, timings.SpeedIndex, transferSize.total, requests.total, score.performance ] }從源碼看這一功能的落地方式:CLI 選項在 lib/cli/options/html.js 中定義,html.pageSummaryMetrics的默認值直接取自 lib/plugins/html/defaultConfig.js。當前倉庫中該默認值正是上面 JSON 示例里的七個指標(LCP、CLS、TBT、SpeedIndex、總傳輸大小、總請求數(shù)、Coach 性能分),與文檔保持一致。同一默認配置中還維護了首頁 summary boxes 的指標清單summaryBoxes(同文件第 14-57 行),涵蓋 score、timings、visual、requests、transferSize、axe、cpu、sustainable 等指標族——可以推斷首頁 boxes 的展示集合同樣由這份清單驅(qū)動?？蛇x指標的范圍可以選哪些指標與寫 budget 文件時使用同一套命名:指標名來自 lib/support/friendlynames.js,文檔側(cè)對應 friendlynames 指標清單。因此凡是 budget 中可用的指標名,基本都可以作為pageSummaryMetrics的取值。更完整的用法說明見 Configure the HTML output。順帶一提,同一文檔頁還介紹了兩個相關(guān)的 HTML 輸出選項:用--html.showScript在結(jié)果頁附上所用腳本鏈接,用--html.compareURL生成跳轉(zhuǎn) compare 的按鈕——后者對應 lib/cli/options/html.js 中的html.compareURL選項。Contentful Speed Index:面向文本可見度的新 Speed Index發(fā)布說明介紹,Contentful Speed Index 是由 Mozilla 的 Bas Schouten 開發(fā)的一種新的 Speed Index 變體,核心思想是用邊緣檢測(edge detection)計算每一幀中內(nèi)容的可見量,而非像傳統(tǒng) Speed Index 那樣按像素差異加權(quán)。它的設(shè)計目標有兩個:提供一個能較好衡量可見文本量的指標;設(shè)計一個不易被彈窗/啟動頁/登錄頁干擾的指標——這類頁面在加載末段彈出時,會打亂傳統(tǒng) Speed Index 使用的末幀參照,導致數(shù)值失真。在 11.0 中,它隨 Browsertime 7.0.0 引入(對應 browsertime 倉庫 PR #976)。結(jié)合當前倉庫的視頻文檔 Video 可以補全用法:--visualMetrics開啟視覺指標后,追加--visualMetricsContentful即可同時采集 Contentful Speed Index(與 Perceptual Speed Index 的--visualMetricsPerceptual類似,兩者默認關(guān)閉,會額外增加少量分析時間)。指標名contentfulSpeedIndex在當前報告中仍是一等公民,可在 視覺里程碑模板 與 detailed 指標映射 中確認。Firefox Window recorder:低開銷的內(nèi)置窗口錄屏11.0 引入的第二條錄屏路線是 Firefox 67 的內(nèi)置窗口錄屏器(Firefox bug 1536174)。它的能力是:把每次被繪制到窗口上的幀 dump 成 PNG 圖片序列。Browsertime 側(cè)的 PR 為此新增了一個特權(quán) API,可以在 chrome context 中執(zhí)行 JS,并支持把窗口錄屏輸出的圖片合成為變幀率 MP4。其動機很明確:提供一個低開銷的錄屏器,在頁面加載期間不引入額外性能干擾,目標是比 FFmpeg 截屏路線開銷更小。使用方式為:--video --firefox.windowRecorder注意窗口錄屏是替代 FFmpeg 采集幀的機制,仍需--video標志來開啟視頻產(chǎn)出。這一選項在當前倉庫中仍然保留,定義見 lib/cli/options/firefox.js:.option(browsertime.firefox.windowRecorder, { alias: firefox.windowRecorder, describe: Use the internal compositor-based Firefox window recorder to emit PNG files for each frame that is a meaningful change. The PNG output will further be merged into a variable frame rate video for analysis. Use this instead of ffmpeg to record a video (you still need the --video flag)., default: false, type: boolean, group: Firefox })從這段選項描述看,當前實現(xiàn)對有意義的變化幀才輸出 PNG,再合并為可變幀率視頻,與發(fā)布說明中variable rate MP4的表述一致。當前 Video 文檔 也保留了這一節(jié),并補充說明 Mozilla 團隊自身也用它來驗證錄屏不引入額外開銷。網(wǎng)絡(luò)連通性的小幅方差:--connectivity.variance11.0 同時提供了一個設(shè)定網(wǎng)絡(luò)方差的方式(最初來自 Emery Berger 的提議):--connectivity.variance 2含義是:運行之間延遲具有 2% 的方差。需要明確兩個前提與邊界:當時僅在使用 Throttle 作為 connectivity 引擎時生效;發(fā)布說明原文坦承我們尚未深入研究。其設(shè)想是:引入小方差后,更容易觀察當延遲觸及某個閾值時對頁面性能造成的階躍式影響——因為實驗室環(huán)境中延遲完全恒定,反而可能測不到真實網(wǎng)絡(luò)抖動下的表現(xiàn)。也就是說,這是一個面向?qū)嶒灥拈_關(guān),而不是默認推薦配置;在把它納入生產(chǎn)測試方案前,應當先用自己的頁面觀察其影響。其他修復:Docker 配置禁用視覺指標、AXE 多 URL 腳本支持發(fā)布說明列出了兩個重要 bug 修復,均可在 CHANGELOG 的 11.0.0 條目中核對:Docker 下可以通過配置 JSON 禁用 video/visual metrics:此前 issue #2692 報告在 Docker 內(nèi)通過配置 JSON 關(guān)閉視頻/視覺指標不生效,由 PR #2715 修復。這讓只要指標不要視頻的輕量配置在容器環(huán)境下真正可用;AXE 在 scripting 模式下測試多個 URL 時正常工作:issue #2754 報告腳本化執(zhí)行時多 URL 的 AXE 可訪問性測試失效,由 PR #2755 修復。隨版本啟動的 GitHub 贊助計劃11.0 還標志著項目正式啟用 GitHub sponsorship 渠道,配套說明頁見 Sponsor。發(fā)布說明本身不含贊助的技術(shù)細節(jié),這里僅作為版本事件的背景記錄。小結(jié):11.0 引入的能力哪些仍然有效對照當前倉庫源碼可以梳理出 11.0 各能力在今天的狀態(tài):11.0 引入的能力當前倉庫中的對應證據(jù)Docker 結(jié)果文件屬主跟隨宿主機用戶docker/scripts/start.sh 的 uid/gid 拾取與chroot --userspec降權(quán)仍在使用--html.pageSummaryMetrics頁面列配置lib/cli/options/html.js 選項仍在,默認值見 defaultConfig.jssummary boxes 配置summaryBoxes指標清單仍維護于 defaultConfig.jsContentful Speed Index指標名保留在 HTML 報告模板與 友好名稱映射 中,采集方式見 Video 文檔--firefox.windowRecorderlib/cli/options/firefox.js 選項仍在,默認關(guān)閉--connectivity.variance隨 Throttle 引擎的方差功能演進,發(fā)布說明中標注為待觀察的實驗項對正在使用 sitespeed.io 的讀者,本文的價值在于:這些 2019 年引入的配置項在今天的代碼庫里大多原樣保留,11.0 發(fā)布說明仍是理解為什么要這些配置的最佳第一手資料,而具體參數(shù)行為應以當前版本的 HTML 輸出配置文檔 與 Video 文檔 為準。贊分享測試性能剖析指標監(jiān)控【免費下載鏈接】sitespeed.iositespeed.io is an open-source tool for comprehensive web performance analysis, enabling you to test, monitor, and optimize your website’s speed using real browsers in various environments.項目地址https://gitcode.com/gh_mirrors/si/sitespeed.io點擊查看免費下載相關(guān)推薦Lightbeam完全指南免費的網(wǎng)絡(luò)跟蹤可視化工具一次看懂誰在監(jiān)控你的瀏覽行為Lightbeam完全指南免費的網(wǎng)絡(luò)跟蹤可視化工具一次看懂誰在監(jiān)控你的瀏覽行為 Lightbeam 是一款由 Mozilla 推出的 免費網(wǎng)絡(luò)跟蹤可視化工具前端網(wǎng)絡(luò)安全sitespeed.io 4.1 視覺指標與二次訪問測量Speed Index、視頻錄制與 preURL 實戰(zhàn)指南sitespeed.io 4.1 視覺指標與二次訪問測量Speed Index、視頻錄制與 preURL 實戰(zhàn)指南 本篇指南聚焦 sitespeed.io 在測試性能剖析指標監(jiān)控Docker CLI 深度解析docker events 實時事件流的對象類型、過濾、時間窗口與格式化輸出Docker CLI 深度解析docker events 實時事件流的對象類型、過濾、時間窗口與格式化輸出 Docker CLI 通過 docker evenCLI開發(fā)工具上一篇Claude Code 實戰(zhàn)指南在終端中駕馭 Agentic AI 編程助手下一篇當皇上GUI管理界面實戰(zhàn)Web儀表盤監(jiān)控18個AI大臣朝堂狀態(tài)一目了然創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考