微信小程序开发04性能优化：借助微信开发者工具提升小程序性能

你好&＃xff0c;我是周俊鹏。

前几节课我们分别从架构层&＃xff08;双线程模型&＃xff09;、链路层&＃xff08;授权模型&＃xff09;、和应用层&＃xff08;自定义组件&＃xff09;三个角度学习了小程序的技术要点。它们能帮你完成一个微信小程序的基本业务逻辑和交互逻辑。

逻辑的第一诉求必然是支撑功能&＃xff0c;对于端侧应用来说&＃xff0c;功能是一方面&＃xff0c;功能之外的用户体验也至关重要&＃xff0c;良好的体验能加强用户对于应用的认同甚至依赖。小程序作为一种端侧应用&＃xff0c;与其他应用端&＃xff08; Web/App &＃xff09;一样需要关注用户体验。用户体验有两个核心的要素&＃xff1a;一是设计&＃xff1b;二是性能。作为技术研发&＃xff0c;我们关注的重点在于如何提升小程序的性能。

在我看来&＃xff0c;掌握底层的技术原理能帮我们写出性能更好的代码&＃xff0c;不过理论在转化为实践时往往不是非常直观&＃xff0c;所以在掌握理论的同时学会利用工具更为重要。

今天我就结合微信开发者工具&＃xff08;简称微信 IDE&＃xff09;提供的小程序评分功能&＃xff0c;来讲解一款高性能小程序背后的优化技巧。

微信 IDE 的小程序评分功能位于调试器-> Audits 面板中&＃xff1a;

点击“运行”之后&＃xff0c;微信 IDE 会对当前的小程序项目进行评测&＃xff08;包括代码层面的检测、通过记录用户交互行为的体验检测&＃xff09;。最终从性能、体验和最佳实践三个维度分别打分以及综合分&＃xff1a;

• 性能评分是通过对页面渲染、网络、JS 脚本等方面的评估综合得来的&＃xff1b;

• 体验评分是从设计和交互等方面的评估而来&＃xff0c;由于设计和交互存在一定的主观因素&＃xff0c;所以体验的评分权当建议&＃xff1b;

• 最佳实践涉及的方面更宽泛&＃xff0c;除了代码编写方面的建议&＃xff08;比如 01 讲我们提到尽量减少或聚合 setData 的调用&＃xff09;&＃xff0c;还有安全&＃xff08;比如尽量使用 HTTPS 增强安全性&＃xff09;和用户体验&＃xff08;比如适配不同宽度的屏幕&＃xff09;方面的建议。

除了性能评分外&＃xff0c;微信 IDE 给出的最佳实践方案中也有一部分与性能相关。接下来我就提取所有和性能相关的部分&＃xff0c;剖分小程序性能优化的一些具体措施&＃xff08;用户体验跟这节课无关&＃xff0c;我就不讲了&＃xff09;。

小程序性能优化的具体维度

微信 IDE 对小程序性能进行评分有以下几个维度&＃xff08;微信 IDE 的截图比较大&＃xff0c;字体也比较小&＃xff0c;所以我就不放截图了&＃xff09;&＃xff1a;

1. 避免过大的 WXML 节点数目

2. 避免执行脚本的耗时过长的情况

3. 避免首屏时间太长的情况

4. 避免渲染界面的耗时过长的情况

5. 对网络请求做必要的缓存以避免多余的请求

6. 所有请求的耗时不应太久

7. 避免 setData 的调用过于频繁

8. 避免 setData 的数据过大

9. 避免短时间内发起太多的图片请求

10. 避免短时间内发起太多的请求

其实这 10 个性能的评分标准并不仅仅适用于微信小程序&＃xff0c;有几条&＃xff08;2~6、9和10&＃xff09;是前端开发领域的通用性能指标&＃xff0c;而且如果你用过 Vue/React 之类的MVVM 框架&＃xff0c;以上指标可以全部应用到基于 Vue/React 框架开发的 Web 应用程序中。接下来我们一条条地剖析这几个指标对于性能优化的意义以及对应的解决方案。

当然了&＃xff0c;有些条目的优化方向是一致的&＃xff08;比如 7 和 8 是为了提高渲染性能&＃xff09;&＃xff0c;在剖析过程中我们会进行必要的聚合&＃xff0c;这样更利于从全局的角度了解这些性能评分标准之间的关联。

避免过大的 WXML 节点数目

