Canvas图片序列滚动动画：线上服务器加载慢优化求助

一、现有代码问题排查 #

1. 路径生成逻辑错误
   currentFrame函数中padStart(9, '720_0000')写法完全错误，padStart的第二个参数是填充的单个字符（或重复使用的字符串），会导致生成的路径格式混乱。比如index=1时会生成compressed/720_00001.jpg，但实际需要的应该是compressed/720_0001.jpg这类格式，正确写法：

const currentFrame = index => (`compressed/720_${index.toString().padStart(4, '0')}.jpg`)

2. 无限制预加载导致请求阻塞
   preloadImages函数一次性发起近3000个图片请求，远超浏览器并发请求限制（通常6-8个），会导致请求排队阻塞、服务器压力过载，这是线上加载慢的核心原因之一。

3. 图片未加载完成就执行绘制
   updateImage中直接设置img.src后立即调用context.drawImage，此时图片大概率未加载完成，会出现空白或旧帧残留问题；且滚动事件触发频繁，容易重复请求同一帧。

4. 绘制逻辑不一致
   初始化时用scaleToFill做等比缩放填充，但updateImage里直接用drawImage(img, 0, 0)按原尺寸绘制，导致图片显示变形。

5. 未处理窗口尺寸变化
   仅在初始化时设置canvas尺寸，窗口大小变化时canvas不会自适应，画面会拉伸或显示不全。

二、线上加载速度提升方案 #

1. 图片格式与压缩优化 #

• 将所有JPG转换成WebP/AVIF格式，同等画质下体积比JPG小50%以上，大幅减少下载量。
• 用Squoosh等工具批量压缩图片，在画质可接受的前提下最小化文件体积。

2. 按需加载+预加载相邻帧 #

放弃一次性预加载所有帧，改为根据滚动位置动态加载：

• 滚动时计算当前需要显示的帧，预加载该帧前后20-50帧（可按需调整），既保证滚动流畅，又大幅减少初始加载量。
• 维护已加载图片的缓存对象，避免重复请求同一帧。

3. 控制请求并发数 #

预加载时限制同时发起的请求数量（比如一次10个），避免浏览器请求队列阻塞，示例逻辑：

const loadQueue = [];
const maxConcurrent = 10;
let currentLoadCount = 0;

function loadImage(index) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = currentFrame(index);
    img.onload = () => {
      currentLoadCount--;
      resolve(img);
    };
    img.onerror = resolve;
  });
}

async function processQueue() {
  while (loadQueue.length > 0 && currentLoadCount < maxConcurrent) {
    const index = loadQueue.shift();
    currentLoadCount++;
    await loadImage(index);
    processQueue();
  }
}

// 滚动时将需要预加载的帧加入队列
function addToPreloadQueue(start, end) {
  for (let i = start; i <= end; i++) {
    if (!loadedImages[i]) {
      loadedImages[i] = null; // 标记待加载
      loadQueue.push(i);
    }
  }
  processQueue();
}

4. 配置HTTP缓存 #

在服务器上设置图片缓存策略：

• 配置Cache-Control: public, max-age=31536000（缓存1年）
• 启用ETag或Last-Modified，让浏览器验证缓存有效性，避免重复下载。

5. 序列帧转视频 #

把3000帧图片转换成MP4视频，通过canvas绘制视频帧，仅需1个请求就能加载所有内容，大幅提升加载速度，示例逻辑：

<video id="sequence-video" src="compressed/sequence.mp4" muted loop playsinline></video>

const video = document.getElementById('sequence-video');
// 滚动时计算进度，设置视频播放位置
video.currentTime = scrollFraction * video.duration;
// 每一帧将视频画面绘制到canvas
requestAnimationFrame(() => {
  context.drawImage(video, x, y, width, height);
});

6. CDN加速 #

将图片/视频部署到CDN，利用边缘节点就近分发，降低网络延迟，提升下载速度。

三、优化后的核心代码示例 #

const html = document.documentElement;
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
const frameCount = 2999;
const preloadRange = 30; // 预加载当前帧前后30帧
const loadedImages = {}; // 缓存已加载的图片
const loadQueue = [];
const maxConcurrent = 10;
let currentLoadCount = 0;

// 修复路径生成逻辑
const currentFrame = index => (`compressed/720_${index.toString().padStart(4, '0')}.jpg`);

// 单张图片加载函数
function loadImage(index) {
  return new Promise((resolve) => {
    if (loadedImages[index]) {
      resolve(loadedImages[index]);
      return;
    }
    const img = new Image();
    img.src = currentFrame(index);
    img.onload = () => {
      loadedImages[index] = img;
      currentLoadCount--;
      resolve(img);
    };
    img.onerror = () => {
      currentLoadCount--;
      resolve(null);
    };
  });
}

// 处理加载队列
async function processQueue() {
  while (loadQueue.length > 0 && currentLoadCount < maxConcurrent) {
    const index = loadQueue.shift();
    currentLoadCount++;
    await loadImage(index);
    processQueue();
  }
}

// 添加预加载任务
function addPreloadTasks(targetIndex) {
  const start = Math.max(1, targetIndex - preloadRange);
  const end = Math.min(frameCount, targetIndex + preloadRange);
  for (let i = start; i <= end; i++) {
    if (!loadedImages[i] && !loadQueue.includes(i)) {
      loadQueue.push(i);
    }
  }
  processQueue();
}

// 缩放填充逻辑
function scaleToFill(img) {
  if (!img) return;
  const scale = Math.max(canvas.width / img.width, canvas.height / img.height);
  const x = (canvas.width / 2) - (img.width / 2) * scale;
  const y = (canvas.height / 2) - (img.height / 2) * scale;
  context.drawImage(img, x, y, img.width * scale, img.height * scale);
}

// 更新画面
async function updateImage(index) {
  const img = await loadImage(index);
  scaleToFill(img);
}

// 滚动事件处理
let lastFrameIndex = -1;
window.addEventListener('scroll', () => {
  const scrollTop = html.scrollTop;
  const maxScrollTop = html.scrollHeight - window.innerHeight;
  if (maxScrollTop <= 0) return;
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(frameCount - 1, Math.ceil(scrollFraction * frameCount));
  
  if (frameIndex !== lastFrameIndex) {
    lastFrameIndex = frameIndex;
    addPreloadTasks(frameIndex + 1);
    requestAnimationFrame(() => updateImage(frameIndex + 1));
  }
});

// 窗口resize处理
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // 重新绘制当前帧
  if (lastFrameIndex !== -1) {
    updateImage(lastFrameIndex + 1);
  }
});

// 初始化加载第一帧和相邻帧
addPreloadTasks(1);
updateImage(1);

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