你好，我是李艺。

上节课我们主要学习了如何优化网络请求参数，这节课我们学习如何使用Performance面板和Memory面板辅助定位代码的性能问题。

先看一下问题，微信开发者工具提供了不少性能分析工具，通过这些工具可以很直观地看到哪些代码存在着性能瓶颈，无论是对于研发还是对于QA人员掌握这些工具的使用都是十分有必要的，当我们用语言不容易说服对方的时候，拿这些工具的查询截图直接发过去就是最有力的沟通方式之一了，下面我们看项目实践。

首先看实践一，通过Performance面板查看逻辑层的执行情况。

Performance面板是调试区的面板之一，它的主要功能与Chrome浏览器是类似的，在这个使用的时候我们主要看FPS CPU，Network Main还有Summary等等这几个区域，在FPS这个区域如果是有红三角出现则代表这里的渲染可能不是特别流畅，需要我们特别关注，CPU区域的波浪图可以很直观地看出CPU的一个紧张程度，Network这个区域可以看到网络请求一般如果出现短线是没有关系的，如果出现很长的一个长条可能是有资源请求被加载了很久，需要我们关注，在Main区域主要是看有没有红三角出现，一般在红三角出现的地方可能就出现了逻辑执行或者视图渲染不是很均衡的一些问题。

更详细的这个总览图，在这个面板的最下方，在这个Summary标签区域有一个图形数据，这里我们可以看到有脚本 渲染 加载等等这些操作的，整体执行的一个比例情况，用户体验丝滑的页面一般在这个区域，它相对的是比较均衡的，不会出现说总耗时很长，且只有某一项子操作占据很大一部分时间的这样一个特殊情况出现，如果某一个渲染周期它耗时太久的话，我们在总览图里面还可以看到黄色的警告，一般这些地方 出现警告的地方是需要我们特别注意的，接下来我们看代码演示。

下面我们看实践一的代码演示。

打开我们的微信开发者工具重新刷新一下项目，打开调试区的Performance面板，这个面板不只在调试区有，如果是我们用真机调试或者是用Mac端的这种调试，也有同样的这样的一个面板，使用方法都是类似的，现在我们单击录制按钮，这地方有一个 单击录制按钮 录制开始以后，我们开始进行页面上的一个操作。

我们想检验哪一部分操作的一个执行情况，就进行哪一部分的一个动作去实施，当我们感觉可以的时候就停止 点Stop停止录制，它会进行一个分析，然后把这个结果呈现给我们，现在这个结果已经出来了，看一下这个地方就是FPS这个地方，下面的CPU是一个波浪图，一般是小山峰比较高的地方代表的执行比较密集，我们这个地方资源的耗费是比较严重的，再往下是有一个Network，Network如果是我们没有网络请求的话，这个Network基本上是没有的，这个地方我们可以看一下，这是Network面板 这个地方是有一个加载，鼠标放上去它会显示一个网址，代表是我们加载了这个地方，然后它有加载时间是大概用了75.25ms，这是加载网络接口，然后我们所消耗的一个时间，选择上面这个地方我们圈选一下，可以重点查看某一区域它的一个使用情况，在这个地方凡是有倒立的小三角的地方都是值得我们注意的，这些地方可能意味着它的执行不是很顺畅，比如说在这个地方我们看一下，执行时间是总时间达到了232ms，时间相对是比较长的，然后看一下这个时间，这个我们还可以往下拉一下，为了方便看我们底下的堆栈调用情况，这个地方有一个dealWithListData，这是我们代码里面的一个函数，我们是为了处理数据的，这个地方我们可以看到它的执行时间大概花费了是125ms，如果某个地方它花费的时间特别长的话，可能这个代码是需要我们关注的，我们可能需要优化一下，这就是Performance面板的一个基本的使用，这个代码演示就说到这里。

下面我们看实践二，使用Memory面板分析内存。

内存主要查看有没有内存泄漏的风险，内存泄露它其实并不是指，内存像水一样从计算机里面流走了，是指我们临时数据随着软件的持续运行一直被创建，但是却没有及时地被GC回收，致使我们软件的总内存占用一直飙升这样的一个现象，那么GC它为什么没有及时回收呢，大多数时候主要原因是由于我们代码里面的对象引用不当，不再被使用的对象，它仍然被使用中的对象持有着引用，导致GC没有办法及时释放。

调试区的Memory面板可以查看小程序里面的内存分配情况，这个面板与Chrome浏览器里面的Memory面板，它的使用也是类似的，在启动页面里面有三个收集类型，第一个类型是Heap snapshot这个类型生成内存快照，会显示当前时刻页面上的JS对象和对应的DOM节点，第二个类型是Allocation instrumentation on timeline，这个选项会记录一段时间内的内存快照，并以时间轴的这种形式展现出来，Allocation sampling这是第三个选项，这个选项它是JS Heap采样，它多用于长时间的一个记录，一般这个选项使用的较少。

此外还可以采用Performance面板里面的Memory方式来获取内存信息，Memory面板记录的JS Heap与Performance面板的memory，它模式基本是一致的，但是有一点我们需要注意，就是这个Heap snapshot它记录的是干净的内存，就是这个GC执行以后的这个内存，而Performance面板里面记录的内存它并不一定经过GC过滤了，它可能是脏的 就不太可靠，所以一般查看内存变化，我们第一选择还是Memory面板，这个地方对于第一个类型Heap snapshot 它有四种视图，我们要重点提一下，第一个是Summary，它是显示按这个构造函数名称分组的对象，这种方式对于我们跟踪DOM泄露特别有用，第二个是Comparison，这个是对比视图 显示两个快照之间的一个差异，这个选择它比较有用 用于对比两个内存之间的内存变化情况，第三个是Containment，它允许我们浏览堆的内容，第四个是Statistics这样的一个对比视图，它显示是统计图。

