這里記錄一下自己關於這方面的一些想法：
1.項目架構
針對一個實時編輯/預覽的可視化項目，那么至少會由兩個模塊組成（編輯模塊、預覽模塊），如下圖所示：
軟件設計中一個重要原則就是：低內聚高耦合。
大家可能都做過業務邏輯上的模塊化開發，但是今天這里說的是頁面上的模塊化開發。
2.如何實現頁面的模塊化開發
有這種想法的初衷是因為，針對一個實時編輯/預覽的可視化項目，尤其是三維可視化項目，對於編輯模塊和預覽模塊來說，這兩個模塊所需的技術棧很有很大的差別的，所以，往往會由兩組人來開發。
所以，這兩個頁面的模塊化問題就亟待解決。
那么我的方案是iframe + postMessage。
postMessage是一種跨源通信的解決方案，可以實現兩個iframe之間的通信。
針對此類項目，編輯的是json數據，渲染的話也是根據json數據進行場景元素的添加/移除，所以postMessage進行傳輸的話也是json數據的傳輸，並且兩個頁面模塊之間完美解耦。
3.拓展性
因為是用iframe實現頁面模塊的解耦，並且可以跨源通訊，所以針對后續的功能/頁面模塊添加也很方便，真正實現了即插即用的插件化思想，大大增強了項目/軟件的可拓展性 。
4.增加額外線程來提高web項目的性能
我們都知道js是單線程的，所以對於三維可視化項目來說，逐幀渲染的特性使得js的單線程弊端越加凸顯出來。用戶的一些頁面交互往往會使得場景瞬間卡頓。
就像我之前做的一個機械臂切割模具的仿真三維程序，由於BSP操作太吃cpu，就算最后用八叉樹來減少BSP的計算量，但是如果切割精度要求很高的話，BSP的量還是會很大。
所以，我們可以將這部分BSP操作獨立出來進行，這就是Web Worker！
主線程只用於場景的渲染，而大量的數據計算作業全部交由Web Worker 開辟的子進程來做，計算完畢直接將結果傳給主線程，主線程利用該數據進行接下來的渲染操作。