2024-04-10

小程序性能优化实践指南

背景

随着移动互联网的发展，小程序已经成为了许多企业和开发者的首选平台之一。然而，随着小程序功能的不断丰富和用户需求的增加，小程序的性能优化变得愈发重要。本文将介绍一些常见的小程序性能优化实践，并提供详细的例子来说明如何在实际项目中进行优化。

性能指标

小程序（或微信小程序）的性能优化是确保小程序在用户设备上以流畅、快速的方式运行的重要方面之一。以下是一些常见的小程序性能指标：

LoadPackage

指小程序代码包下载阶段。在此阶段，小程序需要从服务器下载代码包以执行后续的逻辑。代码包大小和下载速度会影响小程序的启动性能。

获取方式：可通过网络监控工具或浏览器开发者工具查看网络请求的时间和代码包大小等信息。

First Paint (FP)

页面首次绘制是浏览器开始将内容呈现在屏幕上的时间点。此时用户无法与页面交互，但首次绘制仍可显示部分内容，向用户展示页面正在加载。

获取方式：通过浏览器性能分析工具或 Performance API 来捕获此事件，并了解页面渲染启动时间。

First Contentful Paint (FCP)

页面的第一个内容块被绘制到屏幕上的时间点。用户可以看到页面的某些部分，但是页面尚未完全加载。

获取方式：通过 Chrome DevTools 的 Performance 面板或 Lighthouse 等工具可以获取该指标。

First Meaningful Paint (FMP)

用户认为有用内容被展示在屏幕上的时间点。FMP 更准确地反映用户感知到的页面加载速度，因为它考虑了页面加载时的实际内容。

获取方式：通过用户体验监控工具、Web Vitals 库或Chrome User Experience Report 等方式可以收集数据并分析用户感知到的页面加载速度。

Largest Contentful Paint (LCP)

页面中最大的内容元素（如图片、文本等）被绘制到屏幕上且变得可见的时间点。LCP 是衡量用户认为页面已可交互的重要指标之一，优化 LCP 可提升用户体验和页面加载速度。

获取方式：通过 Chrome DevTools 的 Performance 面板、Web Vitals 库或 PageSpeed Insights 等工具来获取和分析 LCP 数据。

这些指标参数是小程序性能优化的重要参考，通过监控和优化这些参数，可以提升小程序的性能，提升用户体验。

具体措施

图片优化

图片是小程序中常见的资源，但过多或未经优化的图片会增加页面加载时间和用户流量消耗。以下是一些图片优化的实践：

使用适当的图片格式：

JPEG 格式适合照片和渐变色图片。
PNG 格式适合图标和带有透明背景的图片。
WebP 格式是一种新的图片格式，具有更好的压缩率和质量，但需要注意兼容性。

压缩图片大小：

使用工具如 TinyPNG、ImageOptim 等对图片进行压缩，减小图片文件大小。
避免在小程序中直接使用大图，尽量将图片压缩至合适的尺寸。

懒加载图片：

当页面中存在大量图片时，可以使用懒加载技术，延迟加载图片，减少页面加载时间。
通过小程序的 wx.createIntersectionObserver() 方法监听图片元素是否进入视窗，然后动态加载图片。


// 示例：图片懒加载
const observer = wx.createIntersectionObserver();
observer.relativeToViewport().observe('.lazy-img', (res) => {
  if (res.intersectionRatio > 0) {
    const lazyImg = res.dataset.lazyImg;
    // 加载图片
    this.setData({
      imgUrl: lazyImg
    });
    // 停止观察
    observer.disconnect();
  }
});

数据缓存和请求优化

小程序中频繁的网络请求会增加用户等待时间和服务器负载，因此优化数据请求和缓存是提升小程序性能的关键。

使用缓存：

对于频繁使用的数据，可以使用小程序的本地缓存功能，如 wx.setStorageSync() 和 wx.getStorageSync()，将数据存储在本地缓存中，减少网络请求。
对于需要实时更新的数据，可以设置合适的缓存过期时间，避免数据过期而导致的不一致性。

// 示例：数据缓存
const key = 'userData';
const data = wx.getStorageSync(key);
if (data) {
  // 从缓存中获取数据
  console.log('Data from cache:', data);
} else {
  // 发起网络请求获取数据
  wx.request({
    url: 'https://api.example.com/user',
    success: (res) => {
      const userData = res.data;
      // 将数据存入缓存
      wx.setStorageSync(key, userData);
      console.log('Data from network:', userData);
    }
  });
}

合并请求：

尽量减少网络请求的次数，可以将多个请求合并为一个请求，减少请求的重复和消耗。
使用小程序的 wx.request() 方法发送请求，并通过 Promise.all() 方法等待所有请求完成。

