HyperFrames v0.6.79以domcontentloaded修复媒体预加载引发的 Parity 导航超时【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读HyperFrames v0.6.79发布于 2026-06-06是一期聚焦渲染可靠性修复的版本它将 Parity 测试框架的页面导航等待条件从load切换为domcontentloaded从而避免在包含大量或大体积媒体源的合成场景中因视频预加载拖慢load事件而导致的导航超时。本文以该版本的核心修复为主线先说明问题成因与修复原理再结合仓库源码深入拆解 Parity 测试框架的页面导航、媒体样式捕获、帧级对比等实现细节并给出可直接复现的 CLI 运行方式帮助开发者理解并复用自己的渲染一致性验证能力。版本信息与修复内容本次发布的核心内容非常聚焦只包含一项引擎层修复修复标题使用domcontentloaded避免视频预加载导致的导航超时修复对象engine包中的 Parity 测试框架页面导航逻辑影响范围包含大量媒体源视频、图片或超大媒体资源的合成composition在 Parity 测试导航阶段的稳定性发布渠道常规补丁版本紧接 v0.6.78无破坏性变更从源码与发布记录看这次修改属于典型的「时序稳定性」优化它不改变渲染输出本身而是改变测试框架等待页面就绪的判断标准使测试过程不再被浏览器加载策略中的媒体预加载阻塞。问题成因load与domcontentloaded的语义差异在浏览器加载模型中两个生命周期事件存在本质区别domcontentloadedHTML 文档解析完成、DOM 树构建完毕即触发。此时样式表、脚本可能仍在加载但页面结构已可交互。load页面及其所有依赖资源包括图片、视频、样式表、脚本、iframe全部加载完成后才触发。video元素是load事件的常见阻塞源浏览器的媒体预加载preload会尝试拉取视频元数据甚至部分媒体数据。当一个 composition 中包含大量视频源例如多个video[data-start]媒体轨道或单个大体积视频文件时预加载耗时可能远超导航等待预算导致测试框架中的page.goto()因等待load事件而超时失败。修复方案Parity 页面导航切换等待条件修复的关键改动位于 packages/producer/src/parity-harness.ts 的captureParitySide函数async function captureParitySide( browser: Browser, url: string, checkpointSec: number, fps: number, emulateProducerSwap: boolean, ): Promise{ buffer: Buffer; styles: Recordstring, unknown } { const page await browser.newPage(); try { // Use domcontentloaded to avoid blocking on video media preloading, which // can exceed the navigation timeout for compositions with many video sources. await page.goto(url, { waitUntil: domcontentloaded, timeout: 60_000, }); await waitForParityReady(page); const buffer await captureCheckpoint(page, checkpointSec, fps, emulateProducerSwap); const styles await captureStyleSnapshot(page); return { buffer, styles }; } finally { await page.close().catch(() {}); } }这一改动的关键点等待条件变更waitUntil由load默认值改为domcontentloaded导航不再等待媒体资源完全预加载完成超时预算明确导航超时设置为60_000毫秒60 秒为复杂合成提供充足时间同时避免被媒体预加载无限拖延就绪判定后置导航完成之后由waitForParityReadypackages/producer/src/parity-harness.ts继续等待应用层的就绪信号async function waitForParityReady(page: Page): Promisevoid { await page.waitForFunction( () { const win window as unknown as { __playerReady?: boolean; __renderReady?: boolean }; return Boolean(win.__playerReady win.__renderReady); }, { timeout: 30_000 }, ); await page.evaluate(() document.fonts.ready); }这说明修复并没有放松对「内容就绪」的要求——domcontentloaded只决定导航何时返回真正的渲染就绪仍由应用注入的__playerReady/__renderReady标志和document.fonts.ready双重保证。媒体帧的实际解码与绘制是在captureCheckpoint的截图流程中通过画布逐帧读取完成的与导航事件解耦。源码印证domcontentloaded在引擎层的普遍采用domcontentloaded并非 Parity 框架独有引擎内部多处页面导航都遵循「尽早返回 业务逻辑自行就绪」的模式使用位置用途路径Parity 捕获两套渲染链路逐帧对比的页面导航packages/producer/src/parity-harness.ts音频 FX 渲染AudioWorklet 宿主页加载packages/engine/src/services/audioFxRender.ts帧捕获渲染帧抓取时的页面导航packages/engine/src/services/frameCapture.tsBeginFrame 探针探测 Chromium 无头渲染能力packages/engine/src/services/browserManager.ts浏览器就绪检查验证 WebGL 供应商信息packages/engine/src/utils/readWebGlVendorInfoFromCanvas.tsSwiftShader 校验确认软件渲染可用packages/engine/src/utils/assertSwiftShader.ts以音频 FX 渲染为例packages/engine/src/services/audioFxRender.ts// AudioWorklet is only exposed in a secure context, and about:blank is // not one — the module would fail with an opaque error. A file:// page // qualifies and needs no listening socket. const hostPage join(hostDir, audio-fx.html); writeFileSync(hostPage, !doctype htmlmeta charsetutf-8titleaudio fx/title); await page.goto(pathToFileURL(hostPage).href, { waitUntil: domcontentloaded }); await page.addScriptTag({ content: getAudioFxRuntimeScript() });导航返回后立即通过addScriptTag注入运行时脚本页面本身无需等待任何外部资源。这种「导航只保证文档骨架、功能就绪由显式等待负责」的模式正是本次 Parity 修复所对齐的引擎层既有实践。另外引擎侧为这类导航专门定义了等待预算配置。在 packages/engine/src/config.ts 附近的配置注释中明确写到浏览器必须在domcontentloaded时间内达到该预算而媒体资源沉重的合成正是导致预算超限的典型场景。深入拆解Parity 框架如何保证两套渲染链路逐帧一致Parity 测试渲染一致性验证是 producer 包中用于对比「预览链路」与「生产渲染链路」输出一致性的自动化测试设施。核心实现集中在 packages/producer/src/parity-harness.ts本次domcontentloaded修复正是其导航环节的稳定性保障。1. 双 URL 输入与参数解析框架需要同时提供两个 URL分别代表两条渲染链路packages/producer/src/parity-harness.tsconst previewUrl args.get(preview-url) || ; const producerUrl args.get(producer-url) || ; if (!previewUrl || !producerUrl) { throw new Error( Missing required args. Usage: --preview-url url --producer-url url [--checkpoints 0,1,2] [--fps 30] [--width 1920] [--height 1080] [--allow-mismatch-ratio 0], ); }全部命令行参数如下参数默认值说明--preview-url必填预览链路页面地址--producer-url必填生产渲染链路页面地址--checkpoints0,1,2,3,5需要对比的时间点秒逗号分隔自动过滤非法值--fps30时间点量化到帧的帧率基准--width/--height1920/1080浏览器视口尺寸--allow-mismatch-ratio0允许的不匹配比率0~1超过则判定失败--artifacts-dir.debug/parity-harness产物输出目录--emulate-producer-swapfalse是否模拟生产渲染中「视频换帧」行为2. 时间点量化checkpoint 对齐到精确帧每个 checkpoint 秒数先经过quantizeTimeToFrame由 packages/engine/src/utils/parityContract.ts 转出实现位于hyperframes/core量化到帧边界再通过renderSeek/seek精确跳转并触发 GSAP tickerpackages/producer/src/parity-harness.tsconst quantized quantizeTimeToFrame(checkpointSec, fps); await page.evaluate( ({ time, targetFps }) { const player win.__player; if (!player) return; const safe Math.max(0, Number(time) || 0); const frame Math.floor(safe * targetFps 1e-9); const quantized frame / targetFps; if (typeof player.renderSeek function) { player.renderSeek(quantized); } else if (typeof player.seek function) { player.seek(quantized); } if (win.gsap?.ticker?.tick) { win.gsap.ticker.tick(); } }, { time: quantized, targetFps: fps }, );随后等待两帧requestAnimationFrame确保渲染完成再截取 PNG 截图packages/producer/src/parity-harness.ts。3. 哈希对比与差异产物两条链路在同一 checkpoint 的截图分别计算 SHA-256 哈希完全一致才算通过不一致时通过ffmpeg的blendall_modedifference生成差异图并输出两侧截图与样式快照 JSONpackages/producer/src/parity-harness.tsconst match previewHash producerHash; if (!match) mismatches 1; // ... const previewImagePath join(artifactDir, preview.png); const producerImagePath join(artifactDir, producer.png); const diffImagePath match ? null : join(artifactDir, diff.png);4. 媒体样式快照与视频换帧模拟Parity 不仅对比像素还对比媒体元素的视觉样式。captureStyleSnapshot会遍历video[data-start]、img.__render_frame__、img.__preview_render_frame__、img.__parity_render_frame__等目标元素用getComputedStyle提取MEDIA_VISUAL_STYLE_PROPERTIES位于hyperframes/core所定义的视觉样式属性packages/producer/src/parity-harness.ts。而emulateProducerVideoSwap则模拟生产渲染链路的「视频抽帧替代」行为将video[data-start]当前帧绘制到 canvas转成 data URL 填充到相邻的__parity_render_frame__图片元素并隐藏原视频packages/producer/src/parity-harness.ts。这也是 v0.6.79 修复所服务的场景视频源越多、越大预加载越慢导航超时风险越高。5. 固定渲染环境为保证两次对比在同一渲染环境下进行浏览器启动参数固定了 GPU 与字体行为packages/producer/src/parity-harness.tsconst browserTarget process.env.PUPPETEER_EXECUTABLE_PATH ? { executablePath: process.env.PUPPETEER_EXECUTABLE_PATH } : { channel: chrome as const }; const browser await puppeteer.launch({ ...browserTarget, headless: true, defaultViewport: { width: options.width, height: options.height, deviceScaleFactor: 1 }, args: [ --no-sandbox, --disable-setuid-sandbox, --disable-dev-shm-usage, --disable-accelerated-2d-canvas, --enable-webgl, --ignore-gpu-blocklist, --use-glangle, --use-angleswiftshader, --font-render-hintingnone, --force-color-profilesrgb, --window-size${options.width},${options.height}, ], });deviceScaleFactor: 1、--force-color-profilesrgb、--font-render-hintingnone等设置共同保证了像素级对比的确定性同时可通过PUPPETEER_EXECUTABLE_PATH环境变量指定自定义 Chrome 可执行文件路径。实战复现在本地运行 Parity 对比producer 包已在 packages/producer/package.json 中预置了 npm scripts可直接复现该修复所在的完整流程# 完整参数形式也可在包内直接运行 package.json 预置脚本 npx tsx packages/producer/src/parity-harness.ts \ --preview-url http://127.0.0.1:4173/minimal-wysiwyg.html \ --producer-url http://127.0.0.1:4173/minimal-wysiwyg.html?modeproducer \ --checkpoints 0,0.5,1,1.5 \ --fps 30 \ --width 1920 \ --height 1080 \ --allow-mismatch-ratio 0 \ --emulate-producer-swap true \ --artifacts-dir .debug/parity-harness-ci运行前置条件与行为说明需要本地tsx运行器与 Chrome/Chromium可通过PUPPETEER_EXECUTABLE_PATH指定路径--preview-url与--producer-url对应同一合成文档的预览模式与生产渲染模式例如以?modeproducer区分产物写入--artifacts-dir结构为每个 checkpoint 一个目录preview.png、producer.png、不匹配时的diff.png以及preview-styles.json/producer-styles.json样式快照最终生成summary.json包含totalCheckpoints、mismatches、mismatchRatio、pass字段不匹配率超过allowMismatchRatio时进程以退出码 1 结束可接入 CI 门禁。在包含大量视频源的合成上使用 v0.6.79 的domcontentloaded导航后Parity 导航阶段不再等待媒体预加载完成导航超时问题得到消除截图对比所需的媒体帧在 checkpoint 阶段按需解码保证了对比的准确性不受影响。验证与回归相关测试约定引擎侧针对浏览器导航等待条件有对应测试约定。在 packages/engine/src/services/browserManager.test.ts 中测试用例明确断言导航使用waitUntil: domcontentloaded将「尽早导航、避免媒体预加载阻塞」固化为可回归验证的行为契约。测试 fixtures 说明文档位于 packages/producer/tests/parity/README.md用于说明src/parity-harness.ts所消费的 fixtures 结构Parity 相关的 plan 级对比面向录制/计划产物的语义一致性验证则由 packages/producer/src/plan-parity-contract.ts 等模块承担与本次修复的帧级像素对比互补。小结HyperFrames v0.6.79 的修复虽小却精准命中了 Parity 测试在媒体密集型合成上的稳定性痛点将page.goto的waitUntil从load切换为domcontentloaded从根源上避免了视频预加载拖垮导航超时同时通过waitForParityReady与 checkpoint 阶段按需解码的截图流程保证了「导航快」与「对比准」两不误。对于使用 HyperFrames 的开发者可以从本版本获得两点可直接落地的经验渲染链路对比可直接复用parity-harness.ts的双 URL 逐帧对比模型配合--checkpoints、--allow-mismatch-ratio与 CI 退出码实现自动化的回归门禁导航等待策略在自建的浏览器自动化脚本中凡是涉及视频、图片等媒体资源的页面优先使用domcontentloaded导航并辅以应用层就绪信号等待能显著提升长任务场景的稳定性。参考文件索引发布说明releases/v0.6.79.mdParity 核心实现packages/producer/src/parity-harness.tsParity 契约再导出packages/producer/src/utils/parityContract.tsParity fixtures 说明packages/producer/tests/parity/README.md引擎导航等待测试packages/engine/src/services/browserManager.test.ts引擎导航预算配置packages/engine/src/config.ts引擎内同类导航实践packages/engine/src/services/audioFxRender.ts、packages/engine/src/services/frameCapture.ts【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames v0.6.79：以 `domcontentloaded` 修复媒体预加载引发的 Parity 导航超时
HyperFrames v0.6.79以domcontentloaded修复媒体预加载引发的 Parity 导航超时【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读HyperFrames v0.6.79发布于 2026-06-06是一期聚焦渲染可靠性修复的版本它将 Parity 测试框架的页面导航等待条件从load切换为domcontentloaded从而避免在包含大量或大体积媒体源的合成场景中因视频预加载拖慢load事件而导致的导航超时。本文以该版本的核心修复为主线先说明问题成因与修复原理再结合仓库源码深入拆解 Parity 测试框架的页面导航、媒体样式捕获、帧级对比等实现细节并给出可直接复现的 CLI 运行方式帮助开发者理解并复用自己的渲染一致性验证能力。版本信息与修复内容本次发布的核心内容非常聚焦只包含一项引擎层修复修复标题使用domcontentloaded避免视频预加载导致的导航超时修复对象engine包中的 Parity 测试框架页面导航逻辑影响范围包含大量媒体源视频、图片或超大媒体资源的合成composition在 Parity 测试导航阶段的稳定性发布渠道常规补丁版本紧接 v0.6.78无破坏性变更从源码与发布记录看这次修改属于典型的「时序稳定性」优化它不改变渲染输出本身而是改变测试框架等待页面就绪的判断标准使测试过程不再被浏览器加载策略中的媒体预加载阻塞。问题成因load与domcontentloaded的语义差异在浏览器加载模型中两个生命周期事件存在本质区别domcontentloadedHTML 文档解析完成、DOM 树构建完毕即触发。此时样式表、脚本可能仍在加载但页面结构已可交互。load页面及其所有依赖资源包括图片、视频、样式表、脚本、iframe全部加载完成后才触发。video元素是load事件的常见阻塞源浏览器的媒体预加载preload会尝试拉取视频元数据甚至部分媒体数据。当一个 composition 中包含大量视频源例如多个video[data-start]媒体轨道或单个大体积视频文件时预加载耗时可能远超导航等待预算导致测试框架中的page.goto()因等待load事件而超时失败。修复方案Parity 页面导航切换等待条件修复的关键改动位于 packages/producer/src/parity-harness.ts 的captureParitySide函数async function captureParitySide( browser: Browser, url: string, checkpointSec: number, fps: number, emulateProducerSwap: boolean, ): Promise{ buffer: Buffer; styles: Recordstring, unknown } { const page await browser.newPage(); try { // Use domcontentloaded to avoid blocking on video media preloading, which // can exceed the navigation timeout for compositions with many video sources. await page.goto(url, { waitUntil: domcontentloaded, timeout: 60_000, }); await waitForParityReady(page); const buffer await captureCheckpoint(page, checkpointSec, fps, emulateProducerSwap); const styles await captureStyleSnapshot(page); return { buffer, styles }; } finally { await page.close().catch(() {}); } }这一改动的关键点等待条件变更waitUntil由load默认值改为domcontentloaded导航不再等待媒体资源完全预加载完成超时预算明确导航超时设置为60_000毫秒60 秒为复杂合成提供充足时间同时避免被媒体预加载无限拖延就绪判定后置导航完成之后由waitForParityReadypackages/producer/src/parity-harness.ts继续等待应用层的就绪信号async function waitForParityReady(page: Page): Promisevoid { await page.waitForFunction( () { const win window as unknown as { __playerReady?: boolean; __renderReady?: boolean }; return Boolean(win.__playerReady win.__renderReady); }, { timeout: 30_000 }, ); await page.evaluate(() document.fonts.ready); }这说明修复并没有放松对「内容就绪」的要求——domcontentloaded只决定导航何时返回真正的渲染就绪仍由应用注入的__playerReady/__renderReady标志和document.fonts.ready双重保证。媒体帧的实际解码与绘制是在captureCheckpoint的截图流程中通过画布逐帧读取完成的与导航事件解耦。源码印证domcontentloaded在引擎层的普遍采用domcontentloaded并非 Parity 框架独有引擎内部多处页面导航都遵循「尽早返回 业务逻辑自行就绪」的模式使用位置用途路径Parity 捕获两套渲染链路逐帧对比的页面导航packages/producer/src/parity-harness.ts音频 FX 渲染AudioWorklet 宿主页加载packages/engine/src/services/audioFxRender.ts帧捕获渲染帧抓取时的页面导航packages/engine/src/services/frameCapture.tsBeginFrame 探针探测 Chromium 无头渲染能力packages/engine/src/services/browserManager.ts浏览器就绪检查验证 WebGL 供应商信息packages/engine/src/utils/readWebGlVendorInfoFromCanvas.tsSwiftShader 校验确认软件渲染可用packages/engine/src/utils/assertSwiftShader.ts以音频 FX 渲染为例packages/engine/src/services/audioFxRender.ts// AudioWorklet is only exposed in a secure context, and about:blank is // not one — the module would fail with an opaque error. A file:// page // qualifies and needs no listening socket. const hostPage join(hostDir, audio-fx.html); writeFileSync(hostPage, !doctype htmlmeta charsetutf-8titleaudio fx/title); await page.goto(pathToFileURL(hostPage).href, { waitUntil: domcontentloaded }); await page.addScriptTag({ content: getAudioFxRuntimeScript() });导航返回后立即通过addScriptTag注入运行时脚本页面本身无需等待任何外部资源。这种「导航只保证文档骨架、功能就绪由显式等待负责」的模式正是本次 Parity 修复所对齐的引擎层既有实践。另外引擎侧为这类导航专门定义了等待预算配置。在 packages/engine/src/config.ts 附近的配置注释中明确写到浏览器必须在domcontentloaded时间内达到该预算而媒体资源沉重的合成正是导致预算超限的典型场景。深入拆解Parity 框架如何保证两套渲染链路逐帧一致Parity 测试渲染一致性验证是 producer 包中用于对比「预览链路」与「生产渲染链路」输出一致性的自动化测试设施。核心实现集中在 packages/producer/src/parity-harness.ts本次domcontentloaded修复正是其导航环节的稳定性保障。1. 双 URL 输入与参数解析框架需要同时提供两个 URL分别代表两条渲染链路packages/producer/src/parity-harness.tsconst previewUrl args.get(preview-url) || ; const producerUrl args.get(producer-url) || ; if (!previewUrl || !producerUrl) { throw new Error( Missing required args. Usage: --preview-url url --producer-url url [--checkpoints 0,1,2] [--fps 30] [--width 1920] [--height 1080] [--allow-mismatch-ratio 0], ); }全部命令行参数如下参数默认值说明--preview-url必填预览链路页面地址--producer-url必填生产渲染链路页面地址--checkpoints0,1,2,3,5需要对比的时间点秒逗号分隔自动过滤非法值--fps30时间点量化到帧的帧率基准--width/--height1920/1080浏览器视口尺寸--allow-mismatch-ratio0允许的不匹配比率0~1超过则判定失败--artifacts-dir.debug/parity-harness产物输出目录--emulate-producer-swapfalse是否模拟生产渲染中「视频换帧」行为2. 时间点量化checkpoint 对齐到精确帧每个 checkpoint 秒数先经过quantizeTimeToFrame由 packages/engine/src/utils/parityContract.ts 转出实现位于hyperframes/core量化到帧边界再通过renderSeek/seek精确跳转并触发 GSAP tickerpackages/producer/src/parity-harness.tsconst quantized quantizeTimeToFrame(checkpointSec, fps); await page.evaluate( ({ time, targetFps }) { const player win.__player; if (!player) return; const safe Math.max(0, Number(time) || 0); const frame Math.floor(safe * targetFps 1e-9); const quantized frame / targetFps; if (typeof player.renderSeek function) { player.renderSeek(quantized); } else if (typeof player.seek function) { player.seek(quantized); } if (win.gsap?.ticker?.tick) { win.gsap.ticker.tick(); } }, { time: quantized, targetFps: fps }, );随后等待两帧requestAnimationFrame确保渲染完成再截取 PNG 截图packages/producer/src/parity-harness.ts。3. 哈希对比与差异产物两条链路在同一 checkpoint 的截图分别计算 SHA-256 哈希完全一致才算通过不一致时通过ffmpeg的blendall_modedifference生成差异图并输出两侧截图与样式快照 JSONpackages/producer/src/parity-harness.tsconst match previewHash producerHash; if (!match) mismatches 1; // ... const previewImagePath join(artifactDir, preview.png); const producerImagePath join(artifactDir, producer.png); const diffImagePath match ? null : join(artifactDir, diff.png);4. 媒体样式快照与视频换帧模拟Parity 不仅对比像素还对比媒体元素的视觉样式。captureStyleSnapshot会遍历video[data-start]、img.__render_frame__、img.__preview_render_frame__、img.__parity_render_frame__等目标元素用getComputedStyle提取MEDIA_VISUAL_STYLE_PROPERTIES位于hyperframes/core所定义的视觉样式属性packages/producer/src/parity-harness.ts。而emulateProducerVideoSwap则模拟生产渲染链路的「视频抽帧替代」行为将video[data-start]当前帧绘制到 canvas转成 data URL 填充到相邻的__parity_render_frame__图片元素并隐藏原视频packages/producer/src/parity-harness.ts。这也是 v0.6.79 修复所服务的场景视频源越多、越大预加载越慢导航超时风险越高。5. 固定渲染环境为保证两次对比在同一渲染环境下进行浏览器启动参数固定了 GPU 与字体行为packages/producer/src/parity-harness.tsconst browserTarget process.env.PUPPETEER_EXECUTABLE_PATH ? { executablePath: process.env.PUPPETEER_EXECUTABLE_PATH } : { channel: chrome as const }; const browser await puppeteer.launch({ ...browserTarget, headless: true, defaultViewport: { width: options.width, height: options.height, deviceScaleFactor: 1 }, args: [ --no-sandbox, --disable-setuid-sandbox, --disable-dev-shm-usage, --disable-accelerated-2d-canvas, --enable-webgl, --ignore-gpu-blocklist, --use-glangle, --use-angleswiftshader, --font-render-hintingnone, --force-color-profilesrgb, --window-size${options.width},${options.height}, ], });deviceScaleFactor: 1、--force-color-profilesrgb、--font-render-hintingnone等设置共同保证了像素级对比的确定性同时可通过PUPPETEER_EXECUTABLE_PATH环境变量指定自定义 Chrome 可执行文件路径。实战复现在本地运行 Parity 对比producer 包已在 packages/producer/package.json 中预置了 npm scripts可直接复现该修复所在的完整流程# 完整参数形式也可在包内直接运行 package.json 预置脚本 npx tsx packages/producer/src/parity-harness.ts \ --preview-url http://127.0.0.1:4173/minimal-wysiwyg.html \ --producer-url http://127.0.0.1:4173/minimal-wysiwyg.html?modeproducer \ --checkpoints 0,0.5,1,1.5 \ --fps 30 \ --width 1920 \ --height 1080 \ --allow-mismatch-ratio 0 \ --emulate-producer-swap true \ --artifacts-dir .debug/parity-harness-ci运行前置条件与行为说明需要本地tsx运行器与 Chrome/Chromium可通过PUPPETEER_EXECUTABLE_PATH指定路径--preview-url与--producer-url对应同一合成文档的预览模式与生产渲染模式例如以?modeproducer区分产物写入--artifacts-dir结构为每个 checkpoint 一个目录preview.png、producer.png、不匹配时的diff.png以及preview-styles.json/producer-styles.json样式快照最终生成summary.json包含totalCheckpoints、mismatches、mismatchRatio、pass字段不匹配率超过allowMismatchRatio时进程以退出码 1 结束可接入 CI 门禁。在包含大量视频源的合成上使用 v0.6.79 的domcontentloaded导航后Parity 导航阶段不再等待媒体预加载完成导航超时问题得到消除截图对比所需的媒体帧在 checkpoint 阶段按需解码保证了对比的准确性不受影响。验证与回归相关测试约定引擎侧针对浏览器导航等待条件有对应测试约定。在 packages/engine/src/services/browserManager.test.ts 中测试用例明确断言导航使用waitUntil: domcontentloaded将「尽早导航、避免媒体预加载阻塞」固化为可回归验证的行为契约。测试 fixtures 说明文档位于 packages/producer/tests/parity/README.md用于说明src/parity-harness.ts所消费的 fixtures 结构Parity 相关的 plan 级对比面向录制/计划产物的语义一致性验证则由 packages/producer/src/plan-parity-contract.ts 等模块承担与本次修复的帧级像素对比互补。小结HyperFrames v0.6.79 的修复虽小却精准命中了 Parity 测试在媒体密集型合成上的稳定性痛点将page.goto的waitUntil从load切换为domcontentloaded从根源上避免了视频预加载拖垮导航超时同时通过waitForParityReady与 checkpoint 阶段按需解码的截图流程保证了「导航快」与「对比准」两不误。对于使用 HyperFrames 的开发者可以从本版本获得两点可直接落地的经验渲染链路对比可直接复用parity-harness.ts的双 URL 逐帧对比模型配合--checkpoints、--allow-mismatch-ratio与 CI 退出码实现自动化的回归门禁导航等待策略在自建的浏览器自动化脚本中凡是涉及视频、图片等媒体资源的页面优先使用domcontentloaded导航并辅以应用层就绪信号等待能显著提升长任务场景的稳定性。参考文件索引发布说明releases/v0.6.79.mdParity 核心实现packages/producer/src/parity-harness.tsParity 契约再导出packages/producer/src/utils/parityContract.tsParity fixtures 说明packages/producer/tests/parity/README.md引擎导航等待测试packages/engine/src/services/browserManager.test.ts引擎导航预算配置packages/engine/src/config.ts引擎内同类导航实践packages/engine/src/services/audioFxRender.ts、packages/engine/src/services/frameCapture.ts【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考