你好，我是李毅。

上节课我们主要学习了如何查看小程序助手的性能分析和如何使用实时日志管理器对象上报实时日志。这节课我们主要学习了如何使用小程序后台的自测速功能。

首先我们来看问题，小程序的性能数据不仅可以在小程序助手中查看，还可以通过小程序性能接口和后端网页性能接口直接拉取。如果小程序默认采集的性能数据不能满足产品需求，小程序后端还提供了小程序测速功能，允许开发者在代码中自定义上传的数据格式，在数据传输到微信服务器后，可以通过接口以自定义的方式从微信服务器拉取，并自定义展示。下面看代码实践。

首先我们看实践一，拉取性能数据，高效更新小程序原生组件的视图。

小程序的性能接口是wx.，与其他接口不同，该接口返回一个性能对象，只有创建指定指标的监听器后，才能采集到相关的性能数据。其主要代码见屏幕，相关示例在//目录下。当获取到性能数据，点击按钮后，我们在屏幕上绘制文字。与以往不同的是，这里不再通过数据绑定来完成文字渲染，而是先检查原生组件的节点，然后直接绘制。其主要实现代码见屏幕，这是原生组件的节点直接完成的视图渲染。节点类型为，是原生类型的节点，原生类型的节点在更新视图时，不需要经过逻辑层传递，直接更新视图即可，会绕过重新渲染机制，比传统方法效率更高。缺点是只有部分原生组件支持，界面不太好操作。支持直接查询的原生节点类型有6种，见屏幕。 如果你的产品功能涉及到这些原生节点类型，并且原生节点上有对应的接口来实现需要的功能，那么不妨尝试用它们直接更新视图。项目示例中也用到了系统信息管理器，如截图所示。两种获取设备像素比的方法都可以使用。由于我们已经实现了小程序接口的调用劫持，所以从调用效果和结果上看，两种方法没有本质区别。

以下是练习一的代码演示。

首先我们查看一下我们当前的小程序项目目录下有一个目录，在目录下有一个页面。但是这个页面还没有任何具体实现，是一个空页面。接下来我们看看我们最终的源码是怎么实现的。在我们的源码中，首先我们来看一下js，也就是我们主要的js代码。这个就是我们主要的js代码，我们先把这个代码复制过来，然后放到我们现在的项目中。然后我们再看看它的js文件，里面是没有什么配置的，然后接下来就是它的标签代码，然后放到这儿。最后就是样式的代码，很简单。但是这个基本上没什么用，因为它在我们的标签中实际用不到，所以这个就不用复制了。

接下来我们看一下我们的js文件中主要的实现，首先在最上面我们引入了一个我们之前实现过的系统信息管理器，然后引入它。然后在这个周期函数中，我们可以把这个周期函数的写法换一下，直接用短的方式。在这个里面，首先我们使用wx.这样的接口，创建一个节点查询对象，有了这个对象，我们就可以查询它里面包含的节点在我们当前的页面，我们可以用我们的测试页面首页，然后把它当做首页，然后跳转到我们的面板，当然如果它不跳转的话，我们可以检查一下它自己的页面代码，看看它是不是没有把数据全部写好，这个是可以的。这个是，然后我们点击之后，它做了什么呢？它首先引入了模块，然后使用它的方法，然后page从我们的组件传过来，检查我们组件上的绑定属性，这个就是绑定属性，然后它的page，page是我们它里面的一个字段，我们来看一下它里面的字段。 在我们的数据里面，也就是这个地方，也就是这个本身也是它的名字，也是它的地址，就是它的名字，也是它的地址。但是我们在跳转的时候，还要做一些特殊的处理，让它能够实现跳转，所以我们需要对这个方法进行一点小小的修改。我们看一下我们最终的源代码，在这个地方我们要把这个形式的 URL 写上去，然后把这个替换掉，然后刷新一下，现在就可以跳转了。

我们看一下这个页面里面的js代码是干什么的，首先我们通过对象和它的实例去查询一个原生节点，这个节点有一个id叫，我们可以通过它的页面代码来查看。也就是这里，这个就是它的id。找到原生节点之后，我们同样指定我们要找的数据字段查询，然后执行，执行之后这里会有一个init，然后查询完之后就会去调用它，然后就会去调用它里面的init方法，然后去获取它的宽高信息，然后就是node节点，上下文渲染对象，然后获取到之后这里就会出现上面说的获取屏幕分辨率的方法，这个方法是通过我们已经实现的来间接去使用的，那么下面的方法就是通过小程序的接口直接去获取。 因为下面这个接口已经被我们劫持了，上面和下面的两个方法其实是一样的，没有任何区别，然后拿到之后我们这里计算它的宽高，因为这个地方本质上是跟分辨率有关系的，所以这个地方需要做一个分辨率的转换，转换之后有一个，然后赋值，把我们的引用赋值给我们当前页面的对象。当然我们这里是没有的，其实相当于写了一个。然后这里还有一个，这个就是一个本地的函数，用于重复渲染的，一个匿名函数变量。然后我们这里调用了原生的对象，它有一个函数叫e，是一个帧率的函数，通过这个方法我们要开始一个循环调用，循环渲染。然后我们这里调用了这个，这个就是我们现在在画布上绘制内容的方法，它是一个绘画的方法，首先最上面是清除，就是把我们画布上所有旧的内容都清除掉。然后这里还有两个临时变量，然后还有一个for循环。 这个 for 循环本质上是从我们的列表中获取信息，然后调用画布的上下文渲染对象。此方法绘制文本。这是它的主要代码。

