图像和照片·图像转换器和压缩器
Web Workers 和 OffscreenCanvas 如何保持图像转换响应
· 工作原理
浏览器处理 画布 网络工作者
对大图像进行编码需要真正的 CPU 时间，并且在主线程上执行此操作会冻结页面。这篇文章解释了 Web Workers 和 OffscreenCanvas 如何将这些工作移出 UI 线程，以及该架构对于隐私和限制意味着什么。
会冻结的选项卡 — 当在绘制页面的线程上运行繁重的编码时会发生什么
批量解码、重绘和编码需要 CPU 工作和解码像素内存。如果每个操作都在处理控件、进度更新和绘画的同一事件循环中运行，则界面可能会停止响应，直到文件完成。因此，当第一次转换开始时，聚焦面板会懒惰地创建一个模块工作人员，而不是为从未转换的访问者支付启动成本。
响应性是一个架构目标，而不是承诺的计时数字。设备负载、图像尺寸、浏览器实现和批次组合仍然决定页面的流畅程度。使用重要设备上的代表性文件进行验证；不要发布通用转换期限或声称工人免费提供昂贵的工作。
主线程及其珍贵的原因 — 一个线程用于布局、输入和脚本，以及任务阻塞这三个线程的时间
主线程拥有 DOM 和访问者触摸的控件。 ToolAcre 使用它来验证选择、简要解码源尺寸、构建设置、渲染状态和下载结果。批处理的重复解码、画布绘制和编码循环位于 `image.worker.js` 后面，允许在文件之间返回进度消息。
工作线程不会消除每个主线程任务。每个选定的文件最初都会在面板中进行检查和测量，然后将结果转化为预览和下载操作。该设计将重复的繁重管道从界面所有权中移开，同时将浏览器 API 和表示保留在各自所属的上下文中。
Web Workers：没有 DOM 的第二个线程 — Worker 可以接触什么、不能接触什么，以及文件如何传输到它
工作人员没有普通的 DOM 访问权限。它接收可序列化的项目描述、设置和每个文件的 ArrayBuffer。对于每个项目，它都会构建与接口使用的相同的纯转换计划，创建 Blob，执行解码-绘制-编码，将生成的 Blob 转换为字节并记录每个文件的失败，而不放弃批次的其余部分。
这种隔离也影响了错误处理。损坏的文件可以进入失败数组，而后面的项目继续。工作人员检查项目之间的取消情况并使用当前文件名报告进度。用户界面将工作超时转换为建议尝试更少或更小的图像，而不是留下一个禁用按钮而不做任何解释。
OffscreenCanvas：在没有可见元素的情况下进行绘制和编码——工作人员如何获取自己的画布并调用convertToBlob
`createCanvas` 优先于 `OffscreenCanvas`。在该路径内，`encodeCanvas` 使用目标 MIME 类型和可选质量调用 `convertToBlob`。相同的渲染器还可以创建 HTML 画布并使用基于回调的 `toBlob`，为 OffscreenCanvas 不可用的上下文保留后备。
准确描述后备非常重要。 OffscreenCanvas 是首选，而不是源中唯一可能的画布。同样，浏览器 WebP 编码由最终编码结果检查，而不是根据解码支持假定。当请求的编码器无法生成格式时，应用程序承诺会出现错误，而不是用另一种 MIME 类型进行静默替换。
可传输和复制 — 将 ImageBitmap 或 ArrayBuffer 移动到工作进程而不复制数十兆字节
在调用工作程序之前，面板将每个文件读入 ArrayBuffer 并将这些缓冲区包含在传输列表中。所有权转移给工作人员，而不是克隆每个输入缓冲区。编码后，工作程序将 Blob 字节包装在 Uint8Array 中，并注册该后备缓冲区以便在响应路径上传输。
这减少了可避免的复制，但解码的图像和画布仍然占用内存。 `executePlan` 关闭 `finally` 块中的每个 ImageBitmap，以便可以立即释放其解码的像素。可转移、显式位图清理和像素预算保护解决了不同的压力源；没有人授权无限批量索赔。
为什么这个架构也是隐私故事 - 整个管道都在你的选项卡中，而网络面板保持沉默
转换代码调用浏览器图像和画布 API，无需文件上传请求。单元测试保护每个受支持的输入输出组合的规划，并禁止网络访问。配置的隐私声明相应地狭窄：工具代码不发出携带文件、粘贴文本或生成输出的请求。
页面本身仍然可以加载站点资源和公开的外部脚本，因此“静默网络面板”需要解释。加载后清除 DevTools，并在新请求中查找独特的无害测试文件名或有效负载字节。源代码审查和运行时观察共同支持关于转换路径的声明；两者都不会将整个浏览器环境变成离线沙箱。
限制从何而来 - 内存和画布上限取代了上传上限，因此上限是您的设备
本地处理用输入验证、解码像素、画布分配和可用设备内存的约束取代了上传限制。每个输入文件都由焦点面板限制在 40 MB 处。计划的输出几何形状适合设备像素预算，当该警卫更改请求时，用户会收到一条警告，指出缩小的尺寸。
配置中没有固定的批次计数。二十张小图片和二十张高分辨率照片不是等价的分配。手机可能比台式机更早出现故障。真实的操作建议是在超时或内存故障后处理更少或更小的文件，而不是发布不受支持的最大计数或百万像素上限。
要点：繁重、安静的界面 - 图像转换器和压缩器如何在设备上的主线程之外执行转换
界面保持更安静，因为重复的管道在工作线程中运行，其画布可以在屏幕外，并且大字节缓冲区作为可传输文件传输。这些是具体的来源属性，而不是营销速记。他们解释了工作发生在哪里以及进度如何返回，但没有声称每个浏览器都以相同的方式安排工作。
使用您的工作流程实际使用的图像测试架构。在转换过程中观察控件，确认每个文件的进度，检查故障并检查网络面板的测试标记。 ToolAcre 的设计为您提供了可观察到的证据：真正的工作模块、测量的输出和本地下载字节，而不是不透明的远程作业。