呕心沥血整理！小程序性能优化的独家实战技巧
呕心沥血整理！支付宝小程序性能优化的独家实战技巧
嘿，各位程序猿小伙伴们！今天小编我可是带着超级干货来啦！咱们都知道，在开发支付宝小程序的时候，性能优化那可是相当重要的一环。一个性能不佳的小程序，就好比一辆破破烂烂还老是熄火的老爷车，用户体验简直差到爆！所以呢，今天小编就把自己呕心沥血整理的支付宝小程序性能优化独家实战技巧分享给大家，希望能让咱们开发的小程序像超级跑车一样风驰电掣！
优化页面加载速度
1. 合理使用分包加载
特点 | 描述 |
|---|---|
分包概念 | 把小程序的代码和资源按照业务模块分成多个包，用户在首次进入小程序时，只加载主包，减少首次加载时间。 |
优势 | 提高小程序启动速度，对于功能复杂、代码量大的小程序效果显著。比如一个电商小程序，可以把商品展示、购物车、个人中心等分别分包。 |
注意事项 | 分包大小有限制，主包不能超过 2MB，单个分包不能超过 2MB，整个小程序所有分包和主包加起来不能超过 12MB。 |
2. 预加载数据
在小程序启动或者页面即将展示的时候，提前通过 API 调用等方式获取数据，这样当页面真正展示时，数据已经准备好，可以直接渲染。例如，一个资讯类小程序，在首页即将展示前，通过 my.request 方法请求热门文章列表数据。
// 在页面的 onLoad 生命周期函数中
Page({
data: {
articleList: []
},
onLoad: function() {
my.request({
url: '',
success: (res) => {
this.setData({
articleList: res.data
});
},
fail: (err) => {
console.log('数据请求失败', err);
}
});
}
});3. 优化图片加载
优化方式 | 描述 |
|---|---|
图片格式选择 | 对于色彩丰富的照片，优先使用 JPEG 格式；对于简单图形、图标等，使用 PNG 格式。例如，小程序中的商品图片用 JPEG，而底部导航栏图标用 PNG。 |
图片压缩 | 使用工具对图片进行压缩，减少图片大小。可以使用在线图片压缩工具，如 TinyPNG。 |
懒加载 | 对于在屏幕外的图片，暂时不加载，当图片进入视口时再加载。支付宝小程序提供了 |
<!-- 开启图片懒加载 -->
<image src="{{imageUrl}}" lazy-load="{{true}}"></image>资源管理优化
1. 代码拆分
将大的 JavaScript 文件拆分成多个小文件，根据业务需求按需加载。比如一个大型的电商小程序，把商品列表页面的逻辑代码、商品详情页面的逻辑代码分别拆分成不同的文件。这样在加载商品列表页面时，只加载商品列表相关的代码文件，减少不必要的代码加载。
2. 缓存管理
缓存类型 | 描述 |
|---|---|
本地缓存 | 使用 |
网络缓存 | 合理设置 HTTP 缓存头，让浏览器或小程序端缓存静态资源，如 CSS、JavaScript 文件等。可以在服务器端配置 |
// 本地缓存示例
// 存储数据
my.setStorage({
key: 'cityList',
data: ['北京', '上海', '广州']
});
// 获取数据
my.getStorage({
key: 'cityList',
success: (res) => {
console.log('城市列表', res.data);
},
fail: (err) => {
console.log('获取缓存失败', err);
}
});3. 减少不必要的资源引用
检查小程序代码中是否有未使用的 CSS 样式、JavaScript 函数等资源，及时删除。比如在开发过程中，可能写了一些测试用的 CSS 样式，在正式上线前要确保这些无用的样式都被清理掉，避免增加小程序的体积。
数据请求优化
1. 合并请求
在很多场景下，我们可能需要从服务器获取多个数据，但如果每个数据都单独发起一次请求，会增加网络开销和延迟。通过将多个相关的数据请求合并为一个，可以有效减少请求次数，提高性能。
例如，在一个电商小程序中，商品详情页面需要展示商品的基本信息、价格、库存以及用户评价等数据。原本可能需要分别向不同的接口发起 4 次请求，现在我们可以将这些数据整合到一个接口中获取。
假设服务器端提供了一个合并接口，请求参数为商品 ID。在小程序端的代码如下：
Page({
data: {
productInfo: {}
},
onLoad: function(options) {
const productId = options.productId;
my.request({
url: '',
method: 'POST',
data: {
productId: productId
},
success: (res) => {
// 假设返回的数据结构为{productBaseInfo, price, stock, comments}
this.setData({
productInfo: res.data
});
},
fail: (err) => {
console.log('合并请求失败', err);
}
});
}
});代码说明：首先在页面的onLoad生命周期函数中获取商品 ID，然后通过my.request方法向合并接口发起请求。将商品 ID 作为参数传递给服务器，服务器根据 ID 返回商品的各项信息。成功获取数据后，通过setData方法将数据更新到页面的data中，以便进行渲染。
2. 缓存请求结果
对于一些不经常变化的数据请求，我们可以将请求结果进行缓存。这样在下次需要相同数据时，直接从缓存中读取，而不需要再次发起网络请求，大大提高了响应速度。
以获取城市列表为例，城市列表数据一般不会频繁更新。我们可以在首次请求成功后，将结果缓存到本地。
代码语言：javascript代码运行次数：0运行复制Page({
data: {
cityList: []
},
onLoad: function() {
// 先尝试从本地缓存读取城市列表
my.getStorage({
key: 'cityListCache',
success: (res) => {
this.setData({
cityList: res.data
});
},
fail: () => {
// 缓存中没有数据，发起网络请求
my.request({
url: '',
success: (res) => {
this.setData({
cityList: res.data
});
// 将请求结果缓存到本地
my.setStorage({
key: 'cityListCache',
data: res.data
});
},
fail: (err) => {
console.log('获取城市列表失败', err);
}
});
}
});
}
});代码说明：在页面加载时，首先尝试从本地缓存中读取城市列表数据（通过my.getStorage方法，key为cityListCache）。如果读取成功，直接将数据设置到页面的data中进行渲染。如果缓存读取失败，则发起网络请求获取城市列表数据。在请求成功后，不仅将数据设置到页面data中，还通过my.setStorage方法将数据缓存到本地，key同样为cityListCache，以便下次使用。
页面渲染优化
1. 使用虚拟列表
当需要展示大量数据列表时，如果一次性将所有数据都渲染到页面上，会导致页面卡顿，性能下降。虚拟列表技术只渲染当前视口可见的数据项，当用户滚动列表时，动态更新渲染的数据，大大提高了页面渲染性能。
在支付宝小程序中，我们可以借助一些第三方库来实现虚拟列表，例如@antv/f2库。下面是一个简单的使用@antv/f2实现虚拟列表展示商品列表的示例。
首先，在app.json中引入@antv/f2库：
{
"usingComponents": {
"f2-canvas": "@antv/f2/lib/miniprogram/canvas"
}
}然后在页面的.axml文件中：
<view class="container">
<f2-canvas id="myCanvas" onInit="initChart"></f2-canvas>
</view>在页面的.js文件中：
const F2 = require('@antv/f2/lib/index');
Page({
data: {
productList: []
},
onLoad: function() {
// 假设从服务器获取到商品列表数据
my.request({
url: '',
success: (res) => {
this.setData({
productList: res.data
});
},
fail: (err) => {
console.log('获取商品列表失败', err);
}
});
},
initChart: function(canvas, width, height) {
const data = this.data.productList;
const chart = new F2.Chart({
el: canvas,
width: width,
height: height,
pixelRatio: 2
});
chart.source(data, {
productName: {
type: 'cat'
},
price: {
type: 'number'
}
});
chart.tooltip({
showCrosshairs: true,
shared: true
});
chart.interval().position('productName*price');
chart.render();
return chart;
}
});代码说明：在app.json中声明使用@antv/f2库的f2-canvas组件。在页面的.axml中放置f2-canvas组件，并指定onInit事件为initChart。在页面的.js文件中，首先引入@antv/f2库，然后在onLoad生命周期函数中获取商品列表数据。initChart函数是在f2-canvas组件初始化时调用，它接收画布、宽度和高度等参数。在函数内部，使用F2.Chart创建图表实例，将商品列表数据作为数据源，设置数据字段的类型，配置图表的提示框和柱状图展示方式，最后渲染图表并返回图表实例。通过这种方式，@antv/f2库实现了虚拟列表效果，高效展示大量商品数据。
2. 减少重排和重绘
重排（reflow）和重绘（repaint）会消耗浏览器的性能，在小程序开发中也不例外。我们要尽量减少导致重排和重绘的操作。
例如，当我们需要一次性修改多个元素的样式时，如果分别对每个元素进行样式修改，可能会触发多次重排和重绘。我们可以通过cssText属性一次性修改多个样式。
假设页面中有一个view元素，我们需要同时修改它的宽度、高度和背景颜色：
<view id="myView" class="myClass"></view>Page({
onLoad: function() {
const myView = my.createSelectorQuery().select('#myView');
myView.fields({
dataset: true,
size: true
}, (res) => {
const view = res.node;
// 一次性修改多个样式
view.style.cssText = 'width: 200px; height: 200px; background-color: red;';
}).exec();
}
});代码说明：首先通过my.createSelectorQuery获取页面中id为myView的元素节点。然后在fields回调函数中获取到实际的元素节点view。通过设置view.style.cssText属性，一次性将宽度、高度和背景颜色等样式修改完成，这样只触发一次重排和重绘，相比分别修改每个样式属性，大大提高了性能。
注意事项
避免过度优化
虽然性能优化至关重要，但也要避免过度优化。过度优化可能会使代码变得复杂难懂，难以维护。例如，在某些场景下，为了节省极少量的内存而使用非常复杂的数据结构，这可能会导致代码可读性大幅下降，后续维护成本增加。在进行优化时，要在性能提升和代码可维护性之间找到一个平衡点。
兼容性考虑
支付宝小程序需要在不同的设备和操作系统上运行，所以在优化过程中要充分考虑兼容性问题。例如，一些新的 JavaScript 特性在某些旧版本的支付宝客户端中可能不支持，这就需要我们使用 Polyfill 或者采用兼容的代码写法。在使用 CSS 样式时，也要注意不同设备的屏幕尺寸和分辨率差异，确保页面布局在各种设备上都能正常显示。
监控与持续优化
性能优化不是一劳永逸的事情。小程序上线后，要通过各种监控工具（如支付宝小程序提供的性能监控平台）实时监测小程序的性能指标，如页面加载时间、内存占用、帧率等。根据监控数据，及时发现性能问题，并持续进行优化。因为随着业务的发展，小程序的代码和功能会不断增加和变化，可能会引入新的性能瓶颈。
常见问题
内存泄漏
内存泄漏是小程序开发中常见的性能问题之一。当不再使用的对象没有被正确释放，导致内存占用不断增加，最终可能会使小程序卡顿甚至崩溃。例如，在使用定时器（setInterval 或 setTimeout）时，如果在页面销毁时没有清除定时器，定时器会一直占用内存。
Page({
data: {},
onLoad: function() {
this.timer = setInterval(() => {
console.log('定时器运行中');
}, 1000);
},
onUnload: function() {
// 正确做法，在页面卸载时清除定时器
clearInterval(this.timer);
}
});在上述代码中，如果 onUnload 函数中没有 clearInterval(this.timer) 这行代码，定时器会在页面卸载后继续运行，从而导致内存泄漏。
图片加载失败
图片加载失败可能会影响小程序的视觉效果和用户体验。常见原因包括图片 URL 错误、网络问题、图片格式不支持等。为了避免图片加载失败对页面造成影响，可以设置图片加载失败的提示。
代码语言：xml复制<image src="{{imageUrl}}" binderror="handleImageError"></image>Page({
data: {},
handleImageError: function() {
// 可以在这里设置图片加载失败后的提示，比如显示一张默认的错误图片
this.setData({
imageUrl: 'defaultErrorImage.png'
});
}
});页面白屏
页面白屏通常是由于页面加载过程中出现错误导致的，可能是代码错误、资源加载失败等。解决方法是通过调试工具（如支付宝小程序开发者工具的调试面板）查看报错信息，定位问题所在。如果是代码错误，及时修复代码；如果是资源加载失败，检查资源路径和网络连接。
常见面试题
请简述支付宝小程序性能优化的主要方向
主要方向包括优化页面加载速度（如分包加载、预加载数据、优化图片加载等）、资源管理优化（代码拆分、缓存管理、减少不必要资源引用）、数据请求优化（合并请求、缓存请求结果）、页面渲染优化（使用虚拟列表、减少重排和重绘）等。通过这些方面的优化，可以提高小程序的启动速度、运行流畅度，提升用户体验。
说说你对小程序分包加载的理解
小程序分包加载是将小程序的代码和资源按业务模块分成多个包，用户首次进入小程序时只加载主包，减少首次加载时间。这对于功能复杂、代码量大的小程序效果显著。主包不能超过 2MB，单个分包不能超过 2MB，整个小程序所有分包和主包加起来不能超过 12MB。它可以提高小程序启动速度，例如电商小程序可将商品展示、购物车等功能分别分包。
如何在支付宝小程序中优化图片加载性能
可以从以下几个方面优化：选择合适的图片格式，色彩丰富照片用 JPEG，简单图形、图标用 PNG；使用工具压缩图片，如 TinyPNG 等；开启图片懒加载，支付宝小程序 img 组件通过设置 lazy-load="{{true}}" 实现，对于屏幕外图片，进入视口时再加载，减少初始加载资源量，提升页面加载速度。
结语
好啦，到这里关于支付宝小程序性能优化的独家实战技巧就全部分享完啦！小伙伴们，性能优化的道路是永无止境的，每一次优化都是对我们技术能力的一次提升。希望大家在实际开发中能够灵活运用这些技巧，打造出高性能的支付宝小程序。如果在优化过程中有任何疑问或者新的想法，欢迎随时和小编交流哦！让我们一起在代码的世界里乘风破浪，不断创造出更优秀的作品吧！
发布评论