如何在页面导航前预加载网络视频实现导航后即时播放

• 触发时机选对能省很多事：不用等用户点击导航按钮再触发加载，监听导航链接的mouseenter（鼠标悬停）、touchstart（移动端触摸）事件，或者判断鼠标移动到距离导航链接小于50px的范围时就触发预加载，这个时机比用户实际完成点击早300ms以上，足够完成视频首片缓冲。
• 单页应用（SPA）优先用DOM复用方案：
  检测到预加载意图后，动态创建一个隐藏的video标签，设置preload="auto"属性，src填入目标页面的视频地址，把标签设为display: none插入当前页面。浏览器会自动拉取视频内容做缓冲，等路由跳转到目标页面时，直接把这个已经缓冲好的video元素移动到目标页的播放容器里即可，完全不需要重新加载资源，跳转后可以直接播放。
  对应创建预加载标签的核心代码：

  const preloadVideo = (videoSrc) => {
    const video = document.createElement('video')
    video.src = videoSrc
    video.preload = 'auto'
    video.style.display = 'none'
    // 给标签加标记，方便跳转后查找复用
    video.dataset.preloadId = videoSrc
    document.body.appendChild(video)
  }
  

• 多页应用（MPA）优先用缓存+预加载标签方案：
  多页跳转时旧页面DOM会被销毁，没法复用video元素，这时候动态插入link预加载标签即可：

  const preloadVideo = (videoSrc) => {
    const link = document.createElement('link')
    link.rel = 'preload'
    link.as = 'video'
    link.href = videoSrc
    document.head.appendChild(link)
  }
  

  注意要给视频资源配置缓存响应头：设置Cache-Control: public, max-age=300，提前预加载的资源会存在浏览器HTTP缓存里，跳转到新页面后请求同一个视频地址会直接读取缓存，不会重复发起请求。
• 几个必做的优化点：
  • 大体积视频不要全量预加载，只预加载前2-3M的首帧片段即可，避免占用过多带宽影响当前页面使用
  • 移动端先判断网络类型，蜂窝网络下不要自动触发预加载，避免消耗用户套餐流量
  • 预加载逻辑加防抖，避免用户快速划过多个导航链接时发起大量无效请求

内容的提问来源于stack exchange，提问作者keyur