[视频] 你好，我是李艺。 上节课我们主要学习了有关setData调用相关的优化技巧，这节课我们学习网络请求相关的优化技巧。 首先我们看一下问题，针对网络请求的优化主要有以下三个方面： 一、减少不必要的网络请求，使用本地缓存的数据代替从后端接口拉取的数据 二、优化网络请求参数，提高网络请求的通讯效率 三、优化网络请求的并发数，让优先级高的请求先执行 其中第二项在第6.8讲我们已经讲过了，这节课我们重点看一三两项的优化，下面看项目实践 。 首先看实践一：在本地缓存数据。 在首页的JS文件里边有加载小程序导航数据的代码，我们可以在这里尝试使用本地缓存技术，如我们屏幕上看到的截图，首先从本地缓存中尝试取出缓存数据，如果取到了就先用上，然后向后端发起网络请求，拿到最新的导航数据以后再调用setData重新设置一下数据，并把本地数据也刷新一遍，避免本地缓存过时，运行以后如我们屏幕上看到的，在调试区的Storage面板里边可以看到本地缓存的导航数据，但是这个实现方案是有瑕疵的，有什么瑕疵，先从本地缓存，再从后端接口请求。这是一个顺序的并发过程，实际上这个过程还可以再优化一下，改用并发复合命令，让两个异步操作同时并行。或者我们更简单一些，改成两个异步函数，同时开始执行也可以，优化就不做演示了。留给你自己实践一下。 下面我们进行实践一的代码演示。 首先我们看一下我们最终实现的一个源码，找到主页的JS文件，在这个地方，我们有一个从主页中，从后端加载导航列表这样的一段代码。这段代码它的主要的一个作用，在这个地方。从这个地方开始，它的主要的一个作用就是从接口去拉取导航数据。拉取完成以后，然后我们再去设置我们的data数据对象里面的navs，这样的一个列表，同时设置完以后，我们还需要将我们本地缓存里边的这个navs这个列表然后进行一个更新。由于缓存里面它存储的是字符串，所以这个地方我们要拿json方法，进行序列化，更新一下。 在前面我们是先向本地，通过getStorage这个方法，然后去取了一下本地缓存的数据。当然这个地方有可能会取不到，所以我们会首先做一个判断。如果能取到的话，我们就将它进行设置，同时在设置之前我们还需要拿JSON.parse，然后进行一个解析。因为我们取到的数据它是一个字符串的数据，这就是我们主要的代码。首先我们将这部分代码给它拷贝一下，来到我们的小程序项目里面，找到我们首页的js文件，然后在这个里面我们先搜索一下。搜索navs 在这个位置，这是我们现有的代码，它一上就是从后端进行下载，我们添加一个从本地获取数据这样的一个代码，同时在这个地方这个代码已经有了，所以我们不需要再添加了。本质上在之前这个代码其实它是不需要的，因为我们如果前边没有消费代码的话，我们在这个地方去设置本地数据，它本质上它也是无用的。现在这个代码我们已经设置完了，单击编译按钮，然后进行测试，注意看我们的导航区。当然我们编译模式现在可以改一下了，改成我们的普通编译模式，注意看一下我们的调试区，这里面有一个已取到缓存的导航数据，这个代码是在这一行打印的。然后在下面还有一个也取到了后端的导航数据，这行代码是在这个地方打印的。也就是说我们这个代码它首先会从本地，然后取到缓存的数据，然后并且马上启用，同时它接着又向后端发起接口的请求，然后再获取数据，同时将本地的缓存的数据然后进行一个刷新。下面再看在我们这个调试区它有一个面板，一我们本地的这个Storage面板，这个里面navs这就是我们本地缓存的数据，这个代码演示我们就到这里。 下面我们看实践二。 打破网络请求的10个并发限制，并按优先级排序。由wx.request接口发出的网络请求，有最大10个的并发限制。为了破除这个限制，同时让高优先级的网络请求操作先执行，我们可以进一步改造我们的request工具函数，改造以后这个函数的代码如我们屏幕上显示的。首先我们引入了一个自带优先级的异步队列，叫做priority-async-queue。这个模块需要使用yarn或者npm安装，安装指令如屏幕上所示。安装以后在工具菜单栏，别忘记选择构建npm进行模块代码的构建。在使用自定义的request方法的时候，针对重要的网络请求只需要添加一个值等于urgent的一个priority参数即可，如我们屏幕上显示的这样。感觉是不是很简单。调用方法及其他参数都不需要修改，这是接口迭代进化中的向后兼容性，可以最大程度的保证旧代码在项目迭代中的一个持续使用，运行效果与之前一样。在网络环境顺畅的情况下基本上是无感知的。 下面我们看代码演示。 查看package.json这个文件，在这个文件里面我们可以看到多了一个模块的引用，这个模块叫做priority-async-queue，我们将这个给它复制一下，模块名给它复制一下，后面的版本是2.1.1，如果为了保证这个版本一致，稍后我们在安装的时候还可以将这个版本号给它加上。拷贝以后我们需要打开一个本地的终端窗口，终端窗口我们可以在VSCode里面操作，当然也可以在我们的微信小程序里面也是可以的。在我们miniprogram上面选择内建终端打开，选择以后这个地方我们使用yarn add，然后将我们刚才那个名字给它拷贝一下，还可以附带我们的版本号。添加，很快它就已经装上了。装上以后我们还可以顺带看一下这个目录下的package.json文件，确认一下 这个地方已经有这个模块了，这是第一步。第二步就是改造我们的request方法，目前我们request方法它是不支持优先级的，我们需要对它进行一个改造，打开我们已经修改好的代码，首先在最上面有一个对我们这个模块新安装模块的一个引入，同时下面有一个queue对象的创建，这个数字代表是我们最大允许的一个并发数字默认等于10。当然我们也可以传一个其他的数字都是可以的，然后将这个代码放在文件的最上面，再往下这个地方有一个关于优先级的定义，包括这个地方，它有一个导出，这个代码我们都需要拷贝过来，然后放在这里这些参数，还有这些参数其实都不需要修改，然后这个地方有一个关于默认的优先级的设置，如果它没有优先级的话我们就给它一个normal的这样的优先级。再往下在这个里边重点的代码在这个地方有一个queue.addTask，同时将priority优先级也给它传进去，后面是一个箭头函数，这个箭头函数它代表的是一个匿名的一个闭包。我们可以将这个代码给它拷贝一下，然后放在这个里面可以对比一下我们上下，它这个代码的一个区别。其实等于是我们将原来的代码，也就是这个代码放在了它的里边，同时将用addTask方法对它进行了一个封装。封装以后我们原来这个代码它是作为，然后由闭包函数然后封装一下，然后作为第二个参数，然后传进来的，是这样的一个改造方式，这样就可以了。 现在我们需要对我们原有的代码做一个改造。我们目前有一个是拉取首页数据的这样的一个代码我们修改一下它的优先级，在这个文件里面retrieve_home_data.js，然后这个里边，有对request的方法的一个调用，在这个地方，有一个调用，然后我们要在原来的这个位置，原来它是有一个url参数，我们再加另外的一个参数，就是priority，然后它的值我们让它等于urgent，等于这个，确认一下priority。这是一个priority，让它等一个urgent代表是最高的一个优先级，这样修改就可以了。修改完成以后我们单击编译按钮，然后进行测试，这个地方出现了一个错误。在调试区，大意是说module，然后这个module is not defined没有定义。这个模块没有定义，为啥没有定义，为什么没有定义？因为我们在本地刚才安装了第三方的模块以后我们没有选择，我们没有在这个菜单里面选择工具构建npm。这一步很重要，只有构建以后，我们新添加的模块它才会从我们的目录下面小程序这个目录下面有一个是node modules，从这个目录下面然后再转到我们的这个npm，就转到这个miniprogram_npm 转到这个目录下，转到这个目录下以后，然后我们才可以去加载和使用priority-async-queue这样的一个模块。现在这个目录下它已经有了，说明我们现在可以访问了，我们再次单击编译进行测试。现在代码错误已经不存在了，然后我们再看数据的表现，数据仍然可以加载，也没有问题，这个代码演示就到这里。 下面我们看一下小结，关于本地缓存接口，前面我们已经介绍过了，它们都是同步接口，即使像wx.setStorage、wx.getStorage这样不以Sync结尾的接口，由于某种历史原因，它们也是同步接口。那么至少目前是这样的，以后可能会修改，所以在使用这些接口的时候，我们一定要特别注意使用的时机，最好在Page.onReady周期函数中，或者是在之后的时机使用本地缓存接口，使用本地缓存。另外一个特别需要注意的点是一定要时刻铭记，本地缓存的数据是不可靠的，本地数据有可能因为各种原因缺失或者损坏。使用本地缓存的数据，但不能依赖本地数据。当获取本地缓存数据失败的时候一定要有后端接口可以顶上，或者是其他的方式可以顶上。对于小程序里边的wx.request接口可以管控起来，不仅因为网络请求在低版本的基础库版本中有最大10个并发限制，还处于优先级排序的需求，以及有可能存在的页面访问的权限控制要求。在实际的项目开发里面，某些后端接口是一定要用户实现鉴权以后才允许访问的。这类统一的鉴权访问控制就适合在request工具函数中统一实现，这部分内容不属于优化内容，但是对项目来说也十分必要，如果需要拓展的话都可以在request.js文件的基础之上然后进行修改。 点击查看相关文档： 数据缓存 /wx.setStoragepriority-async-queue这节课就讲到这里，上面的网址是本课涉及的文档地址。 这节课我们主要学习了如何使用本地缓存数据，即如何使用优先级队列优化网络请求。下节课我们学习图片优化技巧。 最后我们看一下思考题。这里有个问题请你思考一下，webp是Google在2010年推出的一种新的图片格式，它使用更优的图片压缩算法在相同的图片质量下能让图片保持更小的图片体积，Youtube的视频缩略图采用webp格式以后网络加载速度提升了10%左右，Google的Chrome网上应用商店采用webp的格式以后每天大概节省了几TB的一个带宽，现在小程序中的image组件也开始支持使用webp格式的图片了，但一般我们在团队开发中使用的图片多半是png，或者是jpg这样的格式，那么有什么办法可以快速将这些图片转化为webp格式，并且在小程序项目里边使用。下节课我们就一起来深入探讨一下这个问题。