WXML 是基于 HTML 的一种 DSL&＃xff08;Domain Specific Language&＃xff0c;领域专属语言&＃xff09;&＃xff0c;除了原生组件&＃xff08;比如 Camera 相机组件&＃xff09;以外&＃xff0c;常规组件最终会被小程序的渲染线程&＃xff08;还记得 01 讲的渲染线程是什么吗&＃xff1f;不记得的话要及时复习。&＃xff09;通过 WebView 渲染为 HTML &＃xff0c;所以从性能优化的角度上&＃xff0c;HTML 的大部分性能优化方案均适用于 WXML&＃xff0c;尽量减少节点数目就是方案之一。

节点数目会影响渲染性能&＃xff0c;要理解这句话&＃xff0c;你要对浏览器的渲染流程有大概了解&＃xff0c;来看下面这张图&＃xff1a;

HTML 是 XML 的变体&＃xff0c;在渲染的时候首先会被浏览器内核解析为 DOM 树&＃xff0c;这是一种树形结构&＃xff0c;然后会解析每个节点标签的类型、属性等要素&＃xff0c;最后与 Javascript 脚本和 CSS 结合起来进而在经过布局和绘制完成整个渲染流程。

理论上 HTML 的节点数目和深度是没有限制的&＃xff0c;但是从浏览器的渲染流程中不难看出&＃xff0c;DOM 树的结构越复杂&＃xff0c;渲染的管线就会越慢。我们再回想一下 01 讲的内容&＃xff0c;当渲染线程执行的同时&＃xff0c;逻辑线程是被阻塞的&＃xff0c;也就是说如果渲染线程长时间占用了队列&＃xff0c;这期间浏览器处于无法响应用户交互行为的“假死”状态&＃xff0c;这对于用户体验是致命的。

降低节点数目对于性能优化的另外一个原因&＃xff0c;是与小程序 /Vue/React 这种 MVVM 框架的 DOM更新机制有关。这类框架在更新 UI 时不直接操作 DOM &＃xff0c;而是使用 VDOM&＃xff08; Virtual DOM&＃xff0c;虚拟 DOM &＃xff09;技术来实现&＃xff0c;VDOM 的高性能来源于高效的 Diff 算法&＃xff0c;在内存中对 VDOM 树结构进行对比后提取差异点再映射到真实 DOM 中。

而你不用关注 Diff 算法的细节&＃xff0c;只需要知道它是基于树这种数据结构进行的&＃xff0c;而树结构的复杂度会直接影响算法的执行耗时。所以如果你的小程序节点数目过多或者层次太深&＃xff0c;那么在调用setData 更新 UI 时就会给 CPU 和内存过多的压力&＃xff0c;进而可能造成小程序的假死。

避免执行脚本的耗时过长

执行脚本的耗时过长对于性能的不良影响主要体现在两个时期&＃xff1a;

• 第一是在小程序加载完成后的首次渲染期间&＃xff1b;

• 第二是小程序运行过程中的处理用户交互时期。

Javascript 脚本对小程序首次渲染的影响与浏览器环境下 标签对 HTML 渲染的影响类似&＃xff0c;虽然小程序中不允许使用 标签&＃xff0c;双线程模型下 Javascript 脚本也并不会完全阻塞 UI 线程的行为&＃xff0c;但是逻辑线程执行 Javascript 代码时仍旧是单线程的&＃xff0c;通过任务队列管理代码的有序执行。如果某一段 Javascript 代码逻辑占时太长&＃xff0c;造成任务队列过长&＃xff0c;最终会影响小程序在响应用户交互行为上的长延时或卡顿。

避免首屏时间太长

加快首屏的加载时间是前端开发领域最核心的目标之一&＃xff0c;从用户打开 Web 网站或小程序的时刻为计时起点&＃xff0c;屏幕内容渲染完成为计时终点&＃xff0c;起终点之间的时长即为首屏时间。

影响首屏时间的因素非常多&＃xff08;比如 DNS 解析耗时、TCP 链接的建立耗时……&＃xff09;对于小程序开发者来说&＃xff0c;有些因素是不可控的&＃xff08;比如 DNS 解析&＃xff09;&＃xff0c;那么在可控的众多因素当中&＃xff0c;最核心的两个优化方向是&＃xff1a;

• 代码优化&＃xff1b;

• 网络优化。

代码方向的优化措施重点关注这样几点&＃xff1a;

• 降低 WXML 的结构复杂度&＃xff0c;比如节点个数和深度&＃xff1b;

• 降低首次渲染的数据规模&＃xff0c;首次渲染只包含核心数据&＃xff0c;非核心数据的渲染可推迟到首屏渲染完成之后进行&＃xff1b;