这里我们需要用到的API跟小游戏开发很类似，因为在小游戏中，主视图的更新本质上都是通过一个跟接口相关的接口来实现的。接下来我们来看这个列表，这个列表是怎么来的呢？这个列表就是查询这里的性能数据，这个是通过小程序里面的，它本身就是使用wx.这个接口来获取一个性能对象，这个对象比较特殊，我们首先要监听它，用这个监听指定的信息类型，然后这里给它传递一个回调函数，然后这个数据监听到的话，我们的代码就会执行。我们这里拿到这个数据之后，再把我们的信息往里面push，这个就是我们的数据，就是从这个地方来的。在这个实现方法里面，这里还有一个，那么现在我们可以看一下加载的性能数据。加载的性能数据其实就是从这一行获取的，我们点击btn，看btn点击之后会做什么，这是一个btn吧，它会被触发，然后里面发生的事情其实很简单。 我们手动模拟列表信息的添加，把这些信息塞进去。

当然我们还可以插入一些其他的信息，它只是一个模拟点击按钮，我们可以看到它是不断刷新的，本身渲染是没有阻塞的，为什么呢？因为它并没有采用我们经典的重新渲染的机制去更新view，它采用的是我们view上的一个的节点，我们利用这个节点的接口去绘制这些文字，它是这样实现的，所以它的效率比我们以前用的view更新效率要高一些。最后我们看一下我们的js文件，有两个地方需要注意，一个是我们里面干了什么，首先就是这个，我们调用它的这样一个方法，就是断开监听，这个地方就是取消我们的帧率的回调，取消掉，然后把它设置为null，这是一个清理操作，当我们的页面没有使用的时候，它里面的这些对象就会被清理掉，这个是它主要干的一个事情，到此我们的代码演示就结束了。

我们来看实践二，利用.接口来拉取Web端的性能数据。

小程序的性能数据可以上传到微信服务器，如果在小程序中调用相关性能接口来采集这些数据，有些画蛇添足，再加上小程序本身设备资源紧张，有限的代码包也不适合添加产品以外的功能。除了在小程序中调用接口拉取性能数据外，我们还可以在后端Web直接调用微信提供的性能接口来直接拉取性能数据。要实现这个功能，需要调用两个接口，如截图所示，第一个是拉取接口，第二个是性能数据拉取接口。第一个接口是获取接口调用凭证，在开发者的服务器上，调用微信服务器接口需要先拉取这个，没有这个是无法调用这个接口的。这个步骤在我们的示例源码中已经用Go语言实现了，直接使用即可。第二个接口才是我们真正拉取性能数据的接口，性能数据拉取已经在后端的home.go文件中实现了。 屏幕上显示的是主要的 Go 语言代码。这里有一个地方要特别注意，在实践过程中，我们很有可能会出现屏幕上显示的 data 这样的错误。这个错误是由于后端代码中网络请求头设置不当导致的。我们只需要将请求类型改为 raw 即可，如屏幕上所示。另外，还有开始时间，是秒，而不是毫秒，也不是其他时间单位，所以不能写错。如果以上都顺利的话，基本就可以看到一个正常的数据结果，数据结构就是屏幕上显示的。每个小程序开发者调用时，数据可能略有不同，但数据结构是差不多的。

我们看一下练习2的代码演示。

首先我们看一下接口文档，这里有一个接口，要调用接口的话，我们首先要有这样的信息，那么这些信息从哪里来呢？我们首先要调用另外一个接口，就是接口调用凭证，我们可以从这个地方点进去，然后这个地方是一个auth，这样的一个接口，是专门用来获取服务端接口地址的，在调用的时候，我们会发送一些基本的这样的分钟信息，所以像这种接口，我们一般都是在服务端调用的，目的就是为了得到一个接口调用的凭证，然后根据这个凭证，我们就可以调用微信服务端提供的其他接口，得到这个之后，我们就可以传递一些相关的参数，然后去调用，这里面有一个很重要的参数，就是我们的一些预定义的类型，这里面有一些预定义的类型，其中它代表的是内存索引，每个数字都是不一样的。这两个接口我们已经了解了。

接下来我们看我们最终的实现。首先我们看我们最终的源码在服务端的home.go这个文件里面。在最下面有一个接口叫api，它有一个参数，就是我们刚才说的文档里面获取到的性能数据的类型。我们先把这个接口的实现代码复制过来，然后放到我们当前端，home.go这个文件里面。然后这个文件和这个接口调用的时候，它还会调用另外一个接口调用，这个方法在我们当前的这个文件里面已经有了。它本质上就是访问我们的接口，获取一些分钟信息，然后查询一个，这个里面用到的信息也是通过环境变量去获取的。这两个信息是从哪里来的呢？这个就是我们小程序的分钟信息。我们可以在我们的本地环境变量里面去查看这个文件，也就是在这个地方，它在这里面设置了。这两个信息在哪里可以查看呢？ 在我们小程序的后台，小程序开发的后台，在开发管理里面，然后在开发的设置里面，在这个地方，在这里面进行查看。

