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

来点vc
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 });

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

avatar
文章
阅读
粉丝