查看 mediasource 耗时需使用 chrome devtools 的 performance 面板，开启 media 录制并过滤相关标签。通过检查 task 和 user timing 标记，可以定位到 appendbuffer、remove 或 endofstream 等 api 调用在渲染线程上的具体执行时间。
如何捕获 MediaSource 的同步阻塞耗时
要捕获 MediaSource 操作的耗时，必须在 Performance 面板中启用 Media 数据录制，并在代码中使用 performance.mark() 手动标记关键步骤。这种方法能准确反映主线程在处理媒体数据时的同步开销，特别是 appendBuffer 这种可能引发重排或解码器调用的操作。
const ms = new MediaSource();
// 模拟获取视频片段
fetch('video.mp4').then(res => res.arrayBuffer()).then(data => {
performance.mark('ms-start');
const sourceBuffer = ms.addSourceBuffer('video/mp4');
// appendBuffer 是同步调用，但可能触发异步解码
sourceBuffer.appendBuffer(data);
performance.mark('ms-end');
performance.measure('ms-append-duration', 'ms-start', 'ms-end');
});
如何分析解码与合成阶段的耗时分布
分析解码与合成阶段耗时时，应关注 Performance 面板中的 Decode 和 Rasterize 事件。这些事件通常发生在 Web Worker 或 GPU 线程，但可以通过 Long Tasks API 或 requestVideoFrameCallback 来间接评估其对主线程帧生成的影响。
const video = document.querySelector('video');
video.requestVideoFrameCallback((now, metadata) => {
console.log('Frame duration:', metadata.duration);
console.log('Decode time:', metadata.decodeDuration);
console.log('Presentation time:', metadata.presentationTimestamp);
});
当 appendBuffer 返回空值时如何处理
当 appendBuffer 返回空值或未抛出异常但媒体未播放时，通常是因为 SourceBuffer 处于 appending 状态。此时需要监听 updateend 事件，确保前一批数据处理完毕后再追加下一批，避免队列堆积导致的静默失败。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
