經過 Adobe 工程師多年來的努力，并與 Chrome 等瀏覽器供應商密切合作，通過 WebAssembly + Emscripten、Web Components + Lit、Service Workers + Workbox 和新的 Web API 的支持，終于在近期推出了 Web 版 Photoshop（photoshop.adobe.com），這在實現高度復雜和圖形密集型軟件在瀏覽器中運行方面具有重大意義！

本文就來看看 Photoshop 所使用的 Web 能力、進行的性能優化以及未來可能的發展方向。

愿景：在瀏覽器中使用 Photoshop

Adobe 的愿景就是將 Photoshop 帶到瀏覽器中，讓更多的用戶能夠方便地使用它進行圖像編輯和平面設計。過去幾十年，Photoshop一直是圖像編輯和平面設計的黃金標準，但它只能在桌面上運行。現在，通過將它移植到瀏覽器中，就打開一個全新的世界。

Web 版 Photoshop 承諾了無處不在、無摩擦的訪問體驗。用戶只需打開瀏覽器，就能即時開始使用 Photoshop 進行編輯和協作，而不需要安裝任何軟件。而且，由于Web是一個跨平臺的運行環境，它可以屏蔽底層操作系統的差異，使Photoshop 能夠在不同的平臺上與用戶進行互動。

另外，通過鏈接的功能，共享工作流變得更加方便。Photoshop文檔可以通過URL直接訪問。這樣，創作者可以輕松地將鏈接發送給協作者，實現更加便捷的合作。

但是，實現這個愿景面臨著重大的技術挑戰，要求重新思考像Photoshop這樣強度大的應用如何在Web上運行。

使用新的 Web 能力

最近幾年出現了一些新的 Web 平臺能力，可以通過標準化和實現最終使類似于Photoshop這樣的應用成為可能。Adobe工程師們創新地利用了幾個關鍵的下一代API。

使用 OPFS 實現高性能本地文件訪問

Photoshop 操作涉及讀寫可能非常大的PSD文件。這要求有效訪問本地文件系統，新的Origin Private File System API (OPFS) 提供了一個快速、特定于源的虛擬文件系統。

Origin Private File System (OPFS) 是一個提供了快速、安全的本地文件系統訪問能力的 Web API。它允許Web應用以原生的方式讀取和寫入本地文件，而無需將文件直接暴露給Web環境。OPFS通過在瀏覽器中運行一個本地代理和使用特定的文件系統路徑來實現文件的安全訪問。

const opfsRoot = await navigator.storage.getDirectory();

使用 OPFS 可以快速創建、讀取、寫入和刪除文件。例如：

// 創建文件
const file = await opfsRoot.getFileHandle('image.psd', { create: true });

// 獲取讀寫句柄
const handle = await file.createSyncAccessHandle();

// 寫入內容

handle.write(buffer);

// 讀取內容
handle.read(buffer);

// 刪除文件
await file.remove();

為了實現絕對快的同步操作，可以利用Web Workers獲取 FileSystemSyncAccessHandle。

這個本地高性能文件系統在瀏覽器中實現Photoshop所需的高要求文件工作流程非常關鍵。它能夠提供快速而可靠的文件讀寫能力，使得Photoshop能夠更高效地處理大型文件。這種優化的文件系統為用戶帶來更流暢的圖像編輯和處理體驗。

釋放WebAssembly的強大潛力

WebAssembly是重新在JavaScript中實現Photoshop計算密集型圖形處理的關鍵因素之一。為了將現有的 C/C++ 代碼庫移植到 JavaScript 中，Adobe使用了Emscripten編譯器生成WebAssembly模塊代碼。

在此過程中，WebAssembly具備了幾個至關重要的能力：

• SIMD：使用SIMD向量指令可以加速像素操作和濾波。
• 異常處理：Photoshop的代碼庫中廣泛使用C++異常。
• 流式實例化：由于Photoshop的WASM模塊大小超過80MB，因此需要進行流式編譯。
• 調試：Chrome瀏覽器在DevTools中提供的WebAssembly調試支持是非常有用的
• 線程：Photoshop使用工作線程進行并行執行任務，例如處理圖像塊：

