JS 如何使用 performance 查看内存

一、JS 如何使用 performance 查看内存

1、在浏览器环境中，通过开发者工具的Memory选项卡，可以直接查看当前页面或应用程序的内存使用情况。

2、若想在JavaScript中获取内存信息并打印到控制台，可以利用性能API中的memory或measureUserAgentSpecificMemory属性。

3、jsHeapSizeLimit：JavaScript堆大小限制。

4、totalJSHeapSize：JavaScript堆总大小。

5、usedJSHeapSize：JavaScript堆使用大小。

6、为了更直观地查看特定对象的占用情况，这里提供了一个简单的封装示例。同时，开启vconsole可以方便移动端查看内存信息。

7、请留意，浏览器的crossOriginIsolated安全特性用于表示页面或Worker是否启用了跨域隔离。若未配置，控制台会提示未开启。

8、对于nginx服务器，需在配置文件（如nginx.conf）的路由模块中添加相关设置。

9、在Worker环境中，参照提供的demo示例（虽然无法直接查看，但该链接指向了相关资源）。

10、通过上述方法，开发者可以更深入地理解和管理页面的内存使用情况，优化应用性能。请注意，合理利用内存资源对于提高应用响应速度和性能至关重要。

二、性能分析二——cpu usage+Performance

1、   这次的bug是通过Chome的Task manager和Performance发现的。交互上肉眼看不出来有啥异样。经测试点击某个功能（微环境）前，Performance monitor中的CPU usage会回到很低的水平，3%-4%左右，可是点击了微环境后，如下图所示：

2、其实Task manager中的cpu意思差不多，如下图所示：

3、  可是点击微环境的功能后，在微环境的模式下CPU uasge会在99%-100%之间，如下图所示：

4、此时Chrome浏览器的任务管理器的CPU值如下（并不是一直这样，会上下变动）：

5、  我们先不管开启后是不是应该一直这么高。点击关闭后回到默认的状态，温度场的功能都应该清掉。

6、可是关闭微环境后，浏览器中的cpu usage依然很高，如下图cpu拍照的图上也能看出来。

7、给CPU拍照，看出一老长的时间都在处理getHSV，而这个方法在MicoEnviroment.js(微环境管理)中调用的，如下图所示。

8、找到537行，调试一把，发现这个_updateSmoke方法一直在被调用，推测是关闭这个功能时，autoUpdate没有清除：