测试性能剖析指标监控【免费下载链接】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 发布,同期发布 Browsertime 7.0)是该项目历史上一次以外部贡献者为主要动力的版本:它解决了困扰用户多年的 Docker 结果文件属主问题、让 HTML 报告的列与汇总框变得可配置,并带来了 Contentful Speed Index 视觉指标和 Firefox 内置窗口录屏两条新能力。本文以该版本发布说明为主线,结合当前仓库中的启动脚本、CLI 选项定义与默认配置源码,逐项还原这些功能的用法、实现细节与至今仍然有效的部分。版本背景:三大外部贡献与容器浏览器升级11.0 发布说明特别致谢了三位核心团队之外的贡献者,他们分别对应本版本的三块核心能力:Mason Malone:修复了 Linux 下测试运行时结果文件属主为 root 的老问题,修复方式是拾取结果目录的所有者并使用该用户运行,即下文Docker 去 root 化一节;Thapasya Murali:实现了首页 summary boxes 与页面页(page summary)列的可配置,让用户可以自选展示哪些指标;Denis Palmeiro:新增了 Contentful Speed Index 指标与 Firefox 窗口录屏器。除这三项外,根据 CHANGELOG 中11.0.0条目,该版本容器内升级为Chrome/ChromeDriver 78 与 Firefox 70,同时带来了 AXE 接入 budget、budget 支持contentSize等配套能力。No root in Docker:结果文件不再属于 root在 11.0 之前,用 Docker 容器在 Linux 宿主机上跑测试时,挂载卷里的结果文件全部以 root 属主写出(对应 issue #1459)。这在 CI 场景和后续用非 root 用户处理结果目录时会造成权限麻烦。Mason Malone 的修复思路是:容器启动时读取结果目录(即挂载卷)的属主 uid/gid,并用该身份运行 sitespeed.io 进程。这个方案在当前仓库中依然可见,实现在 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 }从源码结构看,脚本的逻辑是:先cd进挂载的/sitespeed.io(发布说明中pick up the owner of the result directory即指此处),用stat -c %u/%g取出属主;若非 0,则在容器内用useradd动态创建一个同 uid/gid 的sitespeedio-host用户,随后通过chroot --userspec降权执行 node 进程(见execNode函数)。这样写出的结果文件属主与宿主机用户一致,从根上消除了 root 属主文件问题。可配置的 HTML 输出:自选页面列与 summary boxes这是 11.0 中最具实用价值的一项功能:结果 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 配置文件中以数组形式声明: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、总传输大小、总请求数、Coach 性能分),与文档保持一致。同一默认配置中还维护了首页 summary boxes 的指标清单summaryBoxes(同文件第 14-57 行),涵盖 score、timings、visual、requests、transferSize、axe、cpu、sustainable 等指标族——可以推断首页 boxes 的展示集合同样由这份清单驱动。可选指标的范围可以选哪些指标与写 budget 文件时使用同一套命名:指标名来自 lib/support/friendlynames.js,文档侧对应 friendlynames 指标清单。因此凡是 budget 中可用的指标名,基本都可以作为pageSummaryMetrics的取值。更完整的用法说明见 Configure the HTML output。顺带一提,同一文档页还介绍了两个相关的 HTML 输出选项:用--html.showScript在结果页附上所用脚本链接,用--html.compareURL生成跳转 compare 的按钮——后者对应 lib/cli/options/html.js 中的html.compareURL选项。Contentful Speed Index:面向文本可见度的新 Speed Index发布说明介绍,Contentful Speed Index 是由 Mozilla 的 Bas Schouten 开发的一种新的 Speed Index 变体,核心思想是用边缘检测(edge detection)计算每一帧中内容的可见量,而非像传统 Speed Index 那样按像素差异加权。它的设计目标有两个:提供一个能较好衡量可见文本量的指标;设计一个不易被弹窗/启动页/登录页干扰的指标——这类页面在加载末段弹出时,会打乱传统 Speed Index 使用的末帧参照,导致数值失真。在 11.0 中,它随 Browsertime 7.0.0 引入(对应 browsertime 仓库 PR #976)。结合当前仓库的视频文档 Video 可以补全用法:--visualMetrics开启视觉指标后,追加--visualMetricsContentful即可同时采集 Contentful Speed Index(与 Perceptual Speed Index 的--visualMetricsPerceptual类似,两者默认关闭,会额外增加少量分析时间)。指标名contentfulSpeedIndex在当前报告中仍是一等公民,可在 视觉里程碑模板 与 detailed 指标映射 中确认。Firefox Window recorder:低开销的内置窗口录屏11.0 引入的第二条录屏路线是 Firefox 67 的内置窗口录屏器(Firefox bug 1536174)。它的能力是:把每次被绘制到窗口上的帧 dump 成 PNG 图片序列。Browsertime 侧的 PR 为此新增了一个特权 API,可以在 chrome context 中执行 JS,并支持把窗口录屏输出的图片合成为变帧率 MP4。其动机很明确:提供一个低开销的录屏器,在页面加载期间不引入额外性能干扰,目标是比 FFmpeg 截屏路线开销更小。使用方式为:--video --firefox.windowRecorder注意窗口录屏是替代 FFmpeg 采集帧的机制,仍需--video标志来开启视频产出。这一选项在当前仓库中仍然保留,定义见 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 })从这段选项描述看,当前实现对有意义的变化帧才输出 PNG,再合并为可变帧率视频,与发布说明中variable rate MP4的表述一致。当前 Video 文档 也保留了这一节,并补充说明 Mozilla 团队自身也用它来验证录屏不引入额外开销。网络连通性的小幅方差:--connectivity.variance11.0 同时提供了一个设定网络方差的方式(最初来自 Emery Berger 的提议):--connectivity.variance 2含义是:运行之间延迟具有 2% 的方差。需要明确两个前提与边界:当时仅在使用 Throttle 作为 connectivity 引擎时生效;发布说明原文坦承我们尚未深入研究。其设想是:引入小方差后,更容易观察当延迟触及某个阈值时对页面性能造成的阶跃式影响——因为实验室环境中延迟完全恒定,反而可能测不到真实网络抖动下的表现。也就是说,这是一个面向实验的开关,而不是默认推荐配置;在把它纳入生产测试方案前,应当先用自己的页面观察其影响。其他修复:Docker 配置禁用视觉指标、AXE 多 URL 脚本支持发布说明列出了两个重要 bug 修复,均可在 CHANGELOG 的 11.0.0 条目中核对:Docker 下可以通过配置 JSON 禁用 video/visual metrics:此前 issue #2692 报告在 Docker 内通过配置 JSON 关闭视频/视觉指标不生效,由 PR #2715 修复。这让只要指标不要视频的轻量配置在容器环境下真正可用;AXE 在 scripting 模式下测试多个 URL 时正常工作:issue #2754 报告脚本化执行时多 URL 的 AXE 可访问性测试失效,由 PR #2755 修复。随版本启动的 GitHub 赞助计划11.0 还标志着项目正式启用 GitHub sponsorship 渠道,配套说明页见 Sponsor。发布说明本身不含赞助的技术细节,这里仅作为版本事件的背景记录。小结:11.0 引入的能力哪些仍然有效对照当前仓库源码可以梳理出 11.0 各能力在今天的状态:11.0 引入的能力当前仓库中的对应证据Docker 结果文件属主跟随宿主机用户docker/scripts/start.sh 的 uid/gid 拾取与chroot --userspec降权仍在使用--html.pageSummaryMetrics页面列配置lib/cli/options/html.js 选项仍在,默认值见 defaultConfig.jssummary boxes 配置summaryBoxes指标清单仍维护于 defaultConfig.jsContentful Speed Index指标名保留在 HTML 报告模板与 友好名称映射 中,采集方式见 Video 文档--firefox.windowRecorderlib/cli/options/firefox.js 选项仍在,默认关闭--connectivity.variance随 Throttle 引擎的方差功能演进,发布说明中标注为待观察的实验项对正在使用 sitespeed.io 的读者,本文的价值在于:这些 2019 年引入的配置项在今天的代码库里大多原样保留,11.0 发布说明仍是理解为什么要这些配置的最佳第一手资料,而具体参数行为应以当前版本的 HTML 输出配置文档 与 Video 文档 为准。赞分享测试性能剖析指标监控【免费下载链接】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点击查看免费下载相关推荐Lightbeam完全指南免费的网络跟踪可视化工具一次看懂谁在监控你的浏览行为Lightbeam完全指南免费的网络跟踪可视化工具一次看懂谁在监控你的浏览行为 Lightbeam 是一款由 Mozilla 推出的 免费网络跟踪可视化工具前端网络安全sitespeed.io 4.1 视觉指标与二次访问测量Speed Index、视频录制与 preURL 实战指南sitespeed.io 4.1 视觉指标与二次访问测量Speed Index、视频录制与 preURL 实战指南 本篇指南聚焦 sitespeed.io 在测试性能剖析指标监控Docker CLI 深度解析docker events 实时事件流的对象类型、过滤、时间窗口与格式化输出Docker CLI 深度解析docker events 实时事件流的对象类型、过滤、时间窗口与格式化输出 Docker CLI 通过 docker evenCLI开发工具上一篇Claude Code 实战指南在终端中驾驭 Agentic AI 编程助手下一篇当皇上GUI管理界面实战Web仪表盘监控18个AI大臣朝堂状态一目了然创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考