Web版Photoshop來了，用到了哪些前端技術？

經過 Adobe 工程師多年來的努力，並與 Chrome 等瀏覽器供應商密切合作，通過 WebAssembly + Emscripten、Web Components + Lit、Service Workers + Workbox 和新的 Web API 的支持，終於在近期推出了 Web 版 Pho ...

經過 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 之間的同步問題。這使的框架之間可以無縫集成。