你好，我是李艺。
上节课我们主要学习了查看小程序助手的性能分析，及如何使用实时日志管理器对象进行实时日志的上报。这节课我们主要学习如何使用小程序后台的自主测速功能。
首先看一下问题，小程序的性能数据不仅可以在小程序助手里面查看还可以通过小程序性能接口及后端Web端性能接口直接拉取。如果小程序默认收集的性能数据不能满足产品需求的话，小程序后台还提供了允许开发者自定义的小程序测速功能，允许开发者在代码中自定义上传的数据格式，待数据传送到微信服务器以后还可以通过接口从微信服务器以自定义的方式拉取出来并自定义显示。下面我们看代码实践。
首先看实践一，在小程序里边拉取性能数据与原生组件的高效视图更新。
小程序的性能接口是wx.getPerformance接口，它不像其他接口那样。该接口返回的是一个性能对象，在创建了对指定指标的监听以后才可以收取到相关的性能数据，其主要代码如屏幕上所示。相关示例位于examples/pages/performance目录下面。当取到性能数据及按钮单击的时候，我们在屏幕上绘制了文本，与以前不同的是文本的渲染不是通过数据绑定完成的，而是先查取原生组件的node节点，然后直接进行绘制的，其主要的实现代码如屏幕上所示。这是通过原生组件的Context节点直接完成的视图渲染。node的类型是CanvasContext，它是原生类型的节点。原生类型的节点在更新视图的时候，它不需要经过逻辑层的中转，可以直接更新视图，这会绕过重渲染机制，比传统方式效率会更高。缺点是只有部分原生组件支持，并且接口不是很容易操作，支持直接查询的原生节点类型，如屏幕上所示，一共有这6种类型。如果你的产品功能中涉及到这些原生节点类型，并且原生节点上也有相应的接口可以实现所需的功能，那就不妨试一下用它们直接更新视图，项目示例中还用到了系统信息管理器，如屏幕上所示。这两种获取设备像素比的方式都可以使用，由于在SystemInfoManager里面我们已经实现了对小程序接口的调用劫持，所以这两种方式在调用效果上，及结果上并没有本质的区别。
下面进行实践一的代码演示。
首先我们查看一下在我们当前的小程序项目目录下面有一个examples目录，它的下面有一个叫做performance一个页面。但是这个页面目前还没有任何的一个具体的实现下，它是一个空页面，接下来我们看一下我们最终的源码是怎么实现的。在我们这个源码里面首先我们看一下js，这是我们的主要的一个js代码，在这个地方这是我们主要的js代码。我们先将这个代码给它拷贝一下，然后放到我们的当前的项目里面，然后我们再看一下它的js文件没有任何的一个配置，然后接下来是它的标签代码，然后放在这里，最后是样式代码很简单。但是这个基本上是无用的，因为在我们标签里面其实没有用到，所以这个也不需要拷贝。
下面我们就看一下我们js文件它里边主要的一个实现。首先最上面这个地方，我们是引入了我们之前已经实现的一个系统信息管理器，然后引入了它，然后在onLoad这个周期函数里面，这个周期函数我们可以改一下写法，直接用简短的这样的一种方式。在这个里边首先是我们用wx.createSelectorQuery这样的一个接口，创建了节点查询对象，用这个对象我们可以查询我们当前这个页面上它所包含的节点。我们可以用我们的测试页面主页，然后以它作为主页，然后再跳转到我们performance面板，当然它没有跳转的话，我们可以检查一下它本身的页面代码，它是不是数据没有写全，这个是有可能的。这是performance，然后我们单击以后，它干了一个什么事情，它是先去引入router模块，然后用了它的navigateTo方法，然后page是从我们的组件上进行传过来的，来查一下我们组件上的绑定的属性。这是绑定的属性，然后里面它的page，page是我们的一个它里面的一个pages里面的字段。它里面字段我们看一下，在我们这个数据里边，也就是这个地方，也就这个本身也是它的名称，也是它的一个地址，是它的名称也是它的一个地址。但是在跳转的时候我们要做一些特别的处理，然后它才可以实现跳转，所以这个方法我们需要一个小小的修改，那么看一下我们最终的源码，在这个地方url我们要写成这样的一种形式，然后把这个给它替掉，然后再刷新一下，现在就可以跳转进来了 。
我们再看一下这个页面里面的js代码主要做了一个什么事情。首先这个地方我们通过SelectorQuery对象，它的实例去查询一个原生节点，这个节点它有一个id叫做canvas，这个id我们可以通过它的这个页面代码可以查看。也就是在这个地方，这是它的id。查到原生节点以后，然后这个地方我们还指定了我们查询的数据字段查询，然后执行。执行以后这个地方会有一个init，然后它查询以后它会去调用，然后我们的这个里边它会调用init方法，然后去取它的宽高信息，然后node节点，上下文渲染对象，然后取到以后在这个地方出现了我们刚才提到的获取屏幕分辨率的方法。这种方式是通过我们已经实现的systemInfoManager，然后间接去取用的。然后下面这种方式是直接通过小程序的接口，然后直接去获取的。因为下面这个接口已经被我们劫持了，所以上下这两种方式其实是一样的，没有差别他，然后取到以后这个地方我们去算它canvas的一个宽与高，因为它这个地方本质上是与分辨率是有关系的，所以这个地方要做一个它分辨率做一个转化，转化以后这个地方有一个scale，然后赋值，将我们引用赋值到我们当前页面的对象上。当然我们这个地方没有，其实它相当于是一个写入，然后这个地方有一个renderLoop，这是一个重复渲染的本地的一个函数，匿名函数变量renderLoop，然后这个地方我们调用了canvas原生对象，它上面有一个叫做requestAnimationFrame，属于帧频函数。通过这个方法我们要启动一个循环调用，循环渲染，然后这个地方我们调用了this.render，this.render是我们当前要在画布上，然后进行绘画内容的方法，实现绘画的一个方法。首先最上面是清扫，将我们画布上所有的旧内容进行清扫，然后接下来有两个临时变量，然后有一个for循环，这个for循环本质上是从我们entries这个列表里边去取它里面的信息，取到以后，然后调我们画布的上下文渲染对象里边的一个fillText，这个方法进行文本的一个绘制，这是它主要的一个代码。
在这个地方我们所需要用到的API，已经跟小游戏开发已经很类似的，因为在小游戏里面本质上主要的视图更新，通过画布的一个接口相关的接口进行实现的，接下来我们再看entries这个列表。这个列表是怎么来的，这个列表是在这个地方查询性能数据，这个是我们通过小程序内部，它本身我们通过wx.getPerformance接口，然后取到一个性能对象，这个对象它比较特殊。我们首先要去监听，拿这个observer去监听指定的信息类型，然后在这个地方还要给它传一个回调函数进去，然后如果监听到这些数据的时候，我们这个代码它就会被执行了。在这个地方我们拿到这些数据以后，然后就向entries里面去推送我们这个信息了，这是我们这个数据，它是从这个地方来的。这样的实现方式，这个地方还有一个打印，所以现在我们可以看一眼加载到的性能数据，加载的性能数据它其实是从这一行开始然后取到的，我们单击btn，我们看一下btn在单击的时候它干了一个什么事情。这是btn对不对，它会触发onTap，然后onTap里面干了什么事情，其实很简单，我们是手动模拟了entries列表的信息的一个增加，把这样的一个信息给它塞了进去。
当然了我们也可以塞其他的一些信息，它只是一个模拟单击按钮，我们可以看到上面canvas不停地在进行一个刷新，并且渲染它本身是没有任何阻塞的。为什么，因为它本身它不是通过我们经典的重渲染机制，然后进行视图更新的。它是通过本身我们这个视图上面就有一个canvas这样的原生节点，我们通过这个原生节点它本身的接口去实现这些文本的一个绘制的，是这样的一种方式去实现的，所以它效率它比我们之前以往所用的视图更新的效率都要高一些，最后再看一下我们js文件里面，有两个地方我们需要注意一下，一个是onUnload，在这个里面我们做了什么事情。首先是这个地方this.observer，我们调用了它的disconnect observer.disconnect这样的一个断开连接的方法，就是断开监听。这个地方是canvas要取消我们的帧频的这样一个回调，把这个取消掉，然后把这个canvas给它设为null，这是一个清理的操作，在我们这个页面不使用的时候将里边的这些对象做一个清理，这是它的一个主要的要做的一个事情。我们这个代码演示就说到这里。
下面看实践二，通过analysis.getPerformanceData接口，在Web端拉取性能数据。
小程序的性能数据本来就可以上传至微信服务器，如果再在小程序中调用相关的性能接口收集这些数据，多少有些画蛇添足，并且小程序本身设备资源紧张，有限的代码包实在不适合添加产品以外的功能，除了在小程序中调用接口拉取性能数据以外，在后台Web端我们还可以直接调用微信提供的HTTPS性能接口，直接拉取性能数据。要实现这个功能需要涉及调用两个接口，如屏幕上所示。第一个是拉取token的接口，第二个是性能数据拉取接口，第一个接口是获取接口调用凭证的，在开发者的服务器上，调用微信服务器的接口都需要先拉取这个token，没有它，这个接口是调用不了的。这一步在我们这个示例源码里面已经使用Go语言，已经实现了，直接使用就可以了。第二个接口才是我们真正拉取性能数据的接口，在后端的home.go这个文件里面已经实现了性能数据拉取。主要的Go语言代码如屏幕上所示，在这里有一点我们值得特别注意，就是在实践过程中，我们非常容易出现一个叫做47001的错误data format error如屏幕上所示，这个错误的产生是由于后台代码里边网络请求头设置不当引起的。我们只需要将请求类型改为raw就可以了，如屏幕上所示。此外还有起始时间，它的单位是秒，不是毫秒，也不是其他的时间单位，不能写错。如果以上一些顺利的话，基本上就可以看到一个正常的数据结果了，数据结构如屏幕上所示。每个小程序的开发者在调用的时候，这个数据可能会不大一样，但是这个数据结构是类似的，
下面看实践二的代码演示。
首先我们看一下接口文档在这个地方有一个analysis.getPerformanceData接口，在这个里边接口的调用我们需要先有一个ACCESS_TOKEN这样的一个信息，这个信息从哪里来，需要先调用另外的一个接口，就是接口调用凭证。从这个地方我们可以单击进来，然后这个地方，它是一个auth.getAccessToken这样的一个接口，它专门是获取token的服务器端接口地址，然后调用它的时候我们会传送一些基本的像appid和secret这样的基本的纪要信息，所以像这个接口一般我们是在服务器端进行调用的。目的就是拿到一个接口调用的一个凭证，然后基于这个凭证，我们才可以调用微信服务器上提供的其他的一些接口，这个拿到以后，然后接下来我们就可以传递相关的一些参数，然后进行调用了，在这个里面有一个很重要的参数就是module，这个module它是我们预定义的一些类型，在这个地方有些预定义类型。其中像10022它代表的是内存指标，每个数字都不一样，这是这两个接口已经了解完毕。
下面我们看我们最终的一个实现，首先看一下我们最终的源码在服务器端的home.go这个文件里面，在最下面这个地方server controllers api，然后home.go 这个地方最下面有一个接口叫做GetPerformanceBy这样的一个接口，它有一个参数是module，module就是我们刚才提到的文档里面的我们所获取的性能数据的它的一个类型，我们先将接口的一个实现代码给它拷贝一下，然后放在我们当前的server端，sever端home.go，放在这个文件里面，然后这个文件这个接口它本身在被调用的时候，它还会调用另外的一个接口叫做getAccessToken，这个方法在我们当前这个文件里面已经有了，它本质上是访问我们这个接口然后拿一些纪要信息，然后去查询到一个token，这个里面用到的APPID和APPSECRET，这些信息是在这个地方，它也是通过环境变量然后去取到的这些信息，这俩信息是从哪里来的。这是我们小程序的纪要信息，这个文件我们可以在我们的本地环境变量里面可以查看，也就是在这个地方，是在这里设置的。这两个信息从哪里查看，在我们小程序后台，小程序开发后台，开发管理里边，然后开发设置，在这个地方AppID，AppSecret是在这个地方查看的。这个地方是可以重置，重置以后我们把字符串给它记下来，然后记下来写到我们程序里面就可以了。这是关于这个信息，然后这个信息有了以后，接下来我们就可以调用我们这个接口了，我们看一下我们接口的一个地址，这个地方还有错误，它这个地方有波浪线代表有错误，因为我们这个地方还有两个原生的模块需要引入一个是strings，还有另外的一个bytes，那么这两个都是Go语言的原生内置模块。我们到页面的顶部，在引入的位置加上对它们引入，可以了。然后这个地方它开始自动编译了，下面我们看一下我们这个接口地址，准备在浏览器里面进行测试，这是相对接口地址，然后打开一个浏览器标签，这个地址然后刷新，然后再刷新一下，可以了。然后传入一个module，然后得到一些信息，在这个里边我们之前提到了有一个比较重要的信息，特别容易忽视导致异常的。其实我们req.Header，这个里面它属于是网络请求头，它的Content-Type，我们要把它有意设置为raw这样的一种方式。这种方式可以避免我们前面所提到的是47001这样的一种错误。如果你遇到这个错误的话，你就把这个请求头给它设置一下，然后就可以避免了。同时我们这个里边它还有一个是关于这个时间就是这个时间我们前面提到了它其实是秒，然后这个时间如果设置不对的话，它这个也不会正常的返回，基本上这两个对了以后接口就可以正常返回了，就可以取到我们想要的性能数据了，代码演示我们就到这里。
下面我们看实践三，新建监控ID，使用后台的小程序测速功能。
最后我们看一下小程序后台的测速功能，这是一个自定义提交埋点数据的功能，首先我们要登录小程序后台，在开发，开发管理，运维中心，小程序测速页面里边添加一个监控指标，如屏幕上所示。所谓的监控指标其实是一个数字有，它从1000开始向上递增，指标名称是我们自己自定义的，这个名称是给我们自己看的。在数据上传的时候其实并不会用到，添加监控指标以后，回到小程序前端代码里面，我们就可以添加打点代码了，主要代码如屏幕上所示。测试代码添加以后，在微信开发者工具的模拟器中就可以进行测试了，大概15分钟以后，在后台就可以看到我们自己提交的指标数据了。登录小程序后台，在测速页面中还可以看到指标上报的次数。
下面我们看代码演示。
首先我们看一下最终实现的代码。在我们library services下面有一个retrieve_home_data.js，在这个地方我们有一个关于演示代码的，关于一段演示代码，可以将这个代码可以给它拷贝一下，然后回到我们当前的实战的一个目录下面找到相关的文件。这里，然后在这里我们需要找一个合适的位置，这个地方，演示监控，测试，测速。监控数据上报，把下面这些代码我们可以反注释一下，这个地方首先我们是得到了一个差值。这里还有一个fetchStartingTime，起始的一个时间，这个时间现在还没有，我们在原来这个地方再看一眼，这个是在这个地方开始的时候，然后把它给定义，最上面这个方法被调用的时候，然后去拿到这样一个时间，然后这个地方我们去计算一个差值，它本身是我们这个数据拉取。在开始拉取到最终成功拉取所需要的一个时间，然后这个地方会有一个关于接口的安全测试，如果我们能使用这个接口的话，我们就用reportPerformance接口，然后进行数据上报，1001是我们在后台已经定义好的监控ID，ms是我们要上传数据，这个代码就已经写好了，然后接下来我们再看一下，我们后台里边，登录小程序管理后台
在左边导航栏里面找到开发，开发管理，开发管理下面我们找到运维中心，下面有一个小程序测速，在这个页面的最下面有一个管理监控指标，这个地方我们可以单击新建去创建一个新的测速类型，然后这个地方我们有一个，之前已经创建的，监控ID是1001。它的描述是首页数据拉取耗时，这样就可以了。然后我们就可以测试我们的代码，我们单击编译按钮进行相关代码的一个测试，这个地方有一个监控上传拉取首页数据耗时510ms，这是我们监控的一个数据。数据上报以后，在我们打开我们小程序后端，在小程序测速页面我们就可以看到我们上传的数据了。但是注意一点，这个地方它有延迟，大概有15分钟的一个延迟，所以马上上报的数据并不能及时看到。下面它还有一个统计，关于我们每一个指标，它被上报的一个次数，以及所在的地区都是有统计的，这是这个页面它的主要的一个功能，代码演示我们就说到这里。
下面看一下小结，在小程序里边通过wx.getPerformance相关接口收集性能数据，这种方式因为会跟小程序竞争有限的设备资源，所以不被提倡，至少不建议在生产环境里边使用，只能在研发环境里面做测试使用。如果对性能数据的需求不高，直接使用小程序助手的性能分析就已经足够了。如果对性能数据的自定义需求比较高的话，可以在小程序后台自定义创建相关的测速指标，在Web后台通过小程序性能接口自行拉取性能数据，然后以自己自定义的方式进行呈现。
点击查看开放文档：
这节课我们就讲到这里，上面这些网址是本课涉及的文档地址。
这节课我们主要学习了如何通过接口获取小程序的性能数据，到现在为止课程的主要内容已经讲完了。下节课是总结，从整体上概括一下这个课程讲到的所有性能优化技巧。
-运维中心页面已经变了，新版没找到小程序测速