百度小程序性能优化

最新推荐文章于 2023-06-23 18:31:13 发布

省赚客APP开发者@聚娃科技

最新推荐文章于 2023-06-23 18:31:13 发布

阅读量391

点赞数

本文链接：https://blog.csdn.net/weixin_44627014/article/details/102709971

版权

本文介绍了百度小程序的性能优化策略，包括小程序运行时的优化，如setData操作的优化，包体积优化，请求数据的优化，清理定时器，合理使用自定义组件，渐进式加载和白屏优化。重点讨论了setData的正确使用，分包加载，图片优化，请求数据的优先级排序，骨架屏加载等，旨在提高小程序的加载速度和用户体验。

摘要由CSDN通过智能技术生成

引子：

一个指标引发的血案

https://www.cnblogs.com/Sherlock09/p/11726885.html

性能优化

进入移动互联网时代，传统Web开发技术（HTML，CSS，JavaScript）风光不再，客户端技术（iOS以及Android）依靠良好的体验重新崛起。但是客户端技术的开发效率始终无法与Web技术抗衡，同时会受到诸多平台层面的限制。在这一大背景下，小程序独特的架构诞生了，它将Web前端技术与传统的客户端技术结合在一起，其目的是在开发效率上超过传统的客户端技术，在使用体验上超越传统的Web前端技术。由于小程序的架构区别于传统的Web前端技术，开发者在开发过程可能会遇到一些性能上的问题。本文旨在介绍百度小程序一些实现原理和优化手段，帮助开发者优化自己的小程序。

一小程序运行时简介

在传统的Web前端项目中，所有代码全部运行在浏览器中。而小程序提供的运行环境有两种，分为逻辑层和视图层。假设现在开发者的小程序项目中有两个页面pages/index和pages/home，那么逻辑层代码指的是app.js与pages/index/index.js还有pages/home/home.js，视图层代码指的是pages/index/index.swan和pages/home/home.swan。在小程序中想要改变视图需要逻辑层与视图层之间进行通信，这部分通信是需要客户端参与，会消耗一定的系统资源。

存在问题：setData 调用随意、频繁，有很多不必要的数据没有必要存放在data中

setData操作的优化

setData方法是开发者通过逻辑层向视图层发送数据的方法。每一次 setData 的调用，都会触发一次通信，而每一次的通信都会消耗一定的系统资源，因此，开发者在使用 setData 需要注意以下几点：

不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用。
不在视图层使用的数据不要通过setData传输。
不在页面不可见之后使用setData.
不建议在更新数据结构当中的某一子项的时候将整个数据结构放到setData方法中，可以通过优化setData的key值来实现。
- 错误写法：
  let person = this.getData('person');
  person.age = 30;
  this.setData('person',person);
- 正确写法:
  this.setData('person.age', 30);
- 在更新列表中某一项内部的值时，推荐的用法为：
  this.setData('list[0].person.name', 'Harry');

在处理无限滚动页面加载的时候，我们发现很多开发者将新的一页上的数据添加整体的数据里面再调用setData。这样做造成每次页面加载传输的数据越来越大。

未优化情况下的做法：

let pages = this.data.pages.push(pageData)
this.setData({
              
 list: pages
});

优化后的做法：

Page({
          
 data: {
           
 pages: [], // 使用一个二维数组来描述长列表
 currentPage: 0 // 当前页面的页码
 },
 onReady() {
                  
 // 如果需要更新一页的数据，那么直接更新二维数组中的项
 this.setData(`pages[${currentPage}]`, pageData);
 }
});