HTTP Range Requests 断点下载与媒体拖拽播放：Range/Content-Range 与性能验证

HTTP Range Requests 断点下载与媒体拖拽播放：Range/Content-Range 与性能验证技术背景Range 请求允许客户端按字节范围获取资源片段，用于断点续传与媒体拖拽播放。合理的分段策略与缓存协同可显著提升用户体验与网络效率。核心内容发起 Range 请求（浏览器端）async function fetchRange(url: string, start: number, end: number) {

const res = await fetch(url, { headers: { Range: `bytes=${start}-${end}` } });

if (res.status !== 206) throw new Error('Partial Content not returned');

const buf = await res.arrayBuffer();

const contentRange = res.headers.get('Content-Range');

return { buf, contentRange };

}

服务端响应（Node/Express 示例）import express from 'express';

import fs from 'fs';

const app = express();

app.get('/files/:name', (req, res) => {

const file = `./data/${req.params.name}`;

const stat = fs.statSync(file);

const range = req.headers.range;

if (!range) { res.status(200).sendFile(file); return; }

const [startStr, endStr] = range.replace(/bytes=/, '').split('-');

const start = parseInt(startStr, 10);

const end = endStr ? parseInt(endStr, 10) : stat.size - 1;

const chunkSize = (end - start) + 1;

res.writeHead(206, {

'Content-Range': `bytes ${start}-${end}/${stat.size}`,

'Accept-Ranges': 'bytes',

'Content-Length': chunkSize,

'Content-Type': 'application/octet-stream'

});

fs.createReadStream(file, { start, end }).pipe(res);

});

媒体拖拽播放（视频）<video controls src="/media/video.mp4"></video>

<!-- 浏览器在拖拽到新的位置时自动发起 Range 请求 -->

技术验证参数在 Chrome 128/Edge 130（CDN 与源站）：断点恢复成功率：≥ 98%拖拽播放响应时间：P95 < 400ms带宽利用率提升：≥ 20%应用场景大文件下载与续传媒体播放进度拖拽与预加载最佳实践控制分段大小与并发请求数，避免过度争抢配置 CDN 对 Range 友好缓存与源站回源对错误与超时进行重试与恢复