测试性能剖析指标监控【免费下载链接】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点击查看免费下载2017 年 5 月 14 日发布的 sitespeed.io 5.1对应 CHANGELOG 中的## 5.1.0 2017-05-14是一个以视频体验打磨为核心的小版本它修复了 Firefox 录制视频长期存在的黑边问题、解决了设置超大 viewport 后视频画面错乱的问题并首次为 Chrome 引入了 Basic Auth 认证测试支持。同时这个版本还带来了一个非常实用的新工具tools/combineVideos.sh让你像 WebPageTest 那样把两次测试的视频并排对比。阅读本文你将了解这些修复背后的视频分析工作流、--basicAuth参数的正确用法、combineVideos.sh的完整调用与实现原理以及backEndTime指标在报告中的新呈现方式。说明本文以 5.1 发布博客为骨架结合当前仓库源码lib/、tools/、docs/逐项验证帮助你理解这些能力的历史由来与今日用法。文中的参数说明以当前仓库实际实现为准并标注了适用前提。背景视频在 sitespeed.io 中的角色与黑边问题的来源sitespeed.io 通过 Browsertime录制先把浏览器背景设为橙色VisualMetrics 依靠这个橙色帧确定导航开始的时间点随后切回白色并加载被测 URL用 FFmpeg 以无损方式录屏分析运行 VisualMetrics 移除橙色帧、逐帧计算视觉进度最后把原始视频转码为体积更小、更适合浏览器播放的压缩 mp4。在这个流程中视频画面本身是否干净直接关系到视觉类指标的计算准确性。5.1 发布博客提到的两个 Firefox 问题正是发生在这个环节黑边问题自 sitespeed.io 引入视频功能以来Firefox 录制的视频一直带有黑色边框。作者在博客中坦承It wasnt affecting metrics——黑边本身不影响 Speed Index 等指标的计算但画面不美观也无法得到全质量的 Firefox 视频Viewport 放大问题当用户把 viewport 设置得比默认更大时Firefox 录制的视频画面会look broken画面错乱/比例异常。这两个问题在 5.1 中随 Browsertime 1.2.5 一并修复CHANGELOG 明确记录New Browsertime 1.2.5 with fine tuned video for Firefox。随后 5.1.12017-05-23又把 Browsertime 升到 1.2.6修复了设置 Firefox Preferences 不生效的问题CHANGELOG。在当时的版本语境下Skål och hurra!瑞典语干杯万岁是作者对这次修复的庆祝——从 5.1 起Firefox 也能产出满质量、无黑边的测试视频。视频相关的参数体系如何配置录制与质量围绕视频录制video.js 维护了一套完整的命令行参数理解它们能帮你把视频修复的价值真正用起来参数别名默认值作用--browsertime.visualMetrics--visualMetrics/--speedIndex—计算 SpeedIndex、First Visual Change、Last Visual Change 等视觉指标需要 FFmpeg 与 Python 依赖--browsertime.video--video—录制视频并保存设为false可移除因开启 visualMetrics 而生成的视频--browsertime.videoParams.framerate--videoParams.framerate/--fps30每秒帧数一般不建议低于 30否则影响视觉指标精度--browsertime.videoParams.crf--videoParams.crf23转码时的恒定质量因子CRF控制最终视频画质--browsertime.videoParams.convert--videoParams.converttrue是否把原始视频转码为通用播放格式关掉可加快测试--browsertime.videoParams.addTimer--videoParams.addTimertrue是否在视频上叠加计时器与指标标注--browsertime.videoParams.keepOriginalVideo--videoParams.keepOriginalVideofalse保留无损原始视频用于上报 VisualMetrics bug其中 CRF 参数正是黑边修复间接相关的质量控制点视频先以接近无损的方式录制再按--videoParams.crf 23转码。如果对画质有更高要求可以调低 CRF 数值数值越低画质越高、文件越大。Basic Auth 支持--basicAuth usernamepassword5.1 的第二个核心功能是支持测试位于 HTTP Basic Auth 保护之后的站点。用法非常直接--basicAuth usernamepassword当时有两个明确的适用限制博客原文声明仅 Chrome 可用Basic Auth 支持只覆盖 ChromeFirefox 待定Firefox 的支持要等 Selenium 的 WebExtensions 修复博客提到的 Tobias 在 Selenium 的 PR随 Firefox 54 发布。从当前仓库的实现看--basicAuth依然作为正式参数保留。在 browser.js 中它的定义是.option(browsertime.basicAuth, { describe: Use it if your server is behind Basic Auth. Format: usernamepassword. Only works in Chrome and Firefox., group: Browser, alias: basicAuth })两点值得注意的演进适用浏览器已扩展到 Firefox当前参数描述为 Only works in Chrome and Firefox意味着当年博客里仅 Chrome的限制在后续版本中已被突破现在 Chrome 与 Firefox 均可使用实现机制根据浏览器文档的说明当你在测试中加入请求头、Cookie、Basic Auth、域名屏蔽或浏览器端清缓存等操作时浏览器会打开 Browsertime 扩展来完成这些注入——也就是说 Basic Auth 不是靠修改 URL 中的user:passhost实现的而是通过扩展在浏览器内部完成的。如果你正在使用配置文件也可以把参数写进 JSON 配置对应的正式配置项名为browsertime.basicAuth见配置文档。注意Basic Auth 通过明文凭证访问被测站点请确保测试环境的凭证安全不要在生产公共实例上使用真实账号密码。视频对比利器combineVideos.sh脚本详解你试过吗没有的话真的应该试试——这是作者在 5.1 博客里对combineVideos.sh的推荐语。它的作用是把两个测试视频并排合成一个并适当放慢速度让你直观对比两次运行例如优化前后、不同浏览器之间的加载过程。用法脚本位于仓库的 tools/combineVideos.sh调用方式摘自视频文档# 下载视频对比工具脚本运行只需要 Docker curl -O https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/tools/combineVideos.sh chmod x combineVideos.sh # 把两次测试的视频并排合成 ./combineVideos.sh file1.mp4 file2.mp4脚本支持三个参数参数含义说明$1视频一必填须为存在的文件$2视频二必填须为存在的文件$3输出文件名可选默认生成为文件1名-vs-文件2名.mp4输出视频把两个原视频左右并排side by side并放慢 5 倍SLOWDOWN5.0以便观察细节画面顶部还会叠加 file1 vs file2 的白色文字标签。实现原理拆解从脚本源码可以拆出三个关键步骤第一步参数与文件校验if [[ -z $1 || -z $2 ]]; then echo Missing input parameters echo $0 file1 file2 [outputfile.mp4] exit 1 fi if [ ! -f $1 ] || [ ! -f $2 ] ; then echo File $1 or $2 not found! exit 1 fi第二步把视频放进临时目录挂载进 Docker 执行 ffmpeg 并排合成TMP_VIDEO_DIRtmp-video FILE1$(basename $1) NAME1$(basename $1 .mp4) NAME2$(basename $2 .mp4) ... docker run -v $(pwd):/video sitespeedio/visualmetrics-deps ffmpeg \ -i /video/$TMP_VIDEO_DIR/$FILE1 \ -i /video/$TMP_VIDEO_DIR/$FILE2 \ -filter_complex [0:v]padiw*2:ih[int];[int][1:v]overlayW/2:0[vid] \ -map [vid] \ -c:v libx264 -crf 23 -preset veryfast \ /video/$TMP_VIDEO_DIR/output.mp4这里用 ffmpeg 的filter_complex把第一个视频左侧补白padiw*2:ih再把第二个视频覆盖到右半屏overlayW/2:0得到左右并排画面以libx264、crf 23、veryfast预设编码。第三步整体放慢 5 倍并叠加对比标签docker run -v $(pwd):/video sitespeedio/visualmetrics-deps ffmpeg \ -i /video/$TMP_VIDEO_DIR/output.mp4 \ -filter:v setpts5.0*PTS \ -vf drawtexttext$NAME1 vs $NAME2:fontcolorwhite:fontsize60:box1:boxcolor0x000000AA:x(w-tw)/2:y40 \ /video/${OUTPUT_FILE}setpts5.0*PTS把播放速度放慢到原来的 1/5drawtext在顶部居中叠加半透明黑底白字的 file1 vs file2 标签最后输出到目标文件并清理临时目录。整个脚本唯一的外部依赖是 Docker 镜像sitespeedio/visualmetrics-deps——这也是为什么你只需要 Docker就能运行对比工具。Summary Timings 新指标backEndTime5.1 的第三项改进是在 Summary Timings汇总计时中展示backEndTime方便找出具有相同后端响应时间的那些运行。backEndTime即常说的 TTFBTime To First Byte浏览器发出请求到收到第一个字节的时间是衡量服务器响应速度的关键指标。在报告中backEndTime的展示层级由 friendlynames.js 定义backEndTime: { path: statistics.timings.pageTimings.backEndTime.median, summaryPath: pageTimings.backEndTime, runPath: timings.pageTimings.backEndTime, }在页面汇总page summary模板中它被渲染为一行明确的 Time To First Byte (TTFB)见 summaryBox.pug。你可以在以下场景看到它的身影页面级别的汇总与单次迭代页面iteration/index.pug渲染页的 Render Phase 阶段图0 → TTFB段代表 DNS、TCP、TLS 以及等待服务器开始返回字节的时间_renderPhase.pug指标页的 TTFB 磁贴metrics/index.pug可视化进度Visual Progress时间线中的 TTFB 标记visualProgress.pug。值得一提的是汇总框的默认阈值定义在 summaryBoxesDefaultLimits.jsbackEndTime: { green: 800, yellow: 1800 }即 TTFB 小于 800ms 视为绿色健康800–1800ms 为黄色警告超过 1800ms 为红色。这与现代 Web Vitals 中 TTFB 的推荐阈值0.8 秒内一致——说明 5.1 引入的这项展示能力今天仍是性能监控的核心构成。其他值得注意的变化5.1 还包含两处工程细节改进虽然小但对排障很有价值WebPageTest 失败时始终记录其任务 ID当 WebPageTest 测试失败时日志中一定会输出 WebPageTest 的 id方便你回溯错误对应的那次云端测试。这项改动被记录在 CHANGELOGAlways log the WebPageTest id in the error logs if WebPageTest fails下载文件时文件名包含浏览器名避免多次测试下载同名资源时互相覆盖CHANGELOG。此外 5.1 还升级了 PerfCascade 2.0.0瀑布图性能与键盘可达性改进并包含一个与视频生态相关的升级新版 VisualMetrics 解决了 Chrome 58 模拟移动设备模式下开始出现的问题——这再次印证视频修复是 5.1 的主题。小结sitespeed.io 5.1 是一个典型的质量修补 实用工具版本Firefox 视频黑边与 viewport 问题修复让 Firefox 进入了全质量视频时代--basicAuth usernamepassword打开了带认证站点的测试场景combineVideos.sh用最少的依赖Docker提供了对标 WebPageTest 的视频并排对比能力backEndTime进入 Summary Timings 则让后端响应时间成为每次测试默认可见的关键信号。这些能力在今天依然可以在当前仓库中找到对应实现与文档——无论是 video.js 中丰富的视频参数、browser.js 中沿用至今的--basicAuth还是 combineVideos.sh 中依旧可用的对比脚本。对于需要录制并对比浏览器渲染过程的性能团队而言这套组合至今仍是一份可直接落地的工作流。赞分享测试性能剖析指标监控【免费下载链接】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点击查看免费下载相关推荐Mixtral-offloading与HQQ量化突破大模型内存限制的终极方案Mixtral offloading与HQQ量化突破大模型内存限制的终极方案 Mixtral offloading项目为运行Mixtral 8x7B模型提供了视频对比工具video-compare对VVC编解码支持的技术分析视频对比工具video compare对VVC编解码支持的技术分析 视频对比工具video compare是一款用于比较两个视频文件差异的开源软件。近期有用户反音视频视频处理K9s v0.3.0 发布解读PodDisruptionBudgetPDB视图支持与问题修复盘点K9s v0.3.0 发布解读PodDisruptionBudgetPDB视图支持与问题修复盘点 导读 本文围绕 K9s v0.3.0 的发布变更重点解云原生容器编排CLI运维上一篇Fast-Ansible处理器事件驱动自动化的实现原理与实践下一篇Wasp TypeScript 支持完全指南JS 项目渐进式迁移与端到端类型安全实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考