如果您熟悉 Sketch，您可能已經在 Mac 應用程式和瀏覽器中查看過您的文件。儘管接觸點不同，但您看到的內容是相同的。但您是否想過我們是如何做到的？
當您在瀏覽器中查看 Sketch 文件時，您實際上是在查看我們預先準備好的文件預覽。這不僅僅是一個預覽——它是一個完全可縮放、可滾動的整個頁面的預覽，其中可能包含數百個畫板。通過使用此預覽，我們可以讓您團隊中的任何人都可以訪問文件，即使他們沒有 Mac，並且仍然可以為他們提供良好的體驗。
我想分享更多關於我們如何做到這一點以及我們如何在不同平台之間保持渲染準確性的見解。我還將向您介紹我們最近解鎖的一些性能改進。
關於測量性能的說明
在我們開始之前，請先簡單說明一下 Sketch 和整個產業如何測量性能。也很難用單一數字來確定性能。它在紙面上聽起來可能不錯，但在實踐中通常沒有多大意義。例如，由於 Sketch 文件變化多端，我們所做的一些更改對某些人影響很大，但對其他人幾乎沒有影響。最終，我們選擇通過專注於我們的基本架構而不是特定的指標或追逐個別的邊緣情況來全面提高性能。
其次，大型技術專案（例如這些專案）的主要難點在於，您必須在保持汽車運行的同時更換引擎。這給團隊和產品帶來了各自的挑戰。
介紹：場景圖
在過去的兩年中，我們一直在 Mac 應用程式中制定一項長期計畫，以擺脫我們直接繪製像素的渲染流程。相反，我們選擇在 Sketch 圖層和您在螢幕上看到的像素之間創建一個中間表示，我們認為這可以為我們解鎖一些良好的性能優化。
這個圖表不是根據具有樣式、群組和畫板的圖層來思考的，而是根據更基本的術語來思考的，例如您需要填充或描描的路径——這是在分析冗餘繪圖操作和加快速度方面的一個很好的級別。畢竟，更快渲染的關鍵是在通過之間盡可能少地繪製。
2022 年，我們開始构建場景圖——一種由節點組成的數據結構，用於幫助組織和表示图形場景。在我們的例子中，我們指的是以更基本的方式表示 Sketch 中的典型對象，例如圖層、樣式和畫板。
以下是一個示例
在這裡，您可以看到右側的形狀如何在場景圖中轉換。
一步一步來
我們一開始僅在渲染個別圖層時使用場景圖，在每個渲染過程中有效地創建了數百個微型場景圖。 然後，我們轉向了圖層組和整個頁面，最後是在所有線程之間共享單個場景圖。 隨著每個版本的發佈，我們不斷擴展場景圖的範圍。
隨著 Sketch 95 的發佈，我們已經跨越了另一個重要的里程碑。 我們現在可以就地更新場景圖，而不是每次都從頭開始重建。 例如，當用戶移動圖層時，我們現在只需要更新樹中的一兩個屬性，而不必完全重新創建它。
這似乎是一件顯而易見的事情，我們也同意。 但正如我們之前所說，在您進行更改時必須保持引擎運行，這意味著我們需要謹慎地逐步改進 - 我們非常高興在 Sketch 95 中邁出了最後一大步。
Sketch 94 和 95 的比較。
Mac 應用程式的改進
構建場景圖對我們來說是一項成功，我們在自己的許多文件中都看到了更快的性能。 由於這項技術的飛躍，我們還能夠在其他方面進行以下功能改進
- 放大時更好的陰影渲染
- 改進了符號和遮罩內部的背景模糊
- 能夠將任何圖層轉換為 Alpha 遮罩並對其應用模糊
- 支持負陰影擴散（投影形狀可以小於或大於陰影）
在這裡，您可以看到負陰影擴散的作用。
但這並不是成功的唯一衡量標準。 由於在 Mac 上推出了場景圖技術，我們還大幅提高了 Sketch 在瀏覽器中的保真度和功能。
將其帶入網路
如果您已經使用 Sketch 一段時間了，您可能已經注意到，我們在網路應用程式中從僵化的畫板網格切換到了無限畫布視圖。 這反映了我們在 Mac 上都熟悉的體驗，並且確實有助於簡化設計師和利益相關者之間的對話，因為我們都在關注同一件事。
我們如何在網路上構建這種全新的全畫布體驗？ 您可能已經猜到了答案：新的畫布體驗當然由我們為 Mac 應用程式構建的同一個場景圖提供支援。 我們的新場景圖的優點是它與縮放無關，我們可以在前端實時渲染它，而無需使用任何預渲染的資源。 這意味著我們理論上可以在瀏覽器中提供流暢的平移和縮放體驗。
不過，這並不意味著這項功能很容易構建。 場景圖已經處理了複雜的邏輯，例如解析符號、覆蓋、布林運算、輪廓文本等等。 但是仍然有一個不那麼簡單的部分需要解釋這些命令並快速、準確地將像素顯示在螢幕上，並且以各種瀏覽器都支援的方式進行。
克服挑戰
讓我們從頭開始：場景圖由我們的渲染農場生成並存儲在伺服器上以供以後使用。 當用戶嘗試在瀏覽器中查看文檔時，我們會將生成的場景圖傳遞給前端，前端會解析它並將其渲染為像素。 由於 WebAssembly 和 Emscripten，我們不需要在 Javascript 中執行此操作，但我們可以使用 C++ 和 Skia 渲染庫（其中散佈了一些 WebGL）以完全保真度和高速渲染路徑、填充、濾鏡。 而且因為我們不僅僅是顯示圖像，我們可以以任何縮放級別進行部分或完全渲染，讓您可以隨心所欲地平移和縮放。
讓網頁上的 Canvas 能夠順暢地平移和縮放，其實是一項相當大的挑戰，尤其是在處理複雜的 Sketch 文件時。網頁瀏覽器的限制以及需要支援的各種裝置，都讓這成為一個棘手的問題。例如，直到最近所有瀏覽器才開始有效支援多執行緒，因此渲染器必須即使在只有主執行緒可用的情況下也能正常運作。
如果只有一個執行緒可用，如何在不阻礙使用者互動的情況下快速且流暢地渲染？我們在此不贅述細節，但我們提出了自己的策略，例如仔細安排並只在使用者未互動時執行耗時的工作，並且我們建立了自己的系統來妥善快取 Canvas 內容，以加速平移和縮放等操作。
這個一開始只是為了提升 Mac 上渲染速度的專案，卻在另一個領域釋放了絕佳的功能，即使這些改進在一開始對終端使用者來說似乎並不明顯。看到這些長期的投入獲得回報，實在令人非常滿意，尤其是在我們成功地提升了網頁版和 Mac 版體驗的一致性之後。
反過來，這也為 Sketch 解鎖了其他幾個期待已久的功能，但我們會留到下一篇再談。在那之前，敬請期待 😉
