Node15以下的版本不支持M1芯片需要在終端输入命令。

进入Rosetta模式然后再进行低版本的安装就可以了。

chrome现在有一个高大上的fps观测工具你可以不用再去分析performance面板的跑分了。

选择第一个结果回车即可

这个工具有个缺点是位置不能移动

• 左上角的百分比越高越好

这里对重点部分做一个摘要来方便你的快速使用。

2、等待一段时间期间可以执行一些自己想要检测的操作

3、点击红点或者点击stop停止录制查看结果

官方已经写得佷通俗易懂了不需要再概括了，请直接看官方教程

文中也给了一些优化建议有兴趣也可以看看。

注：教程中fps分析部分已经过时这里可以查看

开发过程中难免会遇到内存问题本次笔记主要是记录一下项目运行过程中内存情况的解析工具。

查看页面在浏览器中使用的内存

如果只想查看当前浏览器的各个 tab 正在使用的内存量则在设置 - 更多工具 - 任务管理器即可。效果如下图：

• Heap snapshot – 用以打印堆快照堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配
• Allocation sampling – 内存信息采样，使用采样的方法记录内存分配此配置文件类型具有最小的性能开销，可用于长时间运行的操作它提供了由 javascript 执行堆栈细分的良好近似值分配。

下面详细介绍一下三个功能（时间关系这里直接粘贴了原文内容）

右上那块区域从左到右有三个操作：查看方式、对象归类的筛选、对象选择。

左边有 Summary 字樣的那个可以选择查看内存快照的方式，可选方式如下：

• Summary – 可以显示按构造函数名称分组的对象使用此视图可以根据按构造函数名称汾组的类型深入了解对象（及其内存使用），适用于跟踪 DOM 泄漏
• Comparison – 可以显示两个快照之间的不同。使用此视图可以比较两个（或多个）内存快照在某个操作前后的差异检查已释放内存的变化和参考计数，可以确认是否存在内存泄漏及其原因
• Containment – 此视图提供了一种对象结构視图来分析内存使用，由顶级对象作为入口
• Statistic – 内存使用饼状的统计图。