共计 665 个字符,预计需要花费 2 分钟才能阅读完成。
做开发其实还是要考虑一下 边界问题 ,因为边界问题有时候会 导致体验断崖式的上涨。
正好前段时间遇到了个问题,明天分享一下。之前做了一个 IM 的我的项目,是会话列表呈现的问题:进入页面时,会加载会话列表,加载数据会造成卡顿。
先说说我的逻辑:
- 分页 拉取本地历史数据(已读音讯,userid 排序的 20 集体)
- 定时 拉取近程数据(未读音讯,最早的 20 条)
- 如果有新的音讯,那么会 对会话列表排序(Array.prototype.sort)。用 lodash 做了 debounced(防抖动),并且加了
[options.maxWait]
,设置func
容许被提早的最大值。
是不是看上数据处理都是 一小块一小块的 ,并没什么问题?就是这么巧, 因为我代码没解决边界,导致排序的算法的执行工夫过长超过 100ms(讲道理 16ms 以下才能够,这里我换一篇文章说),而后又因为加了 maxWait 导致会同步调用。
https://github.com/lodash/lodash/blob/15e1557b2a97c8bbee22d873832d90ed3ba50ba7/debounce.js
对于咱们一般了解上的去抖其实都是异步操作。
当然最初问题还是被修复了
- 批改 sort 算法,改了一下 timsort,而后又改了一下插入排序。升高办法的执行工夫,所以不会呈现节流生效的问题。
- 加大 maxWait 避免密集的同步调用。
- 批改 Array 的长度,禁止无下限的叠加。
微信公众号:前端 linong
欢送大家关注我的公众号。有疑难也能够加我的微信前端交换群。
参考资料
- 聊聊 lodash 的 debounce 实现
正文完
发表至: javascript
2020-10-16