智能小程序性能优化概述

智能小程序在开发模式上基于 Web 前端开发的技能和生态,在运行时则采用了类客户端的方案,旨在使用体验上超越传统的 Web 前端技术,在开发效率上超过传统的客户端技术。因此,在小程序的性能优化工作方面,可以借鉴 Web 前端开发的已有经验,但同时也存在一些区别。

# 智能小程序架构

小程序使用了双线程模型,包括逻辑层和渲染层。逻辑层作为一个单独的线程执行 js 代码,控制小程序数据的生成和处理;渲染层使用了 WebView 线程,处理页面的渲染和用户的事件交互行为。采用双线程模型主要考虑到两点:

  1. 小程序需要一个物理上的沙箱(Sandboxie 虚拟系统程序)环境隔离:为了避免小程序使用某些动态能力(如 iframe ),绕过其审核机制,造成不可控的影响;
  2. 双线程模型提供了一个性能更好的逻辑线程,渲染层只处理渲染和事件行为,逻辑层只处理数据。

具体设计可以参考以下结构:

# 性能优化

基于以上架构设计,智能小程序的性能优化可以从以下几个方面入手:

  1. 小程序向数据服务器请求数据;
  2. 数据返回后在逻辑层进行处理,发送给渲染层(发送的行为即 setData );
  3. 渲染层获取到 data 后进行渲染展示可交互页面;
  4. 用户进行交互操作触发事件( event )渲染层将事件发送给逻辑层;
  5. 逻辑层触发小程序对应的逻辑行为,如果事件修改了数据就会触发以上的第二步。

# 数据瓶颈优化

双线程模型下,小程序容易在以下两个场景产生数据瓶颈:

  1. 数据的获取:由于数据的获取依赖数据服务器的反馈,所以我们希望数据的获取尽可能早,同时数据返回尽可能快;
  2. 页面的渲染:由于小程序的渲染层使用的是 WebView ,所以大部分传统 Web 渲染的优化手段对小程序优化同样有效;针对小程序的架构特性,智能小程序框架也提供了多种组件能力和优化建议,从而优化渲染性能。

因为小程序提供了双线程模式以及底层是由 Native 支撑的,所以小程序可以利用 Native 的能力提供更多性能优化手段。

我们将在性能优化的原理和手段具体介绍性能优化方案。