前端快讯｜探索背后的技术——Photoshop 网页版前端技术大揭秘
【前端快讯 10月01日】经过近两年的测试，Adobe 的 Photoshop 网页版本于9月28日正式发布。对于前端开发者而言 Photoshop 是再熟悉不过的工具了，每天都在和其打交道，其有着丰富的功能。
Photoshop 网页版是一款多功能数字图像处理和设计应用程序，可直接在浏览器中使用。精简的在线界面提供直观且精确的编辑工具，可让您完全控制每个细节，并可无缝访问 Photoshop 最常见且精确的编辑工具和生成式 AI 功能。
与桌面端相比，Photoshop 网页版简化了用户界面，可以方便地访问 Photoshop 图像编辑工具，从而进行精确且可控的编辑。虽然并非桌面版中的所有功能在 Web 版上都可用，但 Photoshop Web 版具有最常用的图像编辑功能。Photoshop 团队通过用户的反馈，不断地添加额外的特性和功能，期望打造高质量的 Photoshop。
在浏览器中直接运行像 Photoshop 这样复杂的软件，这在几年前是很难想象的。随着 Web 技术的发展，Adobe 已经使用了一些最新的 Web 技术退出了网页版。本文将从以下几个方面剖析 Photoshop 网页版背后使用的前端技术：
跨平台移植：WebAssembly 和 Emscripten 高性能存储：File System Access 强色彩空间：Display P3 可重用组件：Web Components 和 Lit 预缓存：使用 Workbox 缓存 service worker
1.跨平台移植：WebAssembly 和 Emscripten
WebAssembly 及其 C++ 工具链 Emscripten 是 Photoshop 实现网页版的关键，这意味着 Adobe 不必从头开始，可以利用现有的 Photoshop 代码库。
WebAssembly 是一种可移植的二进制指令集，可在所有浏览器中使用，是编程语言的编译目标。这意味着，Photoshop 等用 C++ 编写的应用程序可以直接移植到网络上，而无需重写 JavaScript。
Emscripten 是一个完整的 WebAssembly 编译工具链，使用 LLVM，特别注重速度、大小和网络平台，它不仅可以帮助开发者将 C++ 编译为 Wasm，还提供了一个翻译层，可以将 POSIX API 调用转换为 Web API 调用，甚至还可以将 OpenGL 转换为 WebGL。例如，您可以移植引用本地文件系统的应用程序，Emscripten 将提供一个仿真文件系统以保持功能。
Emscripten 能够将 Photoshop 的大部分功能引入网络已有一段时间，但速度还不够快。Chrome 团队不断与 Adobe 合作，找出瓶颈所在，并改进 Emscripten。Photoshop 依赖于多线程技术。将动态多线程引入 WebAssembly 是一项关键要求。
此外，基于异常的错误处理在 C++ 中非常常见，但 Emscripten 和 WebAssembly 并不支持。我们与 W3C 的 WebAssembly 社区小组合作，改进了 WebAssembly 标准和相关工具，从而将 C++ 异常引入了 WebAssembly。
Emscripten 不仅适用于大型应用程序，还能让你移植库或小型项目！例如，你可以看到如何通过 Emscripten 将流行的 OpenCV 库编译到网络上。
WebAssembly 提供了 SIMD 指令等高级性能基元，可显著提高网络应用程序的性能。例如，Halide 对 Adobe 的性能至关重要，而 SIMD 平均可提高3-4倍的速度，在某些情况下可提高80-160倍。
最后，为了更好地完成大型项目，Chrome 浏览器团队开发了功能全面的 WebAssembly 调试支持。它支持逐步浏览源代码、设置断点和暂停异常、通过丰富的类型支持进行变量检查，甚至还基本支持在 DevTools 控制台中进行评估。
2.高性能存储：File System Access
鉴于 Photoshop 文档非常庞大，Photoshop 的一个关键需求就是能够在用户浏览时将数据从磁盘动态移动到内存中。在其他平台上，这通常是通过 mmap 进行内存映射来实现的，但这在 Web 上还无法实现，直到 origin 私有文件系统访问句柄被开发出来并作为 origin 试用版实现。
3.更强的色彩空间：Display P3
从历史上看，网络上的色彩都是用 sRGB 色彩空间指定的，这是九十年代中期根据阴极射线管监视器的功能制定的标准。在这四分之一个世纪中，相机和显示器都取得了长足的进步，许多更大、功能更强的色彩空间也已标准化。现代最流行的色彩空间之一是 Display P3。Photoshop 使用 Display P3 Canvas 在浏览器中更准确地显示图像。特别是，在支持 Display P3 数据的现代显示器上，具有明亮白色、鲜艳色彩和阴影细节的图像将显示出最佳效果。
4.可重用组件：Web Components 和 Lit
Photoshop 是一款著名的大型应用程序，功能丰富，拥有数百个用户界面元素，支持数十种工作流程。该应用程序由多个团队使用各种工具和开发实践构建而成，但其不同的部分需要整合成一个具有凝聚力的高性能整体。
为了应对这一挑战，Adobe 采用了 Web Components 和 Lit 库。Photoshop 的用户界面元素来自 Adobe 的 Spectrum Web Components 库，它是 Adobe 设计系统的轻量级、高性能实现，可与任何框架或无框架配合使用。
此外，整个 Photoshop 应用程序都是使用基于 Lit 的 Web Components 构建的。依靠浏览器内置的组件模型和 Shadow DOM 封装，该团队很容易就能将其他 Adobe 团队提供的一些 React 代码模块整合在一起。
5.预缓存：使用 Workbox 缓存 service worker
service worker 充当可编程的本地代理，拦截网络请求，并用网络数据、长期缓存或两者的混合数据做出响应。
作为 V8 团队提高性能努力的一部分，当服务工作程序首次响应缓存的 WebAssembly 响应时，Chrome 浏览器会生成并存储代码的优化版本--即使是 Photoshop 代码库中常见的几兆字节 WebAssembly 脚本也不例外。当 service worker 在安装步骤中缓存 JavaScript 时，也会进行类似的预编译。在这两种情况下，Chrome 浏览器都能以最小的运行时开销加载并执行缓存脚本的优化版本。
网页版 Photoshop 就利用了这一点，它部署了一个 service worker 程序，可以预先缓存许多 JavaScript 和 WebAssembly 脚本。由于这些脚本的 URL 是在构建时生成的，而且保持缓存更新的逻辑可能很复杂，因此他们求助于 Google 维护的一套名为 Workbox 的库，以便在构建过程中生成服务 Worker。
基于 Workbox 的 service worker 与 V8 引擎的脚本缓存相结合，带来了显著的性能提升。具体数字可能因执行代码的设备而异，但 Chrome 团队估计这些优化措施将代码初始化时间减少了 75%。
6.最后
Chrome 团队将继续与 Adobe 团队深度合作，为 Adobe 和充满活力的 Web 开发者提供支持，持续推动 Web 向前发展！
大家都在看