setData 性能问题,一次性设置几百条数据,大小 400kb 以上,可有性能优化方案?

微信问答 文章 2021-12-02 10:20 1917 0 全屏看文

AI助手支持GPT4.0

setData 性能问题,一次性设置几百条数据,大小 400kb 以上,可有性能优化方案?SetData performance problem, set hundreds of data at a time, the size is more than 400kb, is there a performance optimization plan?

setData 性能问题,一次性设置几百条数据,大小 400kb 以上,可有性能优化方案?

客户购物车商品数据,可能会出现几百条商品数据,数据大小经 JSON.stringify 后插件 400 kb 左右。

这个时候 setData 到视图层渲染会很卡,会造成2秒左右的白屏。

问题明确表示数据不能做分页,也就是说接口几百条数据是一次性返回的。

我的临时方案是:先把数据截取前10条 setData ,解决白屏问题,然后 setTimeout 50毫秒后,再把整体数据 setData 赋值过。

上面方案白屏问题是解决了,但是会出现先加载的 10 条数据,这个时候去滑动屏幕也是有个一两秒滑不动(卡住,因为 后面一个 setData 在赋值所有数据)。

我看了下 setData 也没有一个 可以 push 的功能,本想循环拆分多次 setData 。

请问大家有没有类似经验或更好的方案,万分感谢!!!

There may be hundreds of item data in the customer's shopping cart, and the data size is about 400 KB after json.stringify. SetData is too laggy to view layer at this time, which will cause white screen in about 2 seconds. The problem clearly indicates that the data cannot be paged, that is, hundreds of data on the interface are returned at one time. My temporary solution is to intercept the first 10 SetData to solve the white screen problem, and then assign the overall data SetData after setTimeout for 50 milliseconds. The white screen problem in the above scheme is solved, but there will be 10 pieces of data loaded first. At this time, when sliding the screen, it will not slide for a second or two (it is stuck because the next SetData is assigning all data). I saw that SetData does not have a push function. I wanted to split SetData several times in a loop. Do you have any similar experience or better scheme? Thank you very much!!!

鍥炵瓟锛�

xxKing:

这个有两个瓶颈吧,一个是网络请求的时间较长,一个是调用setData渲染的时间较长。

"问题明确表示数据不能做分页" 这个其实也并没有那边明确,查出来后后端切片返回并没有很高的成本

其次如果数据上不好处理,那就做前端分页好了,能适当优化setData渲染的效率

圣殿骑士:

主流的做法是连续加载更多的“分页加载”

但是你这个数据量太大了,所以建议你 分段加载,并且不连续,比如第一页是1-100,用户点击后,当前是101-200,而不是1-200

蒲硕:可不可以分段“一次性”加载,把 setData 放在循环里面,数据每20个分一组,往里面加。但是有个问题,我不知道 setData 对于已经在里面的数据会不会有缓存的概念,如果没有缓存也是白费。
蒲硕:setData 没发对已有的元素 数组进行 push,它只能在 setData 之前 做好 push 操作,然后一次性 setData 给到视图层渲染,感觉也是不对的
tomheng:

分页加载啊

-EOF-

AI助手支持GPT4.0