7月安卓手機性能榜：紅魔8S Pro再奪榜首
7月份的手機市場風平浪靜，除了紅魔和努比亞帶來了兩款搭載驍龍8Gen2領先版處理器的新機之外，別的也想不到有什么新品了，這也正常，通常6月7月都是手機廠商修整的時間，進入8月份之
經過 Adobe 工程師多年來的努力，并與 Chrome 等瀏覽器供應商密切合作，通過 WebAssembly + Emscripten、Web Components + Lit、Service Workers + Workbox 和新的 Web API 的支持，終于在近期推出了 Web 版 Photoshop（photoshop.adobe.com），這在實現(xiàn)高度復雜和圖形密集型軟件在瀏覽器中運行方面具有重大意義！
本文就來看看 Photoshop 所使用的 Web 能力、進行的性能優(yōu)化以及未來可能的發(fā)展方向。
Adobe 的愿景就是將 Photoshop 帶到瀏覽器中，讓更多的用戶能夠方便地使用它進行圖像編輯和平面設計。過去幾十年，Photoshop一直是圖像編輯和平面設計的黃金標準，但它只能在桌面上運行?，F(xiàn)在，通過將它移植到瀏覽器中，就打開一個全新的世界。
Web 版 Photoshop 承諾了無處不在、無摩擦的訪問體驗。用戶只需打開瀏覽器，就能即時開始使用 Photoshop 進行編輯和協(xié)作，而不需要安裝任何軟件。而且，由于Web是一個跨平臺的運行環(huán)境，它可以屏蔽底層操作系統(tǒng)的差異，使Photoshop 能夠在不同的平臺上與用戶進行互動。
另外，通過鏈接的功能，共享工作流變得更加方便。Photoshop文檔可以通過URL直接訪問。這樣，創(chuàng)作者可以輕松地將鏈接發(fā)送給協(xié)作者，實現(xiàn)更加便捷的合作。
但是，實現(xiàn)這個愿景面臨著重大的技術挑戰(zhàn)，要求重新思考像Photoshop這樣強度大的應用如何在Web上運行。
最近幾年出現(xiàn)了一些新的 Web 平臺能力，可以通過標準化和實現(xiàn)最終使類似于Photoshop這樣的應用成為可能。Adobe工程師們創(chuàng)新地利用了幾個關鍵的下一代API。
Photoshop 操作涉及讀寫可能非常大的PSD文件。這要求有效訪問本地文件系統(tǒng)，新的Origin Private File System API (OPFS) 提供了一個快速、特定于源的虛擬文件系統(tǒng)。
Origin Private File System (OPFS) 是一個提供了快速、安全的本地文件系統(tǒng)訪問能力的 Web API。它允許Web應用以原生的方式讀取和寫入本地文件，而無需將文件直接暴露給Web環(huán)境。OPFS通過在瀏覽器中運行一個本地代理和使用特定的文件系統(tǒng)路徑來實現(xià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();// 寫入內容handle.write(buffer);// 讀取內容handle.read(buffer);// 刪除文件await file.remove();為了實現(xiàn)絕對快的同步操作，可以利用Web Workers獲取 FileSystemSyncAccessHandle。
這個本地高性能文件系統(tǒng)在瀏覽器中實現(xiàn)Photoshop所需的高要求文件工作流程非常關鍵。它能夠提供快速而可靠的文件讀寫能力，使得Photoshop能夠更高效地處理大型文件。這種優(yōu)化的文件系統(tǒng)為用戶帶來更流暢的圖像編輯和處理體驗。
WebAssembly是重新在JavaScript中實現(xiàn)Photoshop計算密集型圖形處理的關鍵因素之一。為了將現(xiàn)有的 C/C++ 代碼庫移植到 JavaScript 中，Adobe使用了Emscripten編譯器生成WebAssembly模塊代碼。
在此過程中，WebAssembly具備了幾個至關重要的能力：
// 線程函數(shù)void* tileProcessor(void* data) { // 處理圖像塊數(shù)據(jù) 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色域比sRGB色域更廣闊，能夠顯示更多的顏色范圍。然而長時間以來，在 Web 上sRGB一直是唯一的色域標準，其他更寬廣的色域如P3并沒有被廣泛采用。
Photoshop利用新的color()函數(shù)和Canvas API來充分發(fā)揮P3色域的鮮艷度，從而實現(xiàn)更準確的顏色呈現(xiàn)。通過使用這些功能，Photoshop能夠更好地展示P3色域所包含的更豐富、更生動的顏色。
color: color(display-p3 1 0.5 0)Photoshop是 Adobe Creative Cloud 生態(tài)系統(tǒng)中的一部分。通過使用基于 Lit[1] 構建的標準化 Web Components 策略，可以實現(xiàn)應用之間 UI 的一致性。
Lit 是一個構建快速、輕量級 Web Components 庫。它的核心是一個消除樣板代碼的組件基礎類，它提供了響應式狀態(tài)、作用域樣式和聲明性模板系統(tǒng)，這些系統(tǒng)都非常小、快速且具有表現(xiàn)力。
Photoshop 的 UI 元素來自于Adobe 的 Web Components 庫：Spectrum[2]，該庫實現(xiàn)了Adobe的設計系統(tǒng)。
Spectrum Web Components 具有以下特點：
此外，整個 Photoshop 應用都是使用基于 Lit 的 Web Components 構建的。Lit的模板和虛擬DOM差異化使得UI更新效率高。當需要時，Web Components 的封裝性也使得輕松地集成其他團隊的 React 代碼成為可能。
總體而言，Web Components 的瀏覽器原生自定義元素結合Lit的性能，為Adobe構建復雜的 Photoshop UI 提供了所需的靈活性，同時保持了高效性。
盡管新的 Web Components 提供了基礎，但像Photoshop這樣的密集型桌面應用仍然需要進行廣泛的跟蹤和性能優(yōu)化工作，以提供一流的在線體驗。
Service Workers 可以讓 Web 應用在用戶首次訪問后將其代碼和資源等緩存到本地，以便在后續(xù)加載時可以更快地呈現(xiàn)。盡管 Photoshop 目前還不支持完全離線使用，但它已經利用了 Service Workers 來緩存其 WebAssembly 模塊、腳本和其他資源，以提高加載速度。
Chrome DevTools Application 面板 > Cache storage 展示了 Photoshop 預緩存的不同類型資源，包括在Web上進行代碼拆分后本地緩存的許多JavaScript代碼塊。這些被本地緩存的JavaScript代碼塊使得后續(xù)的加載非常快速。這種緩存機制對于加載性能有著巨大的影響。在第一次訪問之后，后續(xù)的加載通常非?？焖?。
Adobe 使用了 Workbox[3] 庫，以更輕松地將 Service Worker 緩存集成到構建過程中。
當資源從Service Worker緩存中返回時，V8引擎使用一些優(yōu)化策略：
這些優(yōu)化措施使得 Photoshop 龐大的緩存 WebAssembly 模塊能夠獲得更高的性能。
Photoshop的代碼庫需要多個大型的WebAssembly模塊，其中一些大小超過80MB。V8和Chrome中的流式編譯支持高效處理這些龐大的模塊。
此外，當?shù)谝淮螐?Service Worker 請求 WebAssembly 模塊時，V8會生成并存儲一個優(yōu)化版本以供緩存使用，這對于 Photoshop 龐大的代碼尺寸至關重要。
在 Photoshop 中，許多核心圖像處理操作（如像素變換）可以通過在多個線程上進行并行執(zhí)行來大幅提速。WebAssembly 的線程支持能夠利用多核設備進行計算密集型圖形任務。
這使得 Photoshop 可以將性能關鍵的圖像處理函數(shù)移植到 WebAssembly，并使用與桌面端相同的多線程方法來實現(xiàn)并行處理。
對于開發(fā)過程中的診斷和解決性能瓶頸來說，WebAssembly 調試支持非常重要。Chrome DevTools 具備分析 WASM 代碼、設置斷點和檢查變量等一系列功能，這使得WASM的調試與JavaScript有著相同的可調試性。
Photoshop 最近的 Web 版本包括了使用 TensorFlow.js[4] 提供 AI 功能的能力。在設備上運行模型而不是在云端運行，可以提高隱私、延遲和成本效益。
TensorFlow.js 是一款面向JavaScript開發(fā)者的開源機器學習庫，能夠在瀏覽器客戶端中運行。它是 Web 機器學習方案中最成熟的選項，支持全面的 WebGL 和 WebAssembly 后端算子，并且未來還將可選用WebGPU后端以實現(xiàn)更快的性能，以適應新的Web標準。
“選擇主題”功能利用機器學習技術，在圖像中自動提取主要前景對象，大大加快了復雜選區(qū)的速度。
下面是一幅日落的插圖，想將它改成夜晚的場景。使用了"選擇主題"和 AI prompt 來嘗試選擇最感興趣的區(qū)域以進行更新。
Photoshop 能夠根據(jù) AI prompt 生成一幅更新后的插圖：
根據(jù) AI prompt，Photoshop 生成了一幅基于此的更新插圖：
該模型已從 TensorFlow 轉換為 TensorFlow.js 以啟用本地執(zhí)行：
// 加載選擇主題模型const model = wait tf.loadGraphModel('select_subject.json');// 對圖像張量運行推理const {mask, background} = model.execute(imgTensor);// 從掩碼中細化選擇Adobe 和 Google 合作通過為 Emscripten 開發(fā)代理 API 來解決 Photoshop 的 WebAssembly 代碼和 TensorFlow.js 之間的同步問題。這使的框架之間可以無縫集成。
由于Google團隊通過其各種支持的后端（WebGL，WASM，Web GPU）改進了 TensorFlow.js 的硬件執(zhí)行性能，這使模型的性能提高了30%到200%，在瀏覽器中能夠實現(xiàn)接近實時的性能。
關鍵模型針對性能關鍵的操作進行了優(yōu)化，例如Conv2D。Photoshop 可以根據(jù)性能需求選擇在設備上還是在云端運行模型。
Photoshop 在 Web 上的普遍應用是一個巨大的里程碑，但這只是可能性的冰山一角。
隨著瀏覽器廠商不斷發(fā)展和完善標準和性能，Photoshop 將繼續(xù)在 Web 上擴展，通過漸進增強來上線更多功能。而且，Photoshop 只是一個開始。Adobe計劃在網(wǎng)絡上積極構建其整個 Creative Cloud 套件，在瀏覽器中解鎖更多復雜的設計應用。
Adobe 與瀏覽器工程師的合作將持續(xù)推動 Web 平臺的進步，通過提升標準和改進性能，開發(fā)出更具雄心的應用。前方等待著我們的，是充滿無限可能性的未來！
Photoshop 網(wǎng)頁版目前可以在以下桌面版瀏覽器上使用：
- 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。
本文鏈接：http://www.www897cc.com/showinfo-26-12150-0.htmlWeb版Photoshop來了，用到了哪些前端技術？
聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Node.js 是如何處理請求的
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號