提高性能的几种写法
任何优秀的大软件里面都是一个优秀的小程序。<br>
点完赞，在查看哦
setData
- 频繁使用setData会造成js阻塞问题，甚至卡顿，崩溃（崩溃没试过哈）；所以我们应该如何用正确的姿势提高性能呢？
-
- 尽量把需要setData的内容放到一起setData，不要出现一个函数多个或者同时使用setData；
-
- 更新对象内的某个值，不应该整个对象重新更新，只需要更新对应的值即可，例如<br>
this.setData({'userInfo.headImg': '更新的内容'})；
- 更新对象内的某个值，不应该整个对象重新更新，只需要更新对应的值即可，例如<br>
-
- 如果是列表数据，需要改变某个值变成true，也不应该全部数据更新一遍，只需要更新某一个值即可，例如<br>
this.setData({[`list[${index}].show`]: true})；
- 如果是列表数据，需要改变某个值变成true，也不应该全部数据更新一遍，只需要更新某一个值即可，例如<br>
-
- 页面不需要渲染的数据，尽量不要写在js里面的data里面，你可以定义一个全局参数都可以或者this.timer等生成一个全局变量；
-
- setData单次不能超过1M，超过会导致设置不成功，建议分页数据可以使用二维数组设置，例如
// 1.通过一个二维数组来存储数据 let feedList = [[array]]; // 2.维护一个页面变量值，加载完一次数据page++ let page = 1 // 3.页面每次滚动到底部，通过数据路径更新数据 onReachBottom:()=>{ fetchNewData().then((newVal)=>{ this.setData({ ['feedList[' + (page - 1) + ']']: newVal, }) } } // 4.最终我们的数据是[[array1],[array2]]这样的格式，然后通过wx:for遍历渲染数据 -
relativeToViewport
-
我们会发现很多时候，列表展示都是图文展示，而图片后端又没有提供缩略图，这会导致浏览器一次请求多张图片会非常消耗http请求,并且浏览器也有请求数量限制，例如chrome浏览器就限制一次性最多6个，严重还会影响我们业务接口请求，这时我们使用
IntersectionObserver就太美妙了- 解决思路
1. 先创建对象实例`` wx.createIntersectionObserver() ``;
2. 用数据列表遍历监听页面渲染的元素；
3. 条件判断，动态设置状态显示图片，如果返回滚动则过滤不需要在setData，减轻js工作任务；
js代码
data: {
list: [ // 测试数据自己随便造
{id: 0, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'},
{id: 1, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'},
{id: 2, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'},
]
},
onReady() {
let list = this.data.list;
list.forEach((item,index)=>{ // 遍历监听元素在页面的位置
wx.createIntersectionObserver().relativeToViewport({bottom: 0}).observe(`.img-${index}`,res=>{
if (res.intersectionRatio > 0 && !list[index].show){
// intersectionRatio值大于0，说明元素出现在视图中了
// console.log(item, 'list', res)
this.setData({
[`list[${index}].show`]: true
})
}
})
})
},
wxml代码
<view>
<block wx:for="{{list}}" mode="aspectFill" wx:key="index">
<view class="test-img img-{{index}}">
<image class="image" wx:if="{{item.show}}" src="{{item.url}}"></image>
</view>
</block>
</view>
wxss代码
.test-img{
width: 600rpx;
height: 400rpx;
margin-bottom: 20rpx;
overflow: hidden;
}
.image{
width: 100%;
}
onPageScroll
- 这个监听页面滚动事件，输出顶部滚出页面多少距离，单位是px;这个事件非必要时不要写也不要输出内容，这样会很消耗性能，如果必须要使用到，我们要学会写节流或者防抖事件，减少过快的去setData；下面代码是网上复制，结合自己业务改造下即可
// 防抖
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
// 节流throttle代码（定时器）：
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
代码分包
-
代码肯定是越写越多，需求也是越来越多的，小程序单个分包最大只能是2M，这就不能让我们的业务代码都写在主包，这会导致我们无法提交代码，并且也会导致我们打开小程序会很慢，体验很差。
-
为了解决这个问题，微信提供了小程序总共代码包支持最大16M，还支持我们分包功能，这样我们就可以开发更强大的功能，分包又分为__普通分包__和__独立分包__，他们又是什么关系，有何不同？
- 总的不同是，主包不能调用任何分包的东西，例如js，组件等，但是分包或者独立分包是可以调用或者使用主包的任何东西
- 分包：分包就是一个可以节省主包代码的一个普通分包，启动分包页面，会把主包下载，普通分包可以使用主包的 js 文件、template、wxss、自定义组件、插件等
- 独立分包：独立分包不依赖主包即可运行，不需要下载主包，可以很大程度上提升分包页面的启动速度，固并不能使用主包的 js,组件，wxss，插件等
- 预加载：分包后，如果想打开主包后，跳转不出现_加载模块中_的等待提示，可以使用预加载，这样就可以做到无缝跳转，增强了用户体验，跳转就像主包跳转主包页面一样顺滑。更多分包讲解请查看微信文档
{
"pages": [
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "moduleA", // 分包
"pages": [
"pages/rabbit",
"pages/squirrel"
]
}, {
"root": "moduleB", // 独立分包
"pages": [
"pages/pear",
"pages/pineapple"
],
"independent": true // 独立分包的标志
}
],
"preloadRule": { // 预加载写法
"pages/index": {
"network": "all",
"packages": ["moduleA"] // 需要预加载的分包
},
"pages/logs": {
"packages": ["moduleB"] // 需要预加载的分包
}
}
}
结束
本次写作先到这里，更多丰富好用的内容，请等待下一期~
都看完了，别忘了给个赞再走~，创作不容易，谢谢哦
本文与掘金号文章同步，欢迎查阅掘金对应的文章
强力驱动