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，从而避免创建了新的变量。