• 从设计和交互的角度出发&＃xff0c;在实际内容被渲染之前展示友好的 loading 效果。

而网络方向的优化核心是为了降低 RTT&＃xff08; Road-Trip Time&＃xff0c;往返时延&＃xff09;&＃xff0c;也就是微信 IDE 给出的“6.所有请求的耗时不应太多”这条建议。由于小程序的所有资源均托放在微信的服务器&＃xff0c;所以不存在 CDN 和 DNS 优化问题&＃xff0c;对于开发者来说&＃xff0c;降低 RTT 最有效的两个措施是&＃xff1a;

• 减少网络请求所携带的数据体积&＃xff0c;这是最直观的网络优化方案&＃xff1b;

• 提高服务器处理网络请求的速度&＃xff0c;这一点是对服务端的要求&＃xff0c;除了服务端代码本身的性能以外&＃xff0c;当用户量上升到一定规模之后&＃xff0c;还需要服务器有处理高并发的能力。对于专注于端侧的传统前端和小程序开发者来说&＃xff0c;这些知识是相对陌生的&＃xff0c;往往需要后端的同学配合完成。这也是云开发相较于传统开发模式的主要优势之一&＃xff0c;使用云开发可以让端侧的开发者也能够开发出弹性伸缩、高并发、高 QPS 处理的服务层&＃xff08;更多云开发相关的内容我会在模块四详细讲解&＃xff0c;这里就不多说了&＃xff09;。

避免渲染界面的耗时过长的情况

这是一条综合性能指标&＃xff0c;渲染主要包括两个角度&＃xff1a;一是首屏的渲染时间&＃xff08;上一条讲过了&＃xff09;&＃xff1b;二是小程序运行期间的界面更新所需的渲染时间&＃xff0c;我们不妨称之为动态渲染。

动态渲染是由 Javascript 脚本中调用 setData 更新数据所触发&＃xff0c;所以优化动态渲染的切入点便一目了然&＃xff1a;优化 setData。至于具体的优化方案&＃xff0c;便是微信 IDE 给出的两点建议&＃xff1a;

• 避免 setData 的调用过于频繁。频繁调用 setData 会造成逻辑线程与渲染线程之间过多的通信&＃xff0c;01讲我们提到双线程之间的通行需要借助微信原生平台作转发&＃xff0c;中间必然是有一定的性能损耗和时延。除此之外&＃xff0c;渲染线程在接收到逻辑线程传递的数据之后&＃xff0c;需要进行解析、VDOM 对比、更新 UI 等一套管线流程&＃xff0c;在前一条流程执行完结之前&＃xff0c;后面的数据只能排队等待执行。所以频繁调用 setData 就会造成队列加长&＃xff0c;用户交互行为触发的 UI 更新就会缓慢甚至可能由于计算量太大造成卡顿。

• 避免 setData 的数据量太大。频繁调用 setData 会造成队列中的任务太多&＃xff0c;而如果 setData 的数据量太大&＃xff0c;则会造成单个任务的处理耗时加长。与上一条相比&＃xff0c;一个是任务数量过多&＃xff0c;一个是单个任务过重&＃xff0c;两者最终对于性能产生的负面影响是一致的。此外&＃xff0c;由于双线程之间需要借助微信原生平台转发&＃xff0c;所以 setData 数据量过大也会造成通信时延的加长。

对网络请求做必要的缓存以避免多余的请求

小程序的资源文件托管在微信的服务器&＃xff0c;所以小程序开发者不需要关注前端开发领域中对于静态资源的 HTTP 缓存策略&＃xff0c;这件事情微信会帮助开发者完成。

这一条建议所指的是在代码层面&＃xff0c;将部分重复使用的网络请求结果在代码或 storage 中进行合理缓存以实现复用&＃xff0c;对于使用同一个网络请求结果的代码可以直接从缓存中读取&＃xff0c;进而减少了不必要的网络请求个数。每次网络请求不论时间长短&＃xff0c;均需要用户等待&＃xff0c;减少网络请求的个数相当于减少了用户等待时间&＃xff0c;提升了用户体验。

避免短时间内发起太多的图片请求

这一条与微信 IDE 给出的另一条建议“10.避免短时间内发起太多的请求”的方向是一致的&＃xff0c;均是为了解决过多 HTTP 请求造成用户等待时间过长的问题。图片资源相对特殊的一个特点是体积较大&＃xff0c;前端领域最早的懒加载方案便是主要针对图片资源&＃xff0c;所以图片资源的请求对性能的影响更加直观一些。

