html5的networkstate属性仅反映视频元素网络状态（0-3），不能测量延迟、ttfb或下载耗时；监控响应速度应结合performance api、fetch预检或服务端配合。
HTML5 的 <video></video> 标签本身不提供直接监控服务器响应速度的 API，networkState 属性仅反映当前网络连接状态（如是否正在加载、是否出错），**不能测量延迟、TTFB 或资源下载耗时**。它只是一个粗粒度的状态指示器，而非性能测量工具。
networkState 的实际含义与局限
networkState 是只读属性，返回以下值之一：
-
0（NETWORK_EMPTY）：视频元素刚创建，尚未调用
load()或未设置src -
1（NETWORK_IDLE）：已设置
src，但尚未开始加载（例如 autoplay 未触发、用户未交互） - 2（NETWORK_LOADING）：正在下载媒体数据（HTTP 请求已发出，响应体正在接收中）
-
3（NETWORK_NO_SOURCE）：所有
<source></source>均不可用或格式不支持
⚠️ 注意：它无法告诉你“请求何时发出”、“首字节何时到达（TTFB）”、“带宽多少”或“某段视频是否卡顿”。从 NETWORK_IDLE → NETWORK_LOADING 的切换只表示浏览器决定开始请求，但不包含时间戳，也无法关联到具体 HTTP 请求周期。
真正可行的替代方案：结合 Performance API 和 fetch
若目标是监控服务器端资源响应速度（如视频首屏加载性能），推荐以下组合方式：
-
使用
performance.getEntriesByType('resource')：在视频loadeddata或canplay事件后，查找对应src的资源条目，提取duration、connectStart、responseStart等字段 -
预检请求（fetch + timing）：在设置
video.src前，先用fetch()模拟请求并记录完整 timing（需服务端允许 CORS） -
监听
progress事件估算速率：配合video.buffered和Date.now()，可粗略计算已加载字节数/耗时，但非服务器响应速度，而是客户端下载速率
简单示例：用 fetch 预测视频加载表现
适用于 MP4 等支持范围请求（Range）的资源：
async function measureVideoResponse(src) {
const start = performance.now();
try {
const res = await fetch(src, { method: 'HEAD', cache: 'no-cache' });
const end = performance.now();
console.log(`TTFB ≈ ${end - start}ms, Status: ${res.status}`);
return { ttfb: end - start, status: res.status };
} catch (e) {
console.error('Pre-check failed:', e);
}
}
// 调用时机：在设置 video.src 前
measureVideoResponse('/video.mp4').then(data => {
// 上报或决策是否降级
});
补充建议：服务端配合更有效
前端测量始终受网络波动、缓存、浏览器策略影响。更可靠的方式包括：
- 服务端在响应头中注入自定义性能字段（如
X-Server-TTFB: 24ms），前端通过fetch读取 - 使用
Resource Timing API并开启timing-Allow-Origin响应头，确保跨域资源可被精确计时 - 对 HLS/DASH 流，监听
mediastreamtrack或 MSEupdateend事件，结合performance.now()计算分片加载延迟
不复杂但容易忽略：networkState 是状态快照，不是性能探针。要监控响应速度，得用 Performance API、fetch timing 或服务端日志协同分析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
