chrome內存性能測試

chrome內存性能測試

1. F12打開調試器，點擊Memory
   2. 點擊左邊的小圓圈，創建第一個快照。
   3. 創建更多的快照。
   4. 切換到comparison選項界面，右邊就會有數據對比。
   5. 看數據，new就是新建的，deleted就是刪除的，delta是新建和刪除的和，爲正就是新建的多，爲負就是相反。
   6. 定位代碼，這裏是three的項目，所以總是定位到render中去，所以定位基本沒意義。
   7. 內存泄露嚴重的截圖，這個不到10分鐘內存就到達2G而崩潰。
   8. 進過分析(就只看代碼)找到了問題的所在，修改之後的內存快照，基本維持穩定。

geometry.addAttribute('position', new THREE.Float32BufferAttribute(scalePos[0], 3))
geometry.attributes.position.array.set(scalePos[0]);

看上面兩行代碼。因爲每次動畫循環我都新建了一個buffer，但是這個buffer沒有被清理導致內存暴增。爲什麼會這麼寫，是因爲scalePos是個數組Array，而geometry.attributes.position.array是個Float32Array 不能直接用等號賦值。查了一下api，發現有個set方法。所以改造一下代碼通過set方法來賦值buffer，從而避免創建了新的變量。