// 線程函數
void* tileProcessor(void* data) {
    // 處理圖像塊數據
    return NULL;
}

// 啟動工作線程
pthread_t thread1, thread2;
pthread_create(&thread1, NULL, tileProcessor, NULL);
pthread_create(&thread2, NULL, tileProcessor, NULL);

// 等待線程結束
pthread_join(thread1, NULL);
pthread_join(thread2, NULL);

利用 P3 廣色域

P3色域比sRGB色域更廣闊，能夠顯示更多的顏色范圍。然而長時間以來，在 Web 上sRGB一直是唯一的色域標準，其他更寬廣的色域如P3并沒有被廣泛采用。

Photoshop利用新的color()函數和Canvas API來充分發揮P3色域的鮮艷度，從而實現更準確的顏色呈現。通過使用這些功能，Photoshop能夠更好地展示P3色域所包含的更豐富、更生動的顏色。

color: color(display-p3 1 0.5 0)

Web Components 提供UI的靈活性

Photoshop是 Adobe Creative Cloud 生態系統中的一部分。通過使用基于 Lit[1] 構建的標準化 Web Components 策略，可以實現應用之間 UI 的一致性。

Lit 是一個構建快速、輕量級 Web Components 庫。它的核心是一個消除樣板代碼的組件基礎類，它提供了響應式狀態、作用域樣式和聲明性模板系統，這些系統都非常小、快速且具有表現力。

Photoshop 的 UI 元素來自于Adobe 的 Web Components 庫：Spectrum[2]，該庫實現了Adobe的設計系統。

Spectrum Web Components 具有以下特點：

• 默認支持無障礙訪問：開發時考慮到現有和新興瀏覽器規范，以支持輔助技術。
• 輕量級：使用 Lit Element 實現，開銷最小。
• 基于標準：基于 Web Components 標準，如自定義元素和 Shadow DOM 構建。
• 框架無關：由于瀏覽器級別的支持，可以與任何框架一起使用。

此外，整個 Photoshop 應用都是使用基于 Lit 的 Web Components 構建的。Lit的模板和虛擬DOM差異化使得UI更新效率高。當需要時，Web Components 的封裝性也使得輕松地集成其他團隊的 React 代碼成為可能。

總體而言，Web Components 的瀏覽器原生自定義元素結合Lit的性能，為Adobe構建復雜的 Photoshop UI 提供了所需的靈活性，同時保持了高效性。

優化 Photoshop 在瀏覽器中的性能

盡管新的 Web Components 提供了基礎，但像Photoshop這樣的密集型桌面應用仍然需要進行廣泛的跟蹤和性能優化工作，以提供一流的在線體驗。

使用 Service Workers 緩存資源和代碼

Service Workers 可以讓 Web 應用在用戶首次訪問后將其代碼和資源等緩存到本地，以便在后續加載時可以更快地呈現。盡管 Photoshop 目前還不支持完全離線使用，但它已經利用了 Service Workers 來緩存其 WebAssembly 模塊、腳本和其他資源，以提高加載速度。

Chrome DevTools Application 面板 > Cache storage 展示了 Photoshop 預緩存的不同類型資源，包括在Web上進行代碼拆分后本地緩存的許多JavaScript代碼塊。這些被本地緩存的JavaScript代碼塊使得后續的加載非常快速。這種緩存機制對于加載性能有著巨大的影響。在第一次訪問之后，后續的加載通常非常快速。

Adobe 使用了 Workbox[3] 庫，以更輕松地將 Service Worker 緩存集成到構建過程中。

當資源從Service Worker緩存中返回時，V8引擎使用一些優化策略：

• 安裝期間緩存的資源會被立即進行編譯，并立即進行代碼緩存，以實現一致且快速的性能表現。
• 通過Cache API 進行緩存的資源，在第二次加載時會經過優化的緩存處理，比普通緩存更快速。
• V8能夠根據資源的緩存重要性進行更積極的編譯優化。

這些優化措施使得 Photoshop 龐大的緩存 WebAssembly 模塊能夠獲得更高的性能。

流式編譯和緩存大型WebAssembly模塊