这个地方是可以重新设置一下的，重新设置之后我们把这个字符串记下来，然后写入到我们的程序里面，就是关于这个信息的，获取到这个信息之后，接下来我们就可以调用我们的接口了，我们看一下我们的接口的地址，这里还是有一个错误，这里的波浪线表示错误，因为这里我们还有2个原生的模块需要引入，一个是，一个是，这两个是Go语言原生的内置模块，我们到页面最上面，把它们添加到的位置。然后它就开始自动编译了，我们看一下我们的接口地址，准备在浏览器里面测试一下，这个是相对的接口地址。然后打开一个浏览器tab，这个地址然后刷新一下，然后再次刷新一下。然后传入一个进去，得到一些信息。在这里面我们之前提到过，有一个比较重要的信息，这个信息特别容易被忽略，导致异常，其实就是我们的req.，这个属于网络请求的，它的-Type，我们要故意把它设置为raw。 这个方法可以避免我们前面说的错误，如果遇到这个错误，可以设置请求头，避免。同时我们在里面还有一个时间，前面我们提到过，这个时间其实就是秒，如果这个时间设置错误，是不会正常返回的。基本上这两个正确之后，接口就可以正常返回了，我们就可以得到我们想要的性能数据了。到此我们的代码演示就结束了。

接下来我们看做法三，新建一个监控ID，使用后台小程序的测速功能。

最后我们来看看小程序后台的测速功能，这是一个自定义提交埋点数据的功能。首先我们需要登录小程序后台，在开发、开发管理、运维中心、小程序测速页面添加一个监控指标，如屏幕所示。所谓的监控指标其实就是一个个数字，从1000开始向上递增，指标名称是我们自己自定义的，这个名称是给我们看的，在上传数据的时候其实是不会用到的。添加监控指标之后，我们在返回小程序前端代码的时候添加点代码就可以了，主要代码在屏幕中展示。测试代码添加完成后，就可以在微信开发者工具的模拟器中进行测试了，大概15分钟之后，我们就可以在后台看到自己提交的指标数据了。登录小程序后台在测速页面也可以看到该指标上报的次数。

我们看下面的代码演示。

首先我们看一下最终的代码，我们下面是一个.js文件，这里我们有一个演示的代码，大家可以把这个代码复制过来然后回到我们当前的目录下找到相关的文件，这里我们需要找一个合适的位置，这里我们可以演示监控，测试，测速，监控数据的上报。我们可以把下面的代码取消注释掉。首先我们这里得到一个差值，这里还有一个开始的时间，这个时间现在还没有，我们再看一下原来的地方，这个就是开始的时间。然后定义一下，当调用上面这个方法的时候，得到这样一个时间。然后我们在这里计算一个差值，它就是我们的数据拉取，从开始拉取到最后拉取成功所需要的时间。然后这里会有一个接口的安全测试，如果能用到这个接口，我们就会用到这个接口，并且把数据上报。1001就是我们在后台定义好的监控ID，ms就是我们要上传的数据，这个代码已经写好了，接下来我们看一下我们的后台。 登录小程序管理后台

在左侧导航栏中，找到开发，开发管理，在开发管理下，我们找到运维中心。下面有一个小程序测速。在这个页面的下方，有一个管理监控指标。在这里我们可以点击新建，创建一个新的测速类型。然后这里我们有一个之前创建的监控ID是1001。它的描述就是拉取首页数据所花费的时间。就这样。然后我们就可以测试我们的代码了。我们点击编译按钮，就可以测试相关的代码了。这里有一个拉取首页数据的监控上传时间。这是我们监控的一个数据。数据上报之后，当我们打开我们的小程序后台的时候，在小程序测速页面就可以看到我们上传的数据了。但是请注意，这里有一个延迟，大概是15分钟，所以即时上报的数据不能及时看到。下面还有一个统计数据，对于我们的每一个指标，它被上报的次数，所在的地区，都是统计出来的。这个就是这个页面的主要功能。 我们这里就讲一下代码演示。

我们来看一下总结，在小程序中，通过wx.相关接口采集性能数据是不推荐的，因为会跟小程序争抢有限的设备资源，至少在生产环境不建议使用，在研发环境只能用来测试。如果对性能数据的需求不高，直接用小程序助手的性能分析就可以了。如果对定制化性能数据的需求比较高，可以在小程序后台定制创建相关测速指标，在Web后台通过小程序性能接口自己拉取性能数据，然后按照自己定制化的方式呈现。

点击查看打开的文档：

这节课就讲到这里，上面的URL就是这节课涉及的文档地址。

这节课我们主要学习了如何通过接口获取小程序的性能数据，到此为止，课程的主要内容已经讲完了，下一节课是小结，会把这节课讲到的性能优化技巧全部总结一下。