当被问到小程序性能优化...

65 阅读4分钟

小程序在实际运用中可能会出现白屏、加载缓慢、页面跳转迟钝、按钮无响应和长列表滑动卡顿等问题。这些问题通常不是平台技术不完善所致,而是性能优化措施未能充分利用。下面是微信小程序的开发过程中,性能优化的一些理解的记录。

双线程机制的理解

image.png

微信小程序采用了双线程机制,其中逻辑层负责执行JavaScript代码,视图层负责UI页面的渲染。两层之间通过setData方法进行通信,数据传递由Native层中转。了解这一机制有助于我们编写更高效的代码。

性能优化点

1. 使用WXS脚本

WXS是小程序的一种脚本语言,与JavaScript类似,但是运行在视图层,因此可以减少逻辑层与视图层之间的数据传递。

<!-- 使用WXS优化数据处理 -->
<wxs module="m1">
  var msg = "Hello World";
  module.exports.message = msg;
</wxs>

<view>{{m1.message}}</view>

2. 渲染优化

减少WXML节点数量和层次,避免复杂的嵌套,这有助于减少渲染时间。

<!-- 精简DOM结构 -->
<view>...</view>
<view>...</view>

3. Worker线程

对于复杂的数据处理工作,可以使用Worker线程,这样可以避免阻塞主线程。

// 在Worker中处理数据
const worker = wx.createWorker('workers/fib.js');
worker.postMessage({ type: 'calculate', value: 30 });

4. 分批setData

当需要渲染大量数据时,分批次通过setData传递可以避免性能瓶颈。

// 分批次更新数据
const batchSize = 20;
for (let i = 0; i < list.length; i += batchSize) {
  this.setData({ 'currentList': list.slice(i, i + batchSize) });
}

5. LocalStorage缓存数据

使用本地缓存来存储数据,可以减少网络请求次数。

// 使用本地缓存
wx.setStorageSync('cachedData', data);

6. 图片优化:使用WebP格式

WebP是一种现代图像格式,提供了无损和有损压缩的图像数据。与传统的图像格式相比,例如JPEG和PNG,WebP格式的图片通常具有更小的文件大小,同时保持相似甚至更好的图像质量。具体来说:

  • 无损压缩:WebP无损压缩大小比PNG小了大约26%。
  • 有损压缩:WebP有损图片在等效的文件大小下,比JPEG图像有更好的质量;或者在相同质量下,文件大小可以更小。

这种减小的文件大小意味着图片加载更快,占用更少的网络带宽,这对于提高小程序在不同网络环境下的表现尤其重要。

代码示例

<!-- 使用WebP格式图片 -->
<image src="url_to_your_image.webp"></image>

7. 事件监听与内存管理

在页面卸载时,清理未完成的任务和监听器,避免内存泄漏。

// 清理资源
Page({
  onUnload: function() {
    clearTimeout(this.data.timer);
  }
});

8. 原生组件性能

原生组件是指那些由客户端而不是WXML渲染的组件,例如<camera><map>等。这些组件的性能之所以更优,原因在于:

  • 原生渲染:原生组件由微信客户端直接渲染,不需要通过WebView的层层解释和渲染,从而减少了渲染时间,提高了性能。
  • 避免层级限制:在一些复杂的页面布局中,原生组件不受WXML层级限制,可以减少页面计算和布局的复杂度,进一步提升渲染性能。
  • 独立于页面逻辑:原生组件的操作和事件处理通常独立于小程序的逻辑层,减少了逻辑层与视图层间的交互,降低了可能的性能瓶颈。

代码示例

<!-- 使用原生组件 -->
<camera id="myCamera"></camera>
// 操作原生组件
const ctx = wx.createCameraContext();
ctx.takePhoto({
  quality: 'high',
  success: (res) => {
    this.setData({
      src: res.tempImagePath
    })
  }
});

9. Http2/Quic协议

尽管这是服务器端的配置,但确保服务器支持Http2/Quic协议可以加快数据传输速度。

骨架屏优化技巧

为了提升用户体验,骨架屏是一个不错的选择,它在内容加载过程中给用户一种快速响应的感觉。

代码示例

<!-- 骨架屏布局 -->
<view class="skeleton">
  <view class="skeleton-header"></view>
  <!-- 骨架屏其他内容 -->
</view>

在数据加载完成后,通过setData更新页面数据,隐藏骨架屏,展示真实内容。

// 数据加载完成后,替换骨架屏
this.setData({ loading: false, content: realContent });

性能优化是一个持续的过程,需要在开发的每一个阶段都予以关注。希望这些技巧能帮助你构建更流畅、更高效的小程序。