前端BUG录- 因lodashjs debounce去抖优化造成的 bug

简介: 做开发其实还是要考虑一下边界问题,因为边界问题有时候会导致体验断崖式的下跌。正好前段时间遇到了个问题,今天分享一下。之前做了一个 IM 的项目,是会话列表出现的问题:进入页面时,会加载会话列表,加载数据会造成卡顿。

先说说我的逻辑:

  1. 分页拉取本地历史数据(已读消息,userid排序的20个人)


  1. 定时拉取远程数据(未读消息,最早的20条)


  1. 如果有新的消息,那么会对会话列表排序(Array.prototype.sort)。用 lodash 做了 debounced(防抖动),并且加了 [options.maxWait] ,设置 func 允许被延迟的最大值。


是不是看上数据处理都是一小块一小块的,并没什么问题?就是这么巧,因为我代码没处理边界,导致排序的算法的执行时间过长超过100ms(讲道理16ms以下才可以,这里我换一篇文章说),然后又因为加了 maxWait 导致会同步调用。


bVcHjIC.webp.jpg


https://github.com/lodash/lodash/blob/15e1557b2a97c8bbee22d873832d90ed3ba50ba7/debounce.js


对于我们普通理解上的去抖其实都是异步操作。


bVcHjIW.webp.jpg


当然最后问题还是被修复了


  1. 修改 sort 算法,改了一下 timsort,然后又改了一下插入排序。降低方法的执行时间,所以不会出现节流失效的问题。


  1. 加大 maxWait 防止密集的同步调用。


  1. 修改 Array 的长度,禁止无上限的叠加。
相关文章
|
1月前
|
前端开发 JavaScript UED
深入了解前端性能优化:提高用户体验的关键
【10月更文挑战第9天】深入了解前端性能优化:提高用户体验的关键
44 5
|
5天前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
13 3
|
14天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
35 6
|
16天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
46 7
|
12天前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
27 1
|
15天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
29 2
|
22天前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
32 3
|
21天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
18 1
|
21天前
|
缓存 前端开发 JavaScript
如何优化前端资源
如何优化前端资源
|
22天前
|
监控 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
27 2