使用Memory面板一般我们主要查看两种情况，第一种是开启，第二个录制类型，也就是时间轴的内存快照录制，观察不断生出来的蓝色条，如果这个蓝色条它随着我们操作的进行不断地新生和变灰，它变灰其实相当于 等于GC回收，这个问题则不大，反过来如果这个蓝色条它只产出 它迟迟不变灰，多半这个地方可能是有问题的，这时候我们就要查看我们刚才这段操作，它主要涉及到的这些程序代码，第二种就是我们在某一个操作的前后选择第一个录制类型，然后生成两个内存快照进行一个快速对比，在对照这个模式之下，我们查看Delta栏的增长的数据情况，正常情况下在多次对比当中，它这个数据类型一般都是有增有减的，如果是它有这个数据类型它只增不减，可能是临时数据它没有得到及时的一个释放，可能是会存在内存问题的。

还有一个更简单的办法，就是我们在启动界面看内存总数的变化，如果内存总数它一直都很稳定，基本也不会有什么问题，大多数情况下在开发过程里面，开发者其实很少去注意具体的内存变化细节，一般都是在软件运行一段时间 卡死了，这个时候才会想起来内存可能是泄露了，下面我们看代码演示。

下面我们看实践二的代码演示。

我们在调试区选择Memory面板重新刷新一下我们的项目，然后单击录制按钮，这个时候我们默认使用是第一个录制的类型是Heap snapshot，这是产生一个内存快照，这个快照它需要加载一段时间，这是一个快照，现在我们在这个页面上进行一些操作。

比如我们将这个列表向上滑动一下，因为我们滑动的过程它会去请求新的分页接口然后去拿到新的数据，它内存按理说它是会变化的，然后我们多让它滑动几次，这个时候我们再单击内存快照的一个录制，我们再操作几下继续向上滑动，向下滑动，然后再单击录制再产生一个内存快照，现在这个数据有了我们选的第二个快照，在这个地方，它视图可以选Summary和Comparison，就是第二个是对比视图，我们选择这个，对比对象我们选择快照1，快照1之后 这个地方它会出来一个Delta栏 变化栏，这个地方我们可以看到Object Array它有增长，大概1500和1100这样的一个样子，我们再选择快照3，同样的一种方式再选择对照的视图，拿它和快照2进行对比，同样我们查看Delta栏，大概增长是在440和810，不是这个 是380和355这样的一个增长，为啥前面增长的多，后面增长的少了，因为我们这个列表我们用了Recycle View对吧，长列表组件它越往下滑，其实增长的是数据，它组件其实并没有明显的增长，我还可以再录制一下，因为我们刚才我们又操作了对不对，再看一下4与3的对比情况，已经加载了我们再选对比视图，然后4与3 然后再看Delta栏大概是500和400，和我们前面的数据其实相差不是特别大，这种情况一般情况下相对是比较正常的，这是一种方式。

接下来我们把这个给它清空一下，我们选择第二个类型，同时这个选项也给它选上，选择以后 然后我们开始Start录制，这个录制它不是取快照，是我们在操作的过程当中，它会随着我们时间的进行不断地进行绘制这个情况，我们可以看到它这个地方会有蓝色的条出现，然后过一段时间它会变灰，变灰其实相当于是被GC然后回收了，一般它如果可以及时变灰的话，说明这一块它问题就不大 没有什么问题，如果说我们这个地方随着我们操作的进行它一直有蓝色条的不断出现，然后一直是蓝色的不变灰，我们这块这个程序可能会有问题，相关这个代码我们就需要重点的去关注一下，我们还可以单击别的页面考察一下它在跳转到其他页面的时候它的情况 都可以，我们想考察这个里边的哪个部分的功能就进行哪方面的一个操作就可以了，同时查看它蓝色条的变化情况就可以了，代码演示我们就说到这里。

最后我们总结一下，这个Performance面板与Memory面板并不是微信小程序专有的，这两个面板在HTML5页面开发里面也经常用到，在谷歌浏览器的开发者工具里面，我们也可以看到这两个面板，微信开发者工具它本质上是一个使用NW.js实现了一个有Web功能页面嵌入的，这样一个跨平台的一个桌面软件， Performance和Memory这两个面板它也是通过内嵌Web浏览器而拥有的，这两个面板是定位CPU执行瓶颈以及内存泄露的得力工具，当我们遇到小程序特别卡顿或者是运行一段时间之后突然异常退出 崩溃等等这样的情况的时候，就可以考虑打开这两个调试面板，这节课我们就讲到这里，上面这个网址是我们本课涉及到的一些文档地址。

点击查看相关文档：

• NW.js
• Analyze runtime performance

这节课我们主要学习了如何使用Performance面板以及Memory面板以辅助定位代码的性能问题，下节课我们学习如何使用JS的Profiler面板以及静态依赖分析工具。

最后我们说一下思考题，这里有一个问题请你思考一下，在小程序的开发过程当中添加或者是删除文件是常有的事情，对于这个项目里面不再使用的文件有什么办法可以快速地找出来并且删除吗，还有某些文件它虽然在其他文件里面，没有直接被使用的痕迹，例如没有直接指向它们链接，但是它们在运行的时候可能会被动态加载和使用，这种情况下我们依赖关系仍然是可以分析到的吗？这个问题先留给你思考一下，下节课我们一起来深入探讨一下这个问题。