直接在浏览器中运行像 Photoshop 一样复杂的软件的想法在几年前简直是无法想象的。但是，通过使用各种新的网络技术，Adobe 现已将 Photoshop 的公开测试版引入到网络。
在过去的三年中，Chrome 一直致力于为那些想要突破浏览器极限的 Web 应用提供支持。Photoshop 就是这样一个 Web 应用。直接在浏览器中运行像 Photoshop 一样复杂的软件的想法在几年前简直是无法想象的。但是，通过使用各种新的网络技术，Adobe 现已将 Photoshop 的公开测试版引入到网络。
（如果您更喜欢观看内容而非阅读，也可以参考本文作为视频。）
在这篇博文中，我们第一次详细介绍我们的合作是如何将 Photoshop 扩展到网络。您可以在自己的应用中使用 Adobe 使用的所有 API 以及更多 API。请务必查看我们的与 Web 功能相关的博文获取灵感，并观看我们的 API 跟踪器，了解我们正在开发的最新、最出色的功能。
Photoshop 问世的原因
随着网络不断发展，网站和 Web 应用相比于特定平台的应用具备核心优势，这一点没有改变。这些优势包括许多独特的功能，如可链接、临时和通用，但归根结底是实现简单访问、轻松共享和出色的协作。
网址的好处在于，任何人都可以点击它并立即访问。只需一个浏览器即可。您无需安装任何应用，也不用担心自己是在哪种操作系统上运行。对于 Web 应用，这意味着用户可以访问该应用及其文档和评论。这使得网络成为了理想的协作平台，对广告素材和营销团队来说越来越重要。
Google 文档就是这种简化访问方式的先驱。我们大多数人都知道，创建文档、将链接发送给他人并立即进入应用以及查看特定的文档或评论是多么容易。从那时起，大量出色的应用（例如我们以前展示过的应用）都采用了此模型，现在 Photoshop 也将从中受益。
Photoshop 如何问世
网络最初仅作为适用于文档的平台，但在其历史上发展迅猛。Gmail 等早期应用已证明至少可以实现更复杂的互动和应用。自那以后，我们见证了令人印象深刻的联合开发，其中 Web 应用程序拓展了无限可能，浏览器供应商则通过进一步扩展 Web 功能来做出响应。这种良性循环的最新改进就是在网络上启用了 Photoshop。
Adobe 之前已将 Spark 和 Lightroom 带入网络，并且多年来，Adobe 一直有兴趣将 Photoshop 引入网络。然而，它们却因 JavaScript 的性能限制、代码缺少良好的编译目标以及缺乏 Web 功能而被屏蔽。请继续阅读下文，了解 Chrome 在浏览器中构建了哪些工具来解决这类问题。
使用 Emscripten 进行 WebAssembly 移植
WebAssembly 及其 C++ 工具链 Emscripten 是解锁 Photoshop 网络能力的关键，因为这意味着 Adobe 不必从头开始，但可以利用现有的 Photoshop 代码库。WebAssembly 是一种可移植的二进制指令集，它适用于所有浏览器，是作为编程语言的编译目标而设计的。这意味着，使用 C++ 编写的 Photoshop 等应用可以直接移植到 Web，而无需使用 JavaScript 重写。如需开始自行移植，请查看完整的 Emscripten 文档，或按照此有关如何移植库的引导示例进行操作。
Emscripten 是一款功能齐全的工具链，不仅可以帮助您将 C++ 编译到 Wasm，还可以提供一个转换层，该层可将 POSIX API 调用转换为 Web API 调用，甚至还可以将 OpenGL 转换为 WebGL。例如，您可以移植引用本地文件系统的应用，这样 Emscripten 将提供一个模拟文件系统来维护功能。
Emscripten 已有一段时间能够将 Photoshop 的大部分内容上传到网络上，但速度未必足够快。我们不断与 Adobe 合作，找出瓶颈所在并改进 Emscripten。Photoshop 依赖于多线程处理。在 WebAssembly 中引入动态多线程是一项关键要求。
此外，基于异常的错误处理在 C++ 中非常常见，但在 Emscripten 和 WebAssembly 中并没有得到很好的支持。我们已与 W3C 中的 WebAssembly Community Group 合作，以改进 WebAssembly 标准及其相关工具，以便将 C++ 异常引入 WebAssembly。
Emscripten 不仅仅适用于大型应用，还可让您移植库或小型项目！例如，您可以查看如何通过 Emscripten 将热门的 OpenCV 库编译到网络上。
最后，WebAssembly 还提供了高级性能基元（例如 SIMD 指令），可显著提升 Web 应用的性能。例如，Halide 对 Adobe 的性能至关重要，此处 SIMD 可提供 3-4 倍的加速速度，在某些情况下，其速度为 80-160 倍。
WebAssembly 调试
任何大型项目都没有合适的工具才能完成，因此，Chrome 团队开发了功能齐全的 WebAssembly 调试支持。它支持单步调试源代码、设置断点和暂停异常，具有丰富的类型支持变量检查，甚至为开发者工具控制台中的评估提供支持！
请务必查看有关如何利用 WebAssembly 调试的权威指南。
高性能存储
考虑到 Photoshop 文档可能很大，Photoshop 的关键需求是能够在用户四处平移时，将数据从磁盘上动态移动至内存中。在其他平台上，这通常是通过 mmap 的内存映射来实现的，但这在 Web 平台上还无法实现高性能，而是要以源试用的形式开发并实现源私有文件系统访问句柄！您可以参阅相关文档，了解如何利用以下新 API。
画布的 P3 颜色空间
过去，网络上的颜色一直都是以 sRGB 颜色空间指定的，这是 90 年代中期的一项标准，基于阴极射线管显示器的功能。相机和显示器在这一时期的四分之一世纪取得了长足进步，许多更大、更强大的颜色空间也得到了标准化。最热门的现代色彩空间之一是 Display P3。Photoshop 使用 Display P3 Canvas 在浏览器中更准确地显示图片。特别要指出的是，在支持 Display P3 数据的新型显示屏上，具有亮白、明亮色彩且阴影细节的图片会尽可能显示最佳。我们正在进一步构建 Display P3 Canvas API，以实现高动态范围显示屏。
Web 组件和 Lit
Photoshop 是一款著名的大型应用，功能丰富，有数百个界面元素支持数十个工作流。该应用由多个团队使用各种工具和开发做法构建，但其不同的部分需要共同形成一个具有凝聚力且高性能的整体。
为了应对这一挑战，Adobe 采用了 Web 组件和 Lit 库。Photoshop 的界面元素来自 Adobe 的 Spectrum Web Components 库，这是 Adobe 设计系统的轻量级高性能实现，可与任何框架配合使用，也可以根本不使用框架。
更重要的是，整个 Photoshop 应用都是使用基于 Lit 的网络组件构建的。借助浏览器的内置组件模型和 Shadow DOM 封装，该团队发现可以轻松干净地集成其他 Adobe 团队提供的 React 代码“孤岛”。
使用 Workbox 缓存 Service Worker
Service Worker 充当可编程本地代理，拦截网络请求并使用来自网络和/或长期缓存的数据进行响应。
在 V8 团队努力提升性能的过程中，当 Service Worker 首次使用缓存的 WebAssembly 响应进行响应时，Chrome 会生成并存储经过优化的代码版本，即使对于 Photoshop 代码库中常用的数兆字节的 WebAssembly 脚本也是如此。当 Service Worker 在 install 步骤中缓存 JavaScript 时，也会进行类似的预编译。在这两种情况下，Chrome 都能以最低的运行时开销加载和执行经过优化的缓存脚本。
网页版 Photoshop 利用了这一点，部署了一个 Service Worker，预缓存其许多 JavaScript 和 WebAssembly 脚本。由于这些脚本的网址是在构建时生成的，而且将缓存保持最新状态的逻辑可能很复杂，因此他们借助一组由 Google 维护的名为 Workbox 的库在构建流程中生成 Service Worker。
基于 Workbox 的 Service Worker 与 V8 引擎的脚本缓存相结合，实现了显著的性能提升。具体数字因执行代码的设备而异，但该团队估计，这些优化可以将代码初始化的时间缩短了 75%。
Web 端 Adobe 的未来发展趋势
Photoshop Beta 版的发布只是一个开始，我们还在进行多项性能和功能改进，随着 Photoshop 在此 Beta 版之后全面发布，我们也在进行多项改进。Adobe 并未止步于 Photoshop，还计划积极将 Creative Cloud 扩展到 Web，使其成为广告素材内容创作和协作的主要平台。这将使数百万首次成为创作者的频道能够讲述自己的故事，并从网络上的创新工作流中获益。
随着 Adobe 不断突破极限，Chrome 团队将继续开展协作，共同推动 Adobe 和整个生机勃勃的 Web 开发者生态系统向前发展。其他浏览器也在跟上这些现代浏览器功能的脚步，我们非常期待看到 Adobe 也在他们的产品中推出他们的产品。我们将继续推动网络向前发展，敬请关注未来动态！
您可以访问 Adobe 帮助中心，详细了解如何访问网页版 Photoshop（Beta 版）。