// 示例：合并请求
Promise.all([
  wx.request({ url: 'https://api.example.com/data1' }),
  wx.request({ url: 'https://api.example.com/data2' }),
  wx.request({ url: 'https://api.example.com/data3' })
]).then(([res1, res2, res3]) => {
  console.log('Data 1:', res1.data);
  console.log('Data 2:', res2.data);
  console.log('Data 3:', res3.data);
}).catch(error => {
  console.error('Error:', error);
});

页面渲染优化

页面渲染是影响用户体验的重要因素，优化页面渲染可以提高小程序的性能和流畅度。

使用 WXML 和 WXSS：

尽量避免使用复杂的 HTML 和 CSS 样式，可以使用小程序的 WXML 和 WXSS 实现相同的效果，减少页面渲染时间。
避免使用嵌套过深的结构，尽量保持页面结构简洁。

减少 DOM 操作：

减少在页面渲染过程中对 DOM 的操作，例如频繁的节点添加、删除和更新。
使用小程序的数据绑定功能，在数据变化时自动更新页面，避免手动操作 DOM。

// 示例：数据绑定
Page({
  data: {
    userInfo: {}
  },
  onLoad() {
    // 获取用户信息
    wx.getUserInfo({
      success: (res) => {
        // 更新页面数据
        this.setData({
          userInfo: res.userInfo
        });
      }
    });
  }
});

代码包体积优化

当小程序项目过大时，可以将不同功能模块分包加载，按需加载页面和资源，减少初始化时间和页面首次加载时间。

分包策略

独立分包允许小程序页面独立运行，无需依赖主包或其他分包。当从独立分包页面进入小程序时，用户无需等待主包下载，从而显著提升了启动速度。

主包：包含小程序的初始启动逻辑、基础框架和一些常用页面等内容。用户打开小程序时会首先下载主包。
分包：除了主包以外的其他代码包，每个分包可以包含若干个页面或组件。分包相对独立于主包运行，可以根据业务逻辑将相关页面或组件划分到不同的分包中。

分包异步化

分包异步化进一步细化了小程序的分包粒度，从页面级别深入到组件甚至文件级别。这使得原本只能放在主包内的部分插件、组件和代码逻辑得以剥离到分包中，并在运行时异步加载。这一技术有效解决了主包过度膨胀的问题，进一步降低了启动时的代码加载量。

app.json 配置：

"subpackages": [
  {
    "root": "pages/goods/",
    "name": "goods"
  }
]

动态引入：

wx.loadSubPackage({
  root: 'pages/goods/',
  success: function(res) {
    // 分包加载成功后的回调
  },
  fail: function(res) {
    // 分包加载失败处理
  }
});

分包预下载机制

尽管分包加载能够提升启动速度，但当用户跳转到分包内页面时，仍需等待分包下载，这可能导致页面切换的延迟。为解决这一问题，需要引入了分包预下载机制。该机制允许小程序在后台预先下载分包，确保用户在首次进入分包页面时无需等待下载，从而提升了页面切换的流畅性。

预下载原理：

分包预下载机制利用小程序框架的预加载能力，在用户打开小程序时提前加载分包资源，使得当用户需要访问对应分包页面时，可以更快地展示内容，减少加载等待时间。

预下载机制通常会在主包的某些关键页面或事件触发时开始执行，提前下载分包所需的资源文件，如 JS、CSS、图片等。

实现步骤：

识别关键页面：需要确定哪些页面是用户经常访问的重要页面，这些页面通常会被定义为关键页面，可以考虑在这些页面触发时启动预下载机制。
触发预下载：在合适的时机，例如用户打开小程序时或进入关键页面时，调用相应的预下载函数或方法，开始下载分包资源。
资源加载：下载完成后，将分包资源缓存至本地，以便在用户访问分包页面时直接使用已下载的资源，避免重新下载。

实际项目场景：

图片密集页面：对于包含大量图片的分包页面（如相册、产品展示页），通过预下载图片资源可以提高用户体验。
复杂交互页面：对于交互复杂的分包页面（如地图、视频播放页），提前加载相关组件和数据能够加快页面展示速度。

总结

小程序性能优化是一个持续改进的过程，通过合理的设计和优化，可以提高小程序的用户体验和性能表现。本文介绍了一些常见的小程序性能优化实践，包括图片优化、数据缓存和请求优化、页面渲染优化等方面的内容，并提供了详细的示例来说明如何在实际项目中进行优化。希望本文能够帮助开发者更好地优化自己的小程序项目，提升用户满意度和使用体验。

HankLiu的博客小屋

努力去听风的声音，不必在意风的方向。

2024-04-10

小程序性能优化实践指南