树莓派Web kiosk单页audio播放 加载图片时音频中断如何解决

树莓派属于低性能ARM设备，CPU、内存IO、总线带宽都存在明显瓶颈：

• 同个页面的DOM操作、网络资源加载、图片解码、渲染重排默认共享渲染主线程资源，每5秒触发一次图片src替换时，会同步触发网络请求、图片格式解码、DOM重绘一系列高CPU占用操作，瞬间占满主线程时间片
• 默认HTMLAudioElement的音频缓冲区填充、解码调度依赖主线程消息循环，一旦主线程阻塞时间超过音频预缓冲的长度，声卡拿不到新的PCM数据就会出现断音
• 单独标签页播放音频不卡的核心原因是Chromium的进程隔离+调度优先级策略：播放音频的标签页进程会被系统标记为高优先级，分配独立的CPU时间片，不会被其他标签页的重负载任务抢占资源。

按落地难度从低到高排序：

• 给图片标签加异步解码属性，强制浏览器将图片解码任务放到独立后台线程执行，不阻塞主线程
  直接给img标签加decoding="async"属性即可，不需要改其他逻辑：

  <img id='img1' src='' decoding="async" style='max-width:100%; max-height:80%;' />
  

• 提前预加载下一张图片，消除切换瞬间的CPU/IO峰值
  不要在切换的瞬间才开始加载新图，提前1-2秒预加载下一张图，等图片加载+解码完成后再替换DOM上的img src，替换操作本身仅做指针交换，几乎无CPU开销，改造后的JS逻辑参考：

  // 提前缓存DOM引用，避免每次定时器触发都做DOM查询
  const img1 = document.getElementById('img1');
  const preloadImg = new Image();
  preloadImg.decoding = 'async';
  
  function loadNextImg() {
    const url = "get-file.php?rand=fam&date=" + new Date().getTime();
    preloadImg.src = url;
    preloadImg.onload = () => {
      // 图片加载解码完成后再替换显示
      img1.src = preloadImg.src;
    }
  }
  // 首次加载
  loadNextImg();
  setInterval(loadNextImg, 5000);
  

• 适当调大Chromium音频缓冲长度，降低断音概率
  因为是kiosk模式，可以修改Chromium启动参数，把默认的音频缓冲区从1024帧调大到2048/4096帧，给主线程阻塞留足够的冗余，启动参数添加：

  --audio-buffer-size=4096 --enable-high-priority-audio-thread
  

  该配置会给音频线程分配最高系统调度优先级，同时预留约90ms的缓冲冗余（44.1kHz采样率下），人耳完全感知不到延迟，但足够扛过图片加载导致的短暂主线程阻塞。
• 优化资源缓存策略，减少不必要的IO开销
  当前代码的图片请求加了时间戳参数，完全禁用了浏览器缓存，每次都要重新从网络/磁盘读取完整图片数据。可以给get-file.php返回的图片加合理的Cache-Control头，配合固定的图片版本号参数，减少重复的IO读取操作，能进一步降低负载峰值。
• （进阶）用Web Audio API接管音频播放
  如果以上方案还是有断音，可以把音频播放逻辑迁移到Web Audio API，通过AudioContext调度音频解码和播放，整个音频链路跑在独立的音频线程，完全不依赖渲染主线程，从根本上避免主线程阻塞导致的断音。

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