- 症狀
- 3D 場景每做一次家具操作要等 21.5 秒。
- 根因
- 不是「程式太慢」,是資源生命週期問題。每次載入都產生全新 material,而清場又把上一輪的 dispose 掉;three.js 以 refcount 管理編譯後的 WebGLProgram,歸零就刪除,下一次載入必須整場重編 shader。
- 做法
- 資產模板快取(同一個模型加同一組材質只解析一次,實例用 clone 共用 geometry 與 texture),清場時跳過快取資產交給 LRU 淘汰,房間外殼以「家具以外的輸入」當指紋、沒變就跳過重建。
- 結果
- 21,554ms → 330ms。並用像素比對驗證正確性:每通道平均差 0.04/255,無任何像素差超過 8/255。同時誠實記下冷啟動仍需 63–91 秒,那是另一個根因,當次沒處理。
- 心得
- 效能優化最怕偷偷改變了正確性。「快了 65 倍」和「畫面沒變」必須同時成立,而後者需要被證明,不是宣稱。
NOTE · · 應用於 RoomPilot 室內配置助手
快了 65 倍,而且證明畫面沒變
每次家具操作要等 21.5 秒。根因不是程式慢,是 shader 每次整場重編。修完用像素比對證明畫面沒變。
看這篇筆記應用的作品
這篇筆記的實際應用

RoomPilot 室內配置助手
從平面圖與居住需求出發,在 3D 場景裡查看家具配置。
看個案研究 →