經(jīng)過(guò) Adobe 工程師多年來(lái)的努力，并與 Chrome 等瀏覽器供應(yīng)商密切合作，通過(guò) WebAssembly + Emscripten、Web Components + Lit、Service Workers + Workbox 和新的 Web API 的支持，終于在近期推出了 Web 版 Photoshop（photoshop.adobe.com），這在實(shí)現(xiàn)高度復(fù)雜和圖形密集型軟件在瀏覽器中運(yùn)行方面具有重大意義！
本文就來(lái)看看 Photoshop 所使用的 Web 能力、進(jìn)行的性能優(yōu)化以及未來(lái)可能的發(fā)展方向。
愿景：在瀏覽器中使用 Photoshop
Adobe 的愿景就是將 Photoshop 帶到瀏覽器中，讓更多的用戶能夠方便地使用它進(jìn)行圖像編輯和平面設(shè)計(jì)。過(guò)去幾十年，Photoshop一直是圖像編輯和平面設(shè)計(jì)的黃金標(biāo)準(zhǔn)，但它只能在桌面上運(yùn)行?，F(xiàn)在，通過(guò)將它移植到瀏覽器中，就打開(kāi)一個(gè)全新的世界。
Web 版 Photoshop 承諾了無(wú)處不在、無(wú)摩擦的訪問(wèn)體驗(yàn)。用戶只需打開(kāi)瀏覽器，就能即時(shí)開(kāi)始使用 Photoshop 進(jìn)行編輯和協(xié)作，而不需要安裝任何軟件。而且，由于Web是一個(gè)跨平臺(tái)的運(yùn)行環(huán)境，它可以屏蔽底層操作系統(tǒng)的差異，使Photoshop 能夠在不同的平臺(tái)上與用戶進(jìn)行互動(dòng)。
另外，通過(guò)鏈接的功能，共享工作流變得更加方便。Photoshop文檔可以通過(guò)URL直接訪問(wèn)。這樣，創(chuàng)作者可以輕松地將鏈接發(fā)送給協(xié)作者，實(shí)現(xiàn)更加便捷的合作。
但是，實(shí)現(xiàn)這個(gè)愿景面臨著重大的技術(shù)挑戰(zhàn)，要求重新思考像Photoshop這樣強(qiáng)度大的應(yīng)用如何在Web上運(yùn)行。
使用新的 Web 能力
最近幾年出現(xiàn)了一些新的 Web 平臺(tái)能力，可以通過(guò)標(biāo)準(zhǔn)化和實(shí)現(xiàn)最終使類似于Photoshop這樣的應(yīng)用成為可能。Adobe工程師們創(chuàng)新地利用了幾個(gè)關(guān)鍵的下一代API。
使用 OPFS 實(shí)現(xiàn)高性能本地文件訪問(wèn)
Photoshop 操作涉及讀寫可能非常大的PSD文件。這要求有效訪問(wèn)本地文件系統(tǒng)，新的Origin Private File System API (OPFS) 提供了一個(gè)快速、特定于源的虛擬文件系統(tǒng)。
Origin Private File System (OPFS) 是一個(gè)提供了快速、安全的本地文件系統(tǒng)訪問(wèn)能力的 Web API。它允許Web應(yīng)用以原生的方式讀取和寫入本地文件，而無(wú)需將文件直接暴露給Web環(huán)境。OPFS通過(guò)在瀏覽器中運(yùn)行一個(gè)本地代理和使用特定的文件系統(tǒng)路徑來(lái)實(shí)現(xiàn)文件的安全訪問(wèn)。
const opfsRoot = await navigator.storage.getDirectory();
使用 OPFS 可以快速創(chuàng)建、讀取、寫入和刪除文件。例如：
// 創(chuàng)建文件
const file = await opfsRoot.getFileHandle('image.psd', { create: true });
// 獲取讀寫句柄
const handle = await file.createSyncAccessHandle();
// 寫入內(nèi)容
handle.write(buffer);
// 讀取內(nèi)容
handle.read(buffer);
// 刪除文件
await file.remove();
為了實(shí)現(xiàn)絕對(duì)快的同步操作，可以利用Web Workers獲取 FileSystemSyncAccessHandle。
這個(gè)本地高性能文件系統(tǒng)在瀏覽器中實(shí)現(xiàn)Photoshop所需的高要求文件工作流程非常關(guān)鍵。它能夠提供快速而可靠的文件讀寫能力，使得Photoshop能夠更高效地處理大型文件。這種優(yōu)化的文件系統(tǒng)為用戶帶來(lái)更流暢的圖像編輯和處理體驗(yàn)。
釋放WebAssembly的強(qiáng)大潛力
WebAssembly是重新在JavaScript中實(shí)現(xiàn)Photoshop計(jì)算密集型圖形處理的關(guān)鍵因素之一。為了將現(xiàn)有的 C/C++ 代碼庫(kù)移植到 JavaScript 中，Adobe使用了Emscripten編譯器生成WebAssembly模塊代碼。
在此過(guò)程中，WebAssembly具備了幾個(gè)至關(guān)重要的能力：
-
SIMD：使用SIMD向量指令可以加速像素操作和濾波。
-
異常處理：Photoshop的代碼庫(kù)中廣泛使用C++異常。
-
流式實(shí)例化：由于Photoshop的WASM模塊大小超過(guò)80MB，因此需要進(jìn)行流式編譯。
-
調(diào)試：Chrome瀏覽器在DevTools中提供的WebAssembly調(diào)試支持是非常有用的
-
線程：Photoshop使用工作線程進(jìn)行并行執(zhí)行任務(wù)，例如處理圖像塊：
// 線程函數(shù)
void* tileProcessor(void* data) {
// 處理圖像塊數(shù)據(jù)
return NULL;
}
// 啟動(dòng)工作線程
pthread_t thread1, thread2;
pthread_create(&thread1, NULL, tileProcessor, NULL);
pthread_create(&thread2, NULL, tileProcessor, NULL);
// 等待線程結(jié)束
pthread_join(thread1, NULL);
pthread_join(thread2, NULL);
利用 P3 廣色域
P3色域比sRGB色域更廣闊，能夠顯示更多的顏色范圍。然而長(zhǎng)時(shí)間以來(lái)，在 Web 上sRGB一直是唯一的色域標(biāo)準(zhǔn)，其他更寬廣的色域如P3并沒(méi)有被廣泛采用。
Photoshop利用新的color()函數(shù)和Canvas API來(lái)充分發(fā)揮P3色域的鮮艷度，從而實(shí)現(xiàn)更準(zhǔn)確的顏色呈現(xiàn)。通過(guò)使用這些功能，Photoshop能夠更好地展示P3色域所包含的更豐富、更生動(dòng)的顏色。
color: color(display-p3 1 0.5 0)
Web Components 提供UI的靈活性
Photoshop是 Adobe Creative Cloud 生態(tài)系統(tǒng)中的一部分。通過(guò)使用基于 Lit[1] 構(gòu)建的標(biāo)準(zhǔn)化 Web Components 策略，可以實(shí)現(xiàn)應(yīng)用之間 UI 的一致性。
Lit 是一個(gè)構(gòu)建快速、輕量級(jí) Web Components 庫(kù)。它的核心是一個(gè)消除樣板代碼的組件基礎(chǔ)類，它提供了響應(yīng)式狀態(tài)、作用域樣式和聲明性模板系統(tǒng)，這些系統(tǒng)都非常小、快速且具有表現(xiàn)力。
Photoshop 的 UI 元素來(lái)自于Adobe 的 Web Components 庫(kù)：Spectrum[2]，該庫(kù)實(shí)現(xiàn)了Adobe的設(shè)計(jì)系統(tǒng)。
Spectrum Web Components 具有以下特點(diǎn)：
-
默認(rèn)支持無(wú)障礙訪問(wèn)：開(kāi)發(fā)時(shí)考慮到現(xiàn)有和新興瀏覽器規(guī)范，以支持輔助技術(shù)。
-
輕量級(jí)：使用 Lit Element 實(shí)現(xiàn)，開(kāi)銷最小。
-
基于標(biāo)準(zhǔn)：基于 Web Components 標(biāo)準(zhǔn)，如自定義元素和 Shadow DOM 構(gòu)建。
-
框架無(wú)關(guān)：由于瀏覽器級(jí)別的支持，可以與任何框架一起使用。
此外，整個(gè) Photoshop 應(yīng)用都是使用基于 Lit 的 Web Components 構(gòu)建的。Lit的模板和虛擬DOM差異化使得UI更新效率高。當(dāng)需要時(shí)，Web Components 的封裝性也使得輕松地集成其他團(tuán)隊(duì)的 React 代碼成為可能。
總體而言，Web Components 的瀏覽器原生自定義元素結(jié)合Lit的性能，為Adobe構(gòu)建復(fù)雜的 Photoshop UI 提供了所需的靈活性，同時(shí)保持了高效性。
優(yōu)化 Photoshop 在瀏覽器中的性能
盡管新的 Web Components 提供了基礎(chǔ)，但像Photoshop這樣的密集型桌面應(yīng)用仍然需要進(jìn)行廣泛的跟蹤和性能優(yōu)化工作，以提供一流的在線體驗(yàn)。
使用 Service Workers 緩存資源和代碼
Service Workers 可以讓 Web 應(yīng)用在用戶首次訪問(wèn)后將其代碼和資源等緩存到本地，以便在后續(xù)加載時(shí)可以更快地呈現(xiàn)。盡管 Photoshop 目前還不支持完全離線使用，但它已經(jīng)利用了 Service Workers 來(lái)緩存其 WebAssembly 模塊、腳本和其他資源，以提高加載速度。
Chrome DevTools Application 面板 > Cache storage 展示了 Photoshop 預(yù)緩存的不同類型資源，包括在Web上進(jìn)行代碼拆分后本地緩存的許多JavaScript代碼塊。這些被本地緩存的JavaScript代碼塊使得后續(xù)的加載非?？焖佟＿@種緩存機(jī)制對(duì)于加載性能有著巨大的影響。在第一次訪問(wèn)之后，后續(xù)的加載通常非?？焖?。
Adobe 使用了 Workbox[3] 庫(kù)，以更輕松地將 Service Worker 緩存集成到構(gòu)建過(guò)程中。
當(dāng)資源從Service Worker緩存中返回時(shí)，V8引擎使用一些優(yōu)化策略：
-
安裝期間緩存的資源會(huì)被立即進(jìn)行編譯，并立即進(jìn)行代碼緩存，以實(shí)現(xiàn)一致且快速的性能表現(xiàn)。
-
通過(guò)Cache API 進(jìn)行緩存的資源，在第二次加載時(shí)會(huì)經(jīng)過(guò)優(yōu)化的緩存處理，比普通緩存更快速。
-
V8能夠根據(jù)資源的緩存重要性進(jìn)行更積極的編譯優(yōu)化。
這些優(yōu)化措施使得 Photoshop 龐大的緩存 WebAssembly 模塊能夠獲得更高的性能。
流式編譯和緩存大型WebAssembly模塊
Photoshop的代碼庫(kù)需要多個(gè)大型的WebAssembly模塊，其中一些大小超過(guò)80MB。V8和Chrome中的流式編譯支持高效處理這些龐大的模塊。
此外，當(dāng)?shù)谝淮螐?Service Worker 請(qǐng)求 WebAssembly 模塊時(shí)，V8會(huì)生成并存儲(chǔ)一個(gè)優(yōu)化版本以供緩存使用，這對(duì)于 Photoshop 龐大的代碼尺寸至關(guān)重要。
并行圖形操作的多線程支持
在 Photoshop 中，許多核心圖像處理操作（如像素變換）可以通過(guò)在多個(gè)線程上進(jìn)行并行執(zhí)行來(lái)大幅提速。WebAssembly 的線程支持能夠利用多核設(shè)備進(jìn)行計(jì)算密集型圖形任務(wù)。
這使得 Photoshop 可以將性能關(guān)鍵的圖像處理函數(shù)移植到 WebAssembly，并使用與桌面端相同的多線程方法來(lái)實(shí)現(xiàn)并行處理。
通過(guò) WebAssembly 調(diào)試優(yōu)化
對(duì)于開(kāi)發(fā)過(guò)程中的診斷和解決性能瓶頸來(lái)說(shuō)，WebAssembly 調(diào)試支持非常重要。Chrome DevTools 具備分析 WASM 代碼、設(shè)置斷點(diǎn)和檢查變量等一系列功能，這使得WASM的調(diào)試與JavaScript有著相同的可調(diào)試性。
將設(shè)備端機(jī)器學(xué)習(xí)與 TensorFlow.js 集成
Photoshop 最近的 Web 版本包括了使用 TensorFlow.js[4] 提供 AI 功能的能力。在設(shè)備上運(yùn)行模型而不是在云端運(yùn)行，可以提高隱私、延遲和成本效益。
TensorFlow.js 是一款面向JavaScript開(kāi)發(fā)者的開(kāi)源機(jī)器學(xué)習(xí)庫(kù)，能夠在瀏覽器客戶端中運(yùn)行。它是 Web 機(jī)器學(xué)習(xí)方案中最成熟的選項(xiàng)，支持全面的 WebGL 和 WebAssembly 后端算子，并且未來(lái)還將可選用WebGPU后端以實(shí)現(xiàn)更快的性能，以適應(yīng)新的Web標(biāo)準(zhǔn)。
“選擇主題”功能利用機(jī)器學(xué)習(xí)技術(shù)，在圖像中自動(dòng)提取主要前景對(duì)象，大大加快了復(fù)雜選區(qū)的速度。
下面是一幅日落的插圖，想將它改成夜晚的場(chǎng)景。使用了"選擇主題"和 AI prompt 來(lái)嘗試選擇最感興趣的區(qū)域以進(jìn)行更新。
Photoshop 能夠根據(jù) AI prompt 生成一幅更新后的插圖：
根據(jù) AI prompt，Photoshop 生成了一幅基于此的更新插圖：
該模型已從 TensorFlow 轉(zhuǎn)換為 TensorFlow.js 以啟用本地執(zhí)行：
// 加載選擇主題模型
const model = wait tf.loadGraphModel('select_subject.json');
// 對(duì)圖像張量運(yùn)行推理
const {mask, background} = model.execute(imgTensor);
// 從掩碼中細(xì)化選擇
Adobe 和 Google 合作通過(guò)為 Emscripten 開(kāi)發(fā)代理 API 來(lái)解決 Photoshop 的 WebAssembly 代碼和 TensorFlow.js 之間的同步問(wèn)題。這使的框架之間可以無(wú)縫集成。
由于Google團(tuán)隊(duì)通過(guò)其各種支持的后端（WebGL，WASM，Web GPU）改進(jìn)了 TensorFlow.js 的硬件執(zhí)行性能，這使模型的性能提高了30%到200%，在瀏覽器中能夠?qū)崿F(xiàn)接近實(shí)時(shí)的性能。
關(guān)鍵模型針對(duì)性能關(guān)鍵的操作進(jìn)行了優(yōu)化，例如Conv2D。Photoshop 可以根據(jù)性能需求選擇在設(shè)備上還是在云端運(yùn)行模型。
Photoshop 未來(lái)在 Web 上的發(fā)展
Photoshop 在 Web 上的普遍應(yīng)用是一個(gè)巨大的里程碑，但這只是可能性的冰山一角。
隨著瀏覽器廠商不斷發(fā)展和完善標(biāo)準(zhǔn)和性能，Photoshop 將繼續(xù)在 Web 上擴(kuò)展，通過(guò)漸進(jìn)增強(qiáng)來(lái)上線更多功能。而且，Photoshop 只是一個(gè)開(kāi)始。Adobe計(jì)劃在網(wǎng)絡(luò)上積極構(gòu)建其整個(gè) Creative Cloud 套件，在瀏覽器中解鎖更多復(fù)雜的設(shè)計(jì)應(yīng)用。
Adobe 與瀏覽器工程師的合作將持續(xù)推動(dòng) Web 平臺(tái)的進(jìn)步，通過(guò)提升標(biāo)準(zhǔn)和改進(jìn)性能，開(kāi)發(fā)出更具雄心的應(yīng)用。前方等待著我們的，是充滿無(wú)限可能性的未來(lái)！
Photoshop 網(wǎng)頁(yè)版目前可以在以下桌面版瀏覽器上使用：
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/js文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-710389.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-710389.html
到了這里，關(guān)于Web版Photoshop來(lái)了，用到了哪些前端技術(shù)？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
