小程序性能优化实用技巧（小程序性能优化实用技巧有哪些？）

众所周知，性能直接影响用户体验。 本文首先讲解如何判断小程序页面的性能，然后通过具体案例重点介绍一些实用技巧。 最后，我们将讨论键值在列表渲染中如何发挥作用。 为什么关键值可以帮助提高绩效。

判断小程序页面性能

由于小程序开发环境的独特性，通常的Chrome开发工具和成熟的性能测试工具（如Lighthouse）无法了解页面性能。 虽然是网页，但微信官方提供了性能评分工具。 单击此处查看工具详细信息。

稍后我们将使用一个实际示例向您展示如何通过此工具优化页面的性能。 首先，我们看一下优化页面之前的得分。

setData中的数据太大。

该函数具有滚动到底部加载的功能。 优化前的做法是：

// 1: 初始化列表并保存列表数据 data = startList // 2:监听滚动事件，滚动到底部，获取新数据，并将其添加到列表中。 最后，在最后重置 setDataonReachBottom:()=>{ const {list} = this.data fetchNewData() 。 then((res)=>{ list.push(res.list); this.setData({list}) }}

当大多数人面临滚动长列表时，我认为第一种处理方法是看起来是这样的：如果你的数据量很少，那么几个页面可能不会有太大的问题，但是如果你有大量的页面，列表中的数据就会越来越大，因此，每次重新渲染页面时，都会重新渲染更多的节点，从而导致向后滚动和加载速度变慢，但事实并非如此。在同一个线程上，数据必须传输到视图，从用户触发页面交互，到处理数据逻辑，最后渲染页面。 因此，小程序本身也有数据大小限制，不能超过1M。

setData数据路径

如何解决这个问题，小程序setData的关键是：

let o = obj;this.setData({ 'o.property': value} ) and let a = array;this.setData({ 'array[ 0].text':value})

这样就减少了一次性setData的数据大小，可以通过向视图层写入一条数据路径来批量传输数据到视图层视图层。 具体写法如下。

// 1. 将数据存储在二维数组中 let feedList = [[array]]; // 2. 维护页面变量值并加载一次数据。 page++ let page = 1 // 3、每次页面滚动到底部时，通过数据路径更新数据。 onReachBottom:()=>{ fetchNewData() .then((newVal)=>{ this.setData({ feedList[' + (页 - 1)+']']: Newval,})}} // 4最后，当你执行[[Array1],[Array2]]时，数据通过wx:快速渲染，并且在渲染时执行多个图像请求（图像的延迟加载）

，这更容易理解，因为页面一次发送太多的图片请求，导致同时启动太多的http连接，尤其是当一次启动太多的http链接时，例如Chrome浏览器有一次限制为6个，所以当。页面已渲染，只有不在视图中的元素才可见并渲染。

传统的方法是使用 getBoundingClientRect() 获取元素的位置并将其与页面的滚动位置进行比较。 如果在视图中可见，则显示图像。 这种方法有两个问题。

getBoundingClientRect()方法调用本身很容易导致页面重新定位，并且监督滚动事件本身被频繁触发。 虽然可以通过限流来缓解，但是很容易添加不必要的代码来处理 IntersectionObserver

。 实际上，微信提供了 IntersectionObserver 对象。

使用此 API，您不再需要主动监视元素的位置。 当您开始渲染页面时，您可以通过此 API 指定应监视哪些元素，系统会自动监视元素的位置。

let data = list;data.forEach((item,index)=>{ this.createIntersectionObserver().relativeToViewport.observe(`.img-${index}`,res=>{ if (res.intersectionRatio > 0){ this.setData({ item.imgShow:true })

IntersectionRatio 值大于 0 表示该元素在视图中可见，并且图片组件可见。太大，显示区域太小

这个问题是指图片太大，页面显示的尺寸太小

CDN图片处理

对于页面中的图片来说，是这样的。最好将它们存储在 CDN 服务器上，这样可以加快请求速度，从而允许将某些操作（例如裁剪）存储在 CDN 上。我们通过CDN支持图片处理，当请求图片时，我们告诉CDN服务器需要的图片大小，CDN服务器响应对应大小的图片。

键值在列表渲染中的作用

键值在列表渲染时可以提高列表渲染性能。 为什么？ 首先，你需要考虑你的小程序页面将如何呈现。 这主要分为以下几个步骤：

将wxml结构文档构建成vdom虚拟号码。 页面有新的交互，生成新的vdom号码，并与旧的vdom号码进行交互。 比较数字，看看发生了什么变化，进行相应的更改（删除、移动、更新值）等操作，最终使vdom成为实际的页面结构

键值的作用是数据发生了变化这是在第二步中完成。 当渲染层重新渲染被触发时，具有键的组件被修改，并且框架确保组件顺序被改变。 组件维护自己的状态，不会重新创建，以提高列表渲染的效率。

如果不指定某个键值，则默认按数组索引处理，这会导致input等一些输入框组件的值混乱。

相关测试代码可以用wxkey查看。

可以看到元素被添加到了数组的末尾，没有添加任何键，添加了之前渲染的元素。

不重新渲染。 但是，如果在开头或中间插入一个元素，则整个列表将被删除并重新渲染，从而混淆输入组件的值。 值未成功更新，密钥已添加。 如果在数组的末尾、中间或开头插入一个元素，则其他元素将丢失。 现有的元素不会被重新渲染，值可以正常更新

所以在渲染列表时，如果列表的顺序发生变化，不要简单地使用数组，使用键最好添加一个索引为一把钥匙。

最后我们来看看结果：

体验码：

我今天分享的优化你的小程序页面希望对大家有所启发为你。 提高了性能并允许您创建更流畅的性能页面。

最后，如果您喜欢我的文章，请点击关注我。 我会时不时地分享我的观点和想法，以便与大家一起不断成长和学习。

推荐教程：《微信小程序》

数码产品性能查询

本软件包含市面上所有手机CPU、手机跑分、电脑CPU、电脑产品信息等。 对于检查数码产品的最新状态、了解产品特性以及检查计算机的产品信息非常有用。 您可以比较并选择性价比优良的一款。

下载

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：小程序性能优化实用技巧（小程序性能优化实用技巧有哪些？） https://zhujicankao.com/123842.html