目前前端和小程序领域中使用的仍旧是 HTTP 1.1 协议&＃xff0c;一个 TCP 链接同时只能处理一个 HTTP 请求&＃xff0c;在前一个请求得到服务器的响应之后才会发起第二个请求&＃xff0c;如果同一时间的 HTTP 请求太多就会产生排队。

浏览器为了应对这种问题&＃xff0c;提供了建立多个 TCP 连接以实现并行发送 HTTP 请求的目的&＃xff0c;目前市面上的浏览器最多支持同时建立 4~8 个 TCP 连接。也就是说&＃xff0c;最多可以同时处理 4~8 个HTTP 请求。如果同一时刻需要发送的 HTTP 请求数量远大于这个数字&＃xff0c;那么还是会产生排队。前面的内容我们重复地提到了“排队”一词&＃xff0c;不论是线程间的通信排队、任务队列的排队、还是 HTTP 请求的排队&＃xff0c;这些行为都是需要用户等待的&＃xff0c;对于用户的切身体验来说&＃xff0c;便是响应缓慢甚至卡顿。

总结

通过以上内容我们不难看出来&＃xff0c;微信 IDE 的体验评分功能给出的性能优化方案跟 Web 应用的性能优化方案大同小异&＃xff0c;尤其是使用 Vue/React 这类 MVVM 框架的 Web 应用。

微信 IDE 给出的这些建议能够很好地帮助我们写出性能更好的小程序代码以及搭建高性能的前后端架构&＃xff0c;不过现实中小程序的业务类型多种多样&＃xff0c;这些性能优化的方案也只是从单纯的技术角度出发&＃xff0c;对于不同类型的业务来说&＃xff0c;通常会有一些专属的优化措施&＃xff0c;比如视频类小程序的分片加载、游戏类小程序的 canvas 优化等等。所以今天的课后作业便是&＃xff1a;结合你以前做过的小程序项目类型&＃xff0c;想一想有没有对应的专属性能优化方案。

截止到这节课&＃xff0c;模块一的内容便完结了&＃xff0c;这个模块的内容偏底层&＃xff0c;了解这些底层知识能够帮助你写出更好的代码。模块二我们将从效率提升的角度&＃xff0c;讲解如果将小程序的开发模式从小作坊迈向工程化&＃xff0c;共同期待吧。

精选评论

**波&＃xff1a;

setdata加载的数据量有没有一个大概的量化数据&＃xff1f;例如50个左右开始有影响&＃xff0c;80个就要减少

    讲师回复&＃xff1a;

    没有具体的数字&＃xff0c;setData的性能除了受调用频率影响&＃xff0c;还会受数据体积的影响。所以最优解是需要频繁调试得出的一个经验值。

**艺&＃xff1a;

小程序使用的是http1.1 ?

    讲师回复&＃xff1a;

    目前还不支持http 2.0&＃xff0c;官方有规划了&＃xff0c;敬请期待。

**宁&＃xff1a;

有点疑问&＃xff0c;setData的次数和setData的数据本身数据量的大小感觉大概率是成反比的即setData次数多&＃xff0c;就可以通过发多次来减少setData本身发送数据量大的问题&＃xff0c;反之同理。请问大佬这方面有什么建议吗&＃xff1f;

    讲师回复&＃xff1a;

    setData是一条逻辑链路&＃xff0c;影响执行效率的并不仅仅是数据量的大小这一个因素&＃xff0c;setData的调用频率和数据体量之间的抉择并没有绝对的最优解&＃xff0c;虽然这么说有点虚&＃xff0c;但现实中确实是需要不断地调优才能得到一个平衡点。

**8686&＃xff1a;

您好&＃xff0c;我的一个小程序使用云开发存储了多个音频文件&＃xff0c;集合里面记录的都是云ID&＃xff0c;我在一个页面中需要连续播放一组音频文件&＃xff0c;会产生卡顿的现象&＃xff08;第一个音频播放完&＃xff0c;开始播放第二个音频&＃xff0c;然而第二个音频数据还没有加载完成&＃xff09;&＃xff0c;请问使用云存储如何能避免以上卡顿现象&＃xff0c;或者如何实现预加载云资源&＃xff1f;

    讲师回复&＃xff1a;

    这个是特定业务场景下的逻辑&＃xff0c;并不属于云开发要解决的问题&＃xff0c;云开发只提供基础的能力。不论是云存储还是常规的存储方法&＃xff0c;它们本身都只是原子能力&＃xff0c;你说的这种预加载场景是在这些基础能力之上的业务逻辑。