我用 React + Canvas 做了一个在线图片工具，最先崩的不是服务器，而是浏览器

最初，我只是想做一个简单的图片压缩页面。用户上传图片，Canvas 重新绘制，再调用 toBlob() 导出。几十行代码就能跑起来，看起来没什么难度。直到我一次性拖入多张手机照片。页面开始卡顿，内存持续上涨，预览出现空白，最后整个标签页直接失去响应。我这才发现：浏览器能处理图片，不代表它能随便处理图片。一张 10MB 的图片，进入浏览器后可能不止 10MB图片文件大小是压缩后的体积。浏览器解码后，通常需要按像素保存 RGBA 数据。一张 6000 × 4000 的照片，仅像素数据理论上就需要：6000 × 4000 × 4 ≈ 91.6MB如果同时保留原图、预览图、Canvas 和导出结果，实际占用还会继续增加。因此，批量处理绝不能简单地写成：awaitPromise.all(files.map(processImage));图片一多，浏览器就可能同时解码所有文件，内存