185 lines
13 KiB
HTML
185 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Renderive Core2 全控件性能画廊</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<span class="brand-mark" aria-hidden="true">R2</span>
|
||
<div><p class="eyebrow">CORE2 · KERNEL · WEBSOCKET</p><h1>全控件 API 与帧策略性能画廊</h1></div>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<span id="connection-status" class="connection-status" data-state="connecting"><i></i><span>读取后端目录</span></span>
|
||
<button id="toggle-streams" class="quiet-button" type="button">暂停自动像素流</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div>
|
||
<p class="eyebrow">THREE REAL KERNEL STRATEGIES</p>
|
||
<h2>三套对称页面，同一批控件，直接比较</h2>
|
||
<p id="mode-description">所有属性、动作、观察者和性能数据均由后端通过 WebSocket 返回。</p>
|
||
</div>
|
||
<dl class="metrics">
|
||
<div><dt id="page-count">3</dt><dd>帧策略页</dd></div>
|
||
<div><dt id="case-count">—</dt><dd>每页控件</dd></div>
|
||
<div><dt id="canvas-count">—</dt><dd>独立场景</dd></div>
|
||
<div><dt id="api-count">—</dt><dd>手测入口</dd></div>
|
||
</dl>
|
||
</section>
|
||
|
||
<nav id="mode-tabs" class="mode-tabs" aria-label="Kernel 帧控制策略"></nav>
|
||
<nav id="category-filter" class="category-filter" aria-label="控件分类"></nav>
|
||
|
||
<main id="pages" class="pages" aria-live="polite">
|
||
<div class="loading-card"><span class="loader"></span><strong>等待后端返回控件与帧策略目录</strong></div>
|
||
</main>
|
||
|
||
<aside id="context-menu" class="context-menu" hidden aria-label="后端控件测试菜单">
|
||
<header class="menu-header">
|
||
<div><p id="menu-component" class="eyebrow"></p><h2 id="menu-title"></h2><p id="menu-description"></p></div>
|
||
<button id="menu-close" class="icon-button" type="button" aria-label="关闭">×</button>
|
||
</header>
|
||
<nav class="menu-tabs" aria-label="测试菜单页面">
|
||
<button type="button" data-tab="controls" class="active">控件属性</button>
|
||
<button type="button" data-tab="actions">专属 API</button>
|
||
<button type="button" data-tab="observer">Kernel 观察者</button>
|
||
<button type="button" data-tab="performance">性能</button>
|
||
</nav>
|
||
<div id="menu-body" class="menu-body"></div>
|
||
<footer class="menu-footer"><span id="menu-status">字段、验证与 API 映射来自后端 JSON</span><code>WS /renderive/gallery</code></footer>
|
||
</aside>
|
||
|
||
<div id="toast" class="toast" hidden></div>
|
||
|
||
<template id="page-template">
|
||
<section class="mode-page" hidden>
|
||
<header class="page-header"><div><p class="page-strategy"></p><h2 class="page-title"></h2></div><p class="page-description"></p></header>
|
||
<div class="gallery"></div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="card-template">
|
||
<article class="plot-card">
|
||
<header class="card-header">
|
||
<div><span class="card-category"></span><h3 class="card-title"></h3></div>
|
||
<div class="card-health">
|
||
<span class="motion-status" data-state="waiting"><i></i><span>等待动态帧</span></span>
|
||
<span class="card-socket" data-state="connecting"><i></i><span>连接中</span></span>
|
||
</div>
|
||
</header>
|
||
<div class="canvas-shell" tabindex="0">
|
||
<canvas aria-label="Core2 后端像素画布"></canvas>
|
||
<div class="canvas-hint">右键：本控件全部 API</div>
|
||
<div class="canvas-loading"><span class="loader"></span><small>创建 Kernel Scene</small></div>
|
||
</div>
|
||
<dl class="performance-strip">
|
||
<div><dt class="perf-fps">0.0</dt><dd>后端渲染 FPS</dd></div>
|
||
<div><dt class="perf-transport-fps">0.0</dt><dd>像素响应 FPS</dd></div>
|
||
<div><dt class="perf-present-fps">0.0</dt><dd>浏览器呈现 FPS</dd></div>
|
||
<div><dt class="perf-rtt">0.00</dt><dd>WS 往返 ms</dd></div>
|
||
<div><dt class="perf-overwritten">0</dt><dd>未呈现覆盖</dd></div>
|
||
<div><dt class="perf-render">0.00</dt><dd>Core 渲染 ms</dd></div>
|
||
<div><dt class="perf-encode">0.00</dt><dd>像素编码 ms</dd></div>
|
||
<div><dt class="perf-bandwidth">0.0</dt><dd>响应负载 MB/s</dd></div>
|
||
<div><dt class="perf-pending">0</dt><dd>Kernel 待处理</dd></div>
|
||
<div><dt class="perf-dropped">0</dt><dd>Kernel 丢弃</dd></div>
|
||
<div><dt class="perf-points">0→0</dt><dd>输入→绘制</dd></div>
|
||
<div><dt class="perf-limit">N/A</dt><dd>当前瓶颈</dd></div>
|
||
<div><dt class="perf-event">none</dt><dd>观察事件</dd></div>
|
||
<div><dt class="perf-timeouts">0</dt><dd>像素超时</dd></div>
|
||
<div><dt class="perf-pixel-age">—</dt><dd>最近像素龄</dd></div>
|
||
</dl>
|
||
<div class="limit-flags" aria-label="低延迟限速来源">
|
||
<strong>限速来源</strong>
|
||
<span class="limit-frequency">Kernel 用户频率：<b>未受限</b></span>
|
||
<span class="limit-paint">Kernel PaintEvent：<b>未受限</b></span>
|
||
<span class="limit-render">Kernel 后台渲染：<b>未受限</b></span>
|
||
<span class="limit-consumer">消费者反馈：<b>未受限</b></span>
|
||
</div>
|
||
<section class="kernel-observer-panel" aria-label="Kernel 低延迟全量统计">
|
||
<header>
|
||
<div><span>KERNEL <b data-observer-field="mode">low_latency</b> OBSERVER</span><strong data-observer-field="limit_state">frequency_limited</strong></div>
|
||
<div>事件 <b data-observer-field="last_event">none</b></div>
|
||
</header>
|
||
<div class="observer-counters">
|
||
<div><small>配置频率</small><b data-observer-field="configured_frequency_hz">0 Hz</b></div>
|
||
<div><small>观察次数</small><b data-observer-field="observation_count">0</b></div>
|
||
<div><small>最新序号</small><b data-observer-field="latest_sequence">0</b></div>
|
||
<div><small>发布</small><b data-observer-field="produced_frame_count">0</b></div>
|
||
<div><small>完成</small><b data-observer-field="consumed_frame_count">0</b></div>
|
||
<div><small>待处理</small><b data-observer-field="pending_frame_count">0</b></div>
|
||
<div><small>丢弃</small><b data-observer-field="dropped_frame_count">0</b></div>
|
||
<div><small>失败</small><b data-observer-field="failed_operation_count">0</b></div>
|
||
</div>
|
||
<div class="latency-summary">
|
||
<div><small>目标间隔</small><b data-observer-field="target_interval_ns">0 ns</b></div>
|
||
<div><small>PaintEvent</small><b data-observer-field="paint_duration_ns">0 ns</b></div>
|
||
<div><small>后台渲染</small><b data-observer-field="render_duration_ns">0 ns</b></div>
|
||
<div><small>内部瓶颈</small><b data-observer-field="bottleneck_duration_ns">0 ns</b></div>
|
||
<div><small>消费者总开关</small><b data-observer-field="consumer_feedback_master_enabled">关闭</b></div>
|
||
<div><small>Kernel 反馈有效</small><b data-observer-field="consumer_feedback_enabled">关闭</b></div>
|
||
<div><small>像素响应反馈</small><b data-observer-field="consumer_pixel_feedback_enabled">关闭</b></div>
|
||
<div><small>浏览器呈现反馈</small><b data-observer-field="consumer_presentation_feedback_enabled">关闭</b></div>
|
||
<div><small>手动消费者反馈</small><b data-observer-field="consumer_manual_feedback_enabled">关闭</b></div>
|
||
<div><small>手动消费者 FPS</small><b data-observer-field="consumer_manual_fps">0 FPS</b></div>
|
||
<div><small>生效反馈来源</small><b data-observer-field="consumer_feedback_source">none</b></div>
|
||
<div><small>像素响应周期</small><b data-observer-field="consumer_pixel_interval_ns">0 ns</b></div>
|
||
<div><small>浏览器呈现周期</small><b data-observer-field="consumer_presentation_interval_ns">0 ns</b></div>
|
||
<div><small>手动消费者周期</small><b data-observer-field="consumer_manual_interval_ns">0 ns</b></div>
|
||
<div><small>消费者原始采样</small><b data-observer-field="consumer_sample_interval_ns">0 ns</b></div>
|
||
<div><small>消费者平滑周期</small><b data-observer-field="consumer_smoothed_interval_ns">0 ns</b></div>
|
||
<div><small>消费者抖动</small><b data-observer-field="consumer_variation_ns">0 ns</b></div>
|
||
<div><small>消费者安全期限</small><b data-observer-field="consumer_safety_interval_ns">0 ns</b></div>
|
||
<div><small>消费者限速周期</small><b data-observer-field="consumer_interval_ns">0 ns</b></div>
|
||
<div><small>消费者限速 FPS</small><b data-observer-field="consumer_effective_fps">0 FPS</b></div>
|
||
<div><small>下次刷新</small><b data-observer-field="next_refresh_interval_ns">0 ns</b></div>
|
||
<div class="critical"><small>端到端延迟</small><b data-observer-field="end_to_end_ns">0 ns</b></div>
|
||
</div>
|
||
<div class="client-summary" aria-label="浏览器消费者反馈全量统计">
|
||
<div><small>RAF 最新周期</small><b data-client-field="display_interval_latest_ms">0 ms</b></div>
|
||
<div><small>RAF 中位周期</small><b data-client-field="display_interval_ms">0 ms</b></div>
|
||
<div><small>RAF P95 周期</small><b data-client-field="display_interval_p95_ms">0 ms</b></div>
|
||
<div><small>RAF P95-P50 抖动</small><b data-client-field="display_jitter_ms">0 ms</b></div>
|
||
<div><small>WS 往返</small><b data-client-field="frame_round_trip_ms">0 ms</b></div>
|
||
<div><small>像素响应 FPS</small><b data-client-field="transport_fps">0 FPS</b></div>
|
||
<div><small>浏览器呈现 FPS</small><b data-client-field="presentation_fps">0 FPS</b></div>
|
||
<div><small>WS 缓冲</small><b data-client-field="websocket_buffered_bytes">0 B</b></div>
|
||
<div><small>未呈现覆盖</small><b data-client-field="overwritten_pixel_frames">0</b></div>
|
||
<div><small>变化像素帧</small><b data-client-field="changed_pixel_frames">0</b></div>
|
||
<div><small>重复像素帧</small><b data-client-field="duplicate_pixel_frames">0</b></div>
|
||
<div><small>像素请求超时</small><b data-client-field="frame_request_timeout_count">0</b></div>
|
||
<div><small>最近像素龄</small><b data-client-field="last_pixel_receive_age_ms">0 ms</b></div>
|
||
<div><small>最近变化龄</small><b data-client-field="last_pixel_change_age_ms">0 ms</b></div>
|
||
</div>
|
||
<div class="latency-details" aria-label="Kernel 各阶段等待耗时">
|
||
<div><small>Painter Lease 等待</small><b data-observer-field="paint_lease_wait_ns">0 ns</b></div>
|
||
<div><small>Paint State 等待</small><b data-observer-field="paint_state_wait_ns">0 ns</b></div>
|
||
<div><small>Publish State 等待</small><b data-observer-field="publish_state_wait_ns">0 ns</b></div>
|
||
<div><small>Ready 等待</small><b data-observer-field="ready_wait_ns">0 ns</b></div>
|
||
<div><small>开始渲染时帧龄</small><b data-observer-field="frame_age_at_render_ns">0 ns</b></div>
|
||
<div><small>Render Lease 等待</small><b data-observer-field="render_lease_wait_ns">0 ns</b></div>
|
||
<div><small>Render State 等待</small><b data-observer-field="render_state_wait_ns">0 ns</b></div>
|
||
<div><small>Render Finish 等待</small><b data-observer-field="render_finish_state_wait_ns">0 ns</b></div>
|
||
<div><small>回放队列等待</small><b data-observer-field="queue_wait_ns">0 ns</b></div>
|
||
</div>
|
||
</section>
|
||
<div class="card-meta">
|
||
<p class="card-description"></p>
|
||
<dl><div><dt class="card-controls">—</dt><dd>属性</dd></div><div><dt class="card-actions">—</dt><dd>动作</dd></div><div><dt class="card-frames">0</dt><dd>像素帧</dd></div></dl>
|
||
</div>
|
||
<footer class="card-footer">
|
||
<code class="card-component"></code>
|
||
<div><button type="button" class="frame-button">刷新一帧</button><button type="button" class="open-menu">测试菜单</button></div>
|
||
</footer>
|
||
</article>
|
||
</template>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|