Photoshop的代碼庫需要多個大型的WebAssembly模塊，其中一些大小超過80MB。V8和Chrome中的流式編譯支持高效處理這些龐大的模塊。

此外，當第一次從 Service Worker 請求 WebAssembly 模塊時，V8會生成并存儲一個優化版本以供緩存使用，這對于 Photoshop 龐大的代碼尺寸至關重要。

并行圖形操作的多線程支持

在 Photoshop 中，許多核心圖像處理操作（如像素變換）可以通過在多個線程上進行并行執行來大幅提速。WebAssembly 的線程支持能夠利用多核設備進行計算密集型圖形任務。

這使得 Photoshop 可以將性能關鍵的圖像處理函數移植到 WebAssembly，并使用與桌面端相同的多線程方法來實現并行處理。

通過 WebAssembly 調試優化

對于開發過程中的診斷和解決性能瓶頸來說，WebAssembly 調試支持非常重要。Chrome DevTools 具備分析 WASM 代碼、設置斷點和檢查變量等一系列功能，這使得WASM的調試與JavaScript有著相同的可調試性。

將設備端機器學習與 TensorFlow.js 集成

Photoshop 最近的 Web 版本包括了使用 TensorFlow.js[4] 提供 AI 功能的能力。在設備上運行模型而不是在云端運行，可以提高隱私、延遲和成本效益。

TensorFlow.js 是一款面向JavaScript開發者的開源機器學習庫，能夠在瀏覽器客戶端中運行。它是 Web 機器學習方案中最成熟的選項，支持全面的 WebGL 和 WebAssembly 后端算子，并且未來還將可選用WebGPU后端以實現更快的性能，以適應新的Web標準。

“選擇主題”功能利用機器學習技術，在圖像中自動提取主要前景對象，大大加快了復雜選區的速度。

下面是一幅日落的插圖，想將它改成夜晚的場景。使用了"選擇主題"和 AI prompt 來嘗試選擇最感興趣的區域以進行更新。

Photoshop 能夠根據 AI prompt 生成一幅更新后的插圖：

根據 AI prompt，Photoshop 生成了一幅基于此的更新插圖：

該模型已從 TensorFlow 轉換為 TensorFlow.js 以啟用本地執行：

// 加載選擇主題模型
const model = wait tf.loadGraphModel('select_subject.json');

// 對圖像張量運行推理
const {mask, background} = model.execute(imgTensor);

// 從掩碼中細化選擇

Adobe 和 Google 合作通過為 Emscripten 開發代理 API 來解決 Photoshop 的 WebAssembly 代碼和 TensorFlow.js 之間的同步問題。這使的框架之間可以無縫集成。

由于Google團隊通過其各種支持的后端（WebGL，WASM，Web GPU）改進了 TensorFlow.js 的硬件執行性能，這使模型的性能提高了30%到200%，在瀏覽器中能夠實現接近實時的性能。

關鍵模型針對性能關鍵的操作進行了優化，例如Conv2D。Photoshop 可以根據性能需求選擇在設備上還是在云端運行模型。

Photoshop 未來在 Web 上的發展

Photoshop 在 Web 上的普遍應用是一個巨大的里程碑，但這只是可能性的冰山一角。

隨著瀏覽器廠商不斷發展和完善標準和性能，Photoshop 將繼續在 Web 上擴展，通過漸進增強來上線更多功能。而且，Photoshop 只是一個開始。Adobe計劃在網絡上積極構建其整個 Creative Cloud 套件，在瀏覽器中解鎖更多復雜的設計應用。

Adobe 與瀏覽器工程師的合作將持續推動 Web 平臺的進步，通過提升標準和改進性能，開發出更具雄心的應用。前方等待著我們的，是充滿無限可能性的未來！

Photoshop 網頁版目前可以在以下桌面版瀏覽器上使用：

• Chrome 102+
• Edge 102+
• Firefox 111+

[1]Lit： https://lit.dev/。

[2]Spectrum： https://github.com/adobe/spectrum-web-components。

[3]Workbox： https://developer.chrome.com/docs/workbox/。

[4]TensorFlow.js： https://www.tensorflow.org/j。