小程序setData数据量过大时候会对渲染有影响吗?
datas:[
{
id:1000,
name: "帅哥",
title: '...',
b: '...',
d: 0,
f:0,
....
},
{
id:1001,
name: "美女",
title: '...',
b: '...',
d: 0,
f:0,
....
},
...
]
如上:后台返回数据中有可能包含了大量的无用数据,数据量如果过大时候会对小程序渲染界面有影响吗?
答案是:有
一般情况下我们是在wxml中循环data,然后取出我们需要的字段,其他数据和我们无关。但是小程序文档中有这么一段话:
setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口。在介绍常见的错误用法前,先简单介绍一下 setData 背后的工作原理。
工作原理
小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到两边独立环境。
而 evaluateJavascript 的执行会受很多方面的影响,数据到达视图层并不是实时的。
其实就是我们setData里面的所有数据都被转成了字符串,然后字符串又转换成JS脚本,然后页面根据JS脚本去渲染页面。那么我们能做的就是尽量少传数据,而此时后台返回这一大串数据就与此相悖了,所以最好是新建一个tempData,将要的数据取出来之后再setDta这个tempData,以此来提高微信小程序的页面渲染速度,提升微信小程序运行效率,优化微信小程序的用户体验。
可以这样写:
let tempData = []
for(let i = 0; i < datas.length; i++) {
let tempObj = {
id: datas[i].id,
name: datas[i].name
}
tempData.push(tempObj)
}
console.log(tempData)
也可以使用高阶函数map:
let tempDatas = datas.map(data => {
return {
id: data.id,
name: data.name
}
})
console.log(tempDatas)
此时我们再使用setData({})就能提高渲染效率了
同时再分享两个setData技巧
1、有一个Object如下:
obj: {
a: "a",
b: "b",
c: "c"
}
此时已经渲染到页面了,然后我们修改了obj,此时可以选择:
① 平时做法:
let obj = this.data.obj
obj.b = "我是后来修改的"
this.setData({
obj: obj
})
② 但是更优化的做法是
this.setData({
'obj.b': "我是后来修改的"
})
不仅省了两行代码,同时还提高页面渲染效率
2、和 1 差不多,就是Object变成数组Array,当我们要给数组的其中一个数据进行修改时,我们可以参照上面的方法
this.setData({
'array[1]': "我是后来修改的"
})
当我们要给数组的多个数据进行修改时,我们会写一个循环,然后修改array,此时是无法识别的,要写成如下形式
for(let i = 0; i < 5; i++) {
this.setData({
[`array[${i}]`]: "我是后来修改的"
})
}
原文地址:https://blog.csdn.net/rolan1993/article/details/81738613
小程序setData数据量过大时候会对渲染有影响吗?的更多相关文章
- 针对数据量较大的表,需要进行跨库复制,采用navcat 实现sqlite数据库跨数据库的数据表迁移 [转载]
2014年12月13日 14:36 新浪博客 (转自http://www.cnblogs.com/nmj1986/archive/2012/09/17/2688827.html) 需求: 有两个不同的 ...
- sql查询未走索引问题分析之查询数据量过大
前因: 客户咨询,有一个业务sql(代表经常被执行且重要),全表扫描在系统占用资源很高(通过ash报告查询得到信息) 思路: 1.找到sql_text,sql_id 2.查看执行计划 3.查询sql涉 ...
- 解决mysql导入数据量很大导致失败及查找my.ini 位置(my.ini)在哪
数据库数据量很大的数据库导入到本地时,会等很久,然而等很久之后还是显示失败: 这是就要看看自己本地的没mysql是否设置了超时等待,如果报相关time_out这些,可以把mysql.ini尾部添加ma ...
- Mysql中使用JDBC流式查询避免数据量过大导致OOM
一.前言 java 中MySQL JDBC 封装了流式查询操作,通过设置几个参数,就可以避免一次返回数据过大导致 OOM. 二.如何使用 2.1 之前查询 public void selectData ...
- 微信小程序开放数据解密 AES-128-CBC 解密(C#版本)
最近在开发小程序,需要跟微信服务端交互,微信敏感数据都有加密返回,需要在服务端接收进行解密后再返回给客户端小程序,今天就通过C# 进行数据的解密,官方下载下来是Node.C++.php等,就是没有C# ...
- 斯坦福大学公开课机器学习:machine learning system design | data for machine learning(数据量很大时,学习算法表现比较好的原理)
下图为四种不同算法应用在不同大小数据量时的表现,可以看出,随着数据量的增大,算法的表现趋于接近.即不管多么糟糕的算法,数据量非常大的时候,算法表现也可以很好. 数据量很大时,学习算法表现比较好的原理: ...
- 微信小程序请求数据
微信小程序请求数据,在页面展示,可以在onLoad生命周期中进行请求. 1.新建目录http,新建文件http.js 2.在js文件中暴露需要使用的变量 var baseUrl = 'http://1 ...
- 系统导出数据到excel,数据量过大(大约10W)条,导致服务器 cpu 100%解决方法
系统导出数据到excel,数据量过大(大约10W)条,导致服务器 cpu 100%解决方法
- phpmyadmin 打开数据表较多,数据量较大的数据库时出现超时的解决办法
用phpmyadmin打开数据表较多,数据量较大的数据库时,会出现超时,或者等半天打开了说数据库没有表.并且即便打开了,再进行其他浏览,编辑,sql等操作,页面也是相当慢的,慢等几乎无法忍受.这里慢也 ...
随机推荐
- jqGrid全部选中
var jqGrid = $("#jqGrid"); // 拿到所有行id var jqGridIDs = jqGrid.getDataIDs(); // 拿到所有选中行id va ...
- markdown转移字符表
本片转的ASCII码,主要针对$,另外我为了不让"&#xxx;"被转移成字符,我在分号";"前加了个空格,复制的时候注意一下 字符 转义 0 空格 @ ...
- tp3.2判断修改成功
save方法的返回值是影响的记录数,如果返回false则表示更新出错,因此一定要用恒等来判断是否更新失败. 一开始用这种判断, if (!$edit_flag && $edit_fla ...
- Redis 常用命令学四:集合类型命令
1.增加和删除命令 127.0.0.1:6379> SADD st a (integer) 1 127.0.0.1:6379> SADD st r f g (integer) 3 127. ...
- c++语法笔记(中)
继承与派生 继承面向对象程序设计4个主要特征:抽象,封装,继承,多态性c++通过继承实现可重用性.有时两个类的内容基本相同或有一部分相同,这时可以利用原来声明的类作为基础,再加上新的内容即可,减少了工 ...
- 1266: gcd和lcm(Java)
WUSTOJ 1266: gcd和lcm 参考 1naive1的博客 Description 已知a,b的最大公约数为x,也即gcd(a,b)=x; a,b的最小公倍数为y,也即lcm(a,b)= ...
- Yii2 设计模式——单例模式
单例模式 模式定义 单例模式确保一个类只有一个实例,并提供一个全局访问点.当现实中只需要一个对象,或者为了节省系统资源,又或者是为了共享数据的时候可以使用单例模式. 代码实现 我们先来看看单例模式的标 ...
- 2019杭电多校一 C. Milk (dp)
大意: $n*m$棋盘, 初始位置$(1,1)$, 横坐标为$\frac{m+1}{2}$时可以向下走, 否则只能左右走, 每走一步花费$1$秒. 有$k$管奶, 第$i$罐位置$(r_i,c_i)$ ...
- [书籍翻译] 《JavaScript并发编程》第四章 使用Generators实现惰性计算
本文是我翻译<JavaScript Concurrency>书籍的第四章 使用Generators实现惰性计算,该书主要以Promises.Generator.Web workers等技术 ...
- Cascader 级联选择器无法赋值
问题: html: <el-cascader v-model="addform.qxvalue" :options="options" :props=&q ...