Deno.serve集成magick-wasm时请求阻塞问题排查

核心原因：WASM同步执行阻塞事件循环 #

Deno.serve本身支持并发请求处理，问题出在magick-wasm的同步执行逻辑上。WASM代码在JavaScript单线程环境中默认是同步阻塞执行的——当你在请求处理函数里同步调用ImageMagick的图像处理逻辑时，整个事件循环会被卡住，直到当前请求的WASM操作完成，才能处理下一个请求，这就导致了日志里的串行执行现象。

对比第一个示例里的await delay(300)：setTimeout是异步API，会把回调放到事件循环的宏任务队列，当前请求的处理函数会暂停，让出事件循环给其他请求，所以能实现并发。

解决方案：将WASM操作异步化 #

既然ImageMagick.read支持回调返回Promise时自身也返回Promise，我们可以把图像处理逻辑改成异步执行，让事件循环能同时处理多个请求：

修改后的代码 #

import { reservedPath } from "https://gist.githubusercontent.com/reggi/f989eb2b395fa348595a2ec2a7099e95/raw/bf0e75061f2e2454a244cef019ffac2cf1fc38fc/reserved_path.ts";
import { CompositeOperator, Gravity, ImageMagick, Point, initializeImageMagick } from "https://deno.land/x/imagemagick_deno@0.0.19/mod.ts";

const file = await Deno.readFile('./image.png')

await initializeImageMagick()

Deno.serve(async (_req) => {
  console.log(`request made ✅`)
  if (reservedPath(_req.url)) {
    return new Response("Not Found", { status: 404 });
  }
  const headers = new Headers();
  headers.set("Content-Type", "image/png");
  
  // 将图像处理逻辑包装成异步操作，让出事件循环
  const imageData = await new Promise<Uint8Array>((resolve) => {
    ImageMagick.read(file, (v) => {
      v.compositeGravity(v, Gravity.North, CompositeOperator.Overlay, new Point(-20, -20))
      v.compositeGravity(v, Gravity.North, CompositeOperator.Overlay, new Point(20, 20))
      resolve(v.write(g => g))
    })
  });
  
  console.log(`request served 👍`)
  return new Response(imageData, { headers });
})

简化版（利用库的异步特性） #

Deno.serve(async (_req) => {
  console.log(`request made ✅`)
  if (reservedPath(_req.url)) {
    return new Response("Not Found", { status: 404 });
  }
  const headers = new Headers();
  headers.set("Content-Type", "image/png");
  
  const imageData = await ImageMagick.read(file, (v) => {
    v.compositeGravity(v, Gravity.North, CompositeOperator.Overlay, new Point(-20, -20))
    v.compositeGravity(v, Gravity.North, CompositeOperator.Overlay, new Point(20, 20))
    // 返回Promise让read转为异步执行
    return Promise.resolve(v.write(g => g))
  });
  
  console.log(`request served 👍`)
  return new Response(imageData, { headers });
})

额外说明 #

如果异步化后仍存在串行问题，可能是magick-wasm库本身存在全局状态锁（比如多请求共享WASM实例时的互斥逻辑），这种情况下可以考虑为每个请求创建独立的ImageMagick实例，或者使用Deno的Worker API将图像处理逻辑放到独立线程中执行，彻底规避单线程阻塞。

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