1. 动态加载策略与内存感知
1.1 触发加载的条件
加载时机直接关系到网页视频的初始内存占用。通过将视频源的加载条件设定为进入视口后再进行初始化，可以显著降低启动阶段的解码压力，从而降低对设备内存的峰值需求。
即时反馈机制帮助你判断是否需要进一步延迟加载。只有当监测到网络稳定、缓冲队列为空或用户明确开始播放时，才触发数据请求与解码流程，避免无用的缓冲占用。
// 1) 使用 IntersectionObserver 实现懒加载
const video = document.querySelector('video');
if ('IntersectionObserver' in window) {const observer = new IntersectionObserver((entries) => {for (const e of entries) {if (e.isIntersecting) {// 这里的数据源优先来自低带宽版本或分段加载的起始片段video.src = video.dataset.src;video.play().catch(() =>{});observer.unobserve(video);}}}, { rootMargin: '200px' });observer.observe(video);
}
动态加载与内存峰值之間的权衡需要在体验与资源之间找到平衡点。对低端设备，进一步降低初始缓冲和解码并发，可以显著降低GPU内存与JavaScript堆内存的同时上升速度。
1.2 使用 MSE 的动态源加载
MediaSource Extensions提供按需拼接视频段的能力，避免将整段视频一次性解码。在较差网络环境下，按需请求分段可以稳定帧率并降低瞬时内存波动。
通过将视频切成小片段并将其推送到 SourceBuffer，你可以在缓冲区达到阈值后再加载下一段，防止浏览器一次性分配过多内存，产生内存抖动。
// 1.2.1 使用 MSE 动态加载片段的简化示例
if ('MediaSource' in window) {const video = document.querySelector('video');const mediaSource = new MediaSource();video.src = URL.createObjectURL(mediaSource);let sourceBuffer;mediaSource.addEventListener('sourceopen', async () => {const mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';sourceBuffer = mediaSource.addSourceBuffer(mime);// 假设 fetchChunk() 返回新的片段 ArrayBufferconst chunk = await fetchChunk();sourceBuffer.appendBuffer(chunk);});
}
2. 动态源卸载与资源回收
2.1 卸载策略与内存回收机制
暂停播放、移除src或替换为空源、以及对 blob URL 的释放，是控制内存占用的直接手段。合理的清理流程可以在用户切换标签或离开页面时快速释放占用。
对象URL与缓冲区的释放要与浏览器 буfer 的状态配合，避免残留的引用导致内存无法回收。对于 MSE 场景，结束流结束后再进行回收，确保后续再加载时不会重复分配资源。
// 2.1.1 简单的卸载与回收流程
function cleanupVideo(video) {video.pause();video.removeAttribute('src');if (video.srcObject) {video.srcObject.getTracks().forEach(t => t.stop());video.srcObject = null;}if (video.dataset.objectUrl) {URL.revokeObjectURL(video.dataset.objectUrl);delete video.dataset.objectUrl;}// 若使用 MSE 进行分段加载，则结束流与清空缓冲if (video.mediaSource && video.mediaSource.readyState === 'open') {try { video.mediaSource.endOfStream(); } catch (e) { /* 忽略 */ }}video.load();
}
2.2 主动回收策略与场景化实践
定时清理机制可以在用户离开视频区域或切换到其他内容时自动触发，确保长时间驻留在页面上的视频实例不会持续占用内存。
事件驱动清理：监听 pagehide、visibilitychange 等事件，在页面不可见时执行清理，可以有效防止后台标签页的内存积累。
// 2.2.1 页面不可见时自动清理
document.addEventListener('visibilitychange', () => {if (document.hidden) {cleanupVideo(document.querySelector('video'));}
});
3. 性能监测与兼容性评估
3.1 监控指标与浏览器差异
性能监控包括内存占用、缓冲进度和帧率等指标。通过在关键操作前后记录数据，可以快速判断动态加载与卸载策略对内存的实际影响。
浏览器差异：某些浏览器对 performance.memory 的支持不一致，Chrome/Edge 提供较多内存相关信息，而 Firefox 可能不可用。因而需要实现降级路径来确保在不同环境下也能维持可观的体验。
// 3.1.1 基本内存监控（Chrome/Edge 支持）
function logMemory() {if (performance && performance.memory) {const m = performance.memory;console.log('已用堆内存:', m.usedJSHeapSize, '总内存:', m.totalJSHeapSize);} else {console.log('当前浏览器不支持 memory API');}
}
setInterval(logMemory, 2000);
// 3.1.2 使用 PerformanceObserver 监控 longtask 以评估阻塞情况
try {const po = new PerformanceObserver((list) => {const entries = list.getEntries();// 根据长任务数量调整加载策略console.log('长任务数量:', entries.length);});po.observe({ entryTypes: ['longtask'] });
} catch (e) {// 某些浏览器不支持 PerformanceObserver 时回退
}
