在 javascript 运行时中查看 encryptedmedia（eme）耗时，最直接的方法是使用 chrome devtools 的 performance 面板录制性能轨迹，并筛选出与 media source extensions (mse) 或 encrypted media extensions (eme) 相关的任务。通过观察主线程上的长任务（long tasks）以及特定的 api 调用栈，可以定位到 `requestmediakeysystemaccess`、`createmediakeys`、`setmediakeys` 以及关键的 `update` 事件处理中的耗时操作。这些操作通常涉及浏览器内部的解密模块和密钥请求网络交互，它们在性能面板中会表现为具体的函数调用或异步任务。
如何识别 EME 相关的关键 API 调用
EME 的核心流程由几个关键 API 组成，它们在性能面板中会以特定的函数名出现。首先是 requestMediaKeySystemAccess，它用于获取密钥系统的访问权限，这一步通常很快，但如果系统配置复杂或需要用户授权，可能会有延迟。其次是 createMediaKeys，它在内部创建 CDM（Content Decryption Module）实例，这个步骤可能涉及进程间通信，耗时取决于 CDM 的启动速度。最关键的耗时点往往在于 sourceBuffer.appendBuffer() 触发解码后，CDM 需要请求密钥并解密数据，这会在性能面板中表现为一系列与 decrypt、key 或 cdm 相关的内部调用。开发者应重点关注这些 API 的调用持续时间及其背后的调用栈。
const keySystem = "org.w3.clearkey";
const config = [{
initDataTypes: ["keyids"],
videoCapabilities: [{ contentType: "video/mp4; codecs=\'avc1.4d400f\'" }]
}];
// 1. 请求密钥系统访问
const access = await navigator.requestMediaKeySystemAccess(keySystem, config);
// 2. 创建媒体密钥
const mediaKeys = await access.createMediaKeys();
await navigator.mediaKeys.setMediaKeys(mediaKeys);
// 3. 关联视频元素
const video = document.querySelector('video');
video.setMediaKeys(mediaKeys);
// 4. 设置源并触发 EME 流程
const source = new MediaSource();
video.src = URL.createObjectURL(source);
source.addEventListener("sourceopen", async () => {
const segment = await fetch("/encrypted_segment.mp4").then(r => r.arrayBuffer());
const initSegment = await fetch("/init_segment.mp4").then(r => r.arrayBuffer());
const buffer = source.addSourceBuffer("video/mp4; codecs=\'avc1.4d400f\'");
// 记录开始时间
console.time("eme_update_time");
buffer.appendBuffer(initSegment);
buffer.addEventListener("updateend", () => {
console.timeEnd("eme_update_time");
});
buffer.appendBuffer(segment);
});
如何通过代码精确测量 EME 更新阶段的耗时
虽然性能面板提供了宏观视角，但通过代码精确测量 update 和 updateend 事件之间的时间差，可以更准确地评估 EME 在处理特定数据块时的开销。特别是在处理加密片段时，从调用 appendBuffer 到收到 updateend 事件，中间经历了排队、解码、解密和渲染准备等多个阶段。通过在 appendBuffer 前后设置时间戳，或者监听 updateend 事件并计算与上一个事件的时间间隔，开发者可以得到一个具体的毫秒数。这种方法特别适用于对比不同加密算法、密钥长度或硬件加速状态下的性能差异。需要注意的是，updateend 仅在缓冲区操作完全完成后触发，因此它反映的是端到端的处理耗时，包括潜在的等待解密完成的时间。
立即学习“Java免费学习笔记（深入）”；
// 在 SourceBuffer 上添加更精细的计时逻辑
const buffer = source.addSourceBuffer("video/mp4; codecs=\'avc1.4d400f\'");
let lastUpdateTime = performance.now();
buffer.addEventListener("updateend", (e) => {
const currentTime = performance.now();
const duration = currentTime - lastUpdateTime;
console.log(`EME Update Duration: ${duration.toFixed(2)} ms`);
lastUpdateTime = currentTime;
// 检查是否有错误
if (buffer.error) {
console.error("Buffer error:", buffer.error.message);
}
});
// 模拟追加加密数据
async function appendEncryptedData(data) {
const start = performance.now();
buffer.appendBuffer(data);
// 注意：appendBuffer 是同步的，耗时主要体现在 updateend 回调中
return performance.now() - start;
}
EME 耗时主要受哪些因素影响及如何优化
EME 的耗时主要受三个因素影响：密钥请求的网络延迟、解密算法的计算复杂度以及浏览器 CDM 的实现效率。密钥请求通常发生在 update 事件中，如果密钥服务器响应慢，整个播放流程就会阻塞。解密算法方面，AES-128 比 AES-256 快，而硬件加速（如 Intel VP9/AV1 硬件解码器支持）能显著降低 CPU 占用。优化策略包括：预加载密钥以减少首次播放延迟，使用低延迟的密钥交换协议，以及确保浏览器和操作系统支持最新的硬件解码特性。此外，避免在主线程上进行大量的数据处理，将密钥管理逻辑尽量简化，也能间接提升 EME 流程的流畅度。对于移动端，还需注意电池功耗对 CDM 性能的限制，可能导致动态降频从而增加耗时。
