Canada Data

通訊設計器 API 使用 在設計器和應用程式之間傳送和接收資料。
應用程式狀態處理每個 API 也會更新我們的內部 Flux 狀態（我們的 Redux 內部版本），以便資料可以持久保存到資料庫中。
邏輯執行API 有自己的一組邏輯，用來處理有效負載。
為了獲得此開銷的基線，我們測量了每個來源以確定它們處理所需的時間。我們使用PAPI 來取得 API 邏輯每個部分的平均持續時間。


在整個過程中，我們觀察到持續時間postMessage因瀏覽器目前記憶體使用情況和 JavaScript 事件循環狀態等因素而異。在最新版本的 Chrome 和 Firefox 上進行測試時，平均每個請求都穩定在 4 毫秒左右。雖然這不會立即引起任何擔憂，但我們將繼續監控 Designer 記憶體使用情況，以確保維持這一平均值。

儲存整個設計器的狀態。這遵循與 Redux 類似的 阿根廷 電話號碼資源 模式，其中應用程式程式碼可以分派操作，然後減速器處理該操作並返回更新的狀態。設計器 API 執行自己的減速器邏輯，然後我們調度一個操作來提交狀態。因此，我們想了解從將操作分派到減速器進行處理的基線持續時間是多少。



透過監聽處理操作所需的時間，我們發現平均約為 5 毫秒。這是我們計劃在未來進一步優化的領域，因為這不僅有利於我們的 Designer API，而且有利於整個 Webflow Designer。儘管對於這項迫在眉睫的舉措，我們決定先解決其他領域的機會。

邏輯執行
最後，每個 API 執行自己的一組專門邏輯。我們開始研究每個 API，以確定是否可以實施任何最佳化。但退後一步，我們意識到，根據上述發現，每個 API總是會有一些開銷。開銷是我們架構的副作用postMessage，它使我們能夠在應用程式和設計器之間擁有持續的回饋循環。因此，我們願意接受開銷並確定另一條前進道路，以接近 V1 的表現。

元素生成器 API
在對 API 生命週期的每個部分進行分析後，我們發現任何給定 API 的執行（postMessage執行 + Flux 處理）的基線持續時間約為 10 毫秒。為了消除串列執行 API 時的複合持續時間，我們建立了元素建構器 API。該 API 的靈感來自 V1，我們在記憶體中建立元素樹，並且僅在該元素附加到畫布上的現有元素後才同步它。