第135期：一次不算优化的优化
背景
前几天基于高德地图的API写的那个功能上线后，上周使用部门反馈说热力图在切换的时候整个地图会非常卡顿，严重时候会把浏览器卡死。
上周手里有别的开发任务，所以这两天对这个问题简单做了一个处理，这里简单做下记录。
问题分析
最开始的时候感觉是不是代码有的地方发生了内存泄露，内存释放不掉，每次切换的时候都会常驻内存，导致浏览器卡死？
但是排查了一遍代码好像也没什么大问题，但是点开任务管理器进行观察，点击每次切换热力图的时候，热力图对应的浏览器页签的内存还会不断的上涨。
于是又排查了一下代码，发现地图以及热力图的数据被定义成了一个双向绑定的变量。同时这个热力图数据每次大概会有5万到6万条左右，这个还只是个基本的数据量，后期可能会更多。
这5万到6万条数据常驻内存，每次变化的时候都要遍历遍一遍，有可能会是导致内存上升的一个主要原因。
于是，改了一下代码，将和页面交互关系不大的地图以及热力图的数据改成了普通变量，这样每次切换时，先将原来的地图实例销毁，移除热力图的图层，重新进行绘制。
这么改了之后，发现效果还是不太理想，于是用浏览器的性能分析工具看下到底是哪里在消耗内存：
然后发现，地图内部的逻辑在性能消耗上占了有68%左右。好吧，对地图内部的逻辑进行优化就超出了我的能力范围之外了，那么只能从别的地方入手，看看能不能做些其他的优化呢？
进一步排查代码，发现点击切换的时候，没做防抖处理，有些人习惯双击，这时候就会发起两次请求，那么把防抖加上, 保证每次点击只触发一次请求。
然后又发现，当触发了一次请求后，如果在这个请求结果回来之前，又点击了一次切换，这时候可能出现的问题有两个：一是数据量过大的时候，有时候会造成请求超时。二是，因为两个请求都是异步请求，那么可能第一次请求结果返回的时候，第二次请求的结果还没返回，导致渲染的数据不准确。
针对这个问题，解决方案是，在每次发起请求之前，将页面上挂起的请求全部取消掉，保证每次获取的最新的数据。
关于如何取消前次请求，axios 文档中有非常详细的描述，这里就不做过多的解释了。
最后一处修改的地方是，原先绘制地图的时候，没做loading处理，地图始终在页面上存在，只是切换的时候，更新了热力图的数据。
那么完善一下这个交互，每次发起请求之前，销毁地图和热力图图层，增加loading效果，loading结束后，重新绘制地图和热力图。
结果
在做了这些处理之后，发布到测试环境让业务部门进行使用反馈，反馈的结果是卡顿的现象消除了，同时体验上更加友好。
收获
通过这件事情，我们可以得到下面几点的收获：
一是定义为双向绑定的数据，如果我们不去手动的销毁它，它就会常驻内存，一旦这个数据量非常大，那么必然会消耗更多的内存。
二是双向绑定的数据通常是和页面有强交互的时候才需要定义为双向绑定，如果这个数据和页面没有很强的交互，那么我们需要考虑是否有必要将它定义为双向绑定的变量，因为一旦它的量较大，可能会出现意想不到的问题。
三是在处理页面交互的时候，比如常见的点击事件，需要考虑是否需要做防抖处理，每次发起请求时，需要考虑是否需要取消挂起的请求。
最后是，交互上需要用loading效果的地方，最好都加上这个效果，尽量把用户体验做的更好一些。
先到这里，谢谢～
最后
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
第135期：一次不算优化的优化相关推荐
- 离散ziggurat算法python实现_一种基于LWE采样算法的实现与优化
一种基于 LWE 采样算法的实现与优化 王柯翔,黎 琳,彭双和 [摘 要] 基于带错误学习问题 (Learning With Errors , LWE) 构造的密码体制 能够抵御量子攻击,它的应用效率 ...
- 快速寻找勾股数算法的实现和优化
快速寻找勾股数算法的实现和优化 深夜隔壁寝室的老哥来访,说他用python实现的寻找2000以内勾股数的算法跑了20秒钟.邀请我一起讨论优化思路,完成后记录如下: 朴素探数法寻找勾股数 首先实现那个需 ...
- 【老卫搞机】135期：华为开发者联盟社区2022年牛人之星奖品开箱！
首先祝大家兔年大吉,身体安康,钱兔似锦!今天咱们来开箱一件特殊的奖品,来自华为开发者联盟社区的新年祝福--2022年牛人之星. 华为有钱!惯例用的是顺丰快递,各位看一下这里面是有很多件的 有这两件.第 ...
- java项目-第135期ssm台球厅收费系统-java毕业设计_计算机毕设
java项目-第135期ssm台球厅收费系统-毕业设计ssm项目 [源码请到资源专栏下载] 今天分享的项目是<台球厅俱乐部收费系统> 该项目分为两个角色:会员.管理员角色. 管理员拥有最大 ...
- 有关mysql的清理与优化_mysql优化点整理
优化sql一般步骤: 1.通过show (session 或者 global) status 来查看( 当前连接 或者 数据库上次开机以来 )的服务器状态信息,默认是session 例如: show ...
- Python实现BOA蝴蝶优化算法优化支持向量机分类模型(SVC算法)项目实战
说明:这是一个机器学习实战项目(附带数据+代码+文档+视频讲解),如需数据+代码+文档+视频讲解可以直接到文章最后获取. 1.项目背景 蝴蝶优化算法(butterfly optimization al ...
- Python实现BOA蝴蝶优化算法优化支持向量机回归模型(SVR算法)项目实战
说明:这是一个机器学习实战项目(附带数据+代码+文档+视频讲解),如需数据+代码+文档+视频讲解可以直接到文章最后获取. 1.项目背景 蝴蝶优化算法(butterfly optimization al ...
- [Nginx] – 安全优化 – 配置文件优化 [二]
[Nginx] – 安全优化 – 配置文件优化 [二] Nginx 修改时间:2016年12月26日 首先在此感谢下我的老师–老男孩专家拥有16年一线实战经验,为我们运维班28期所有成员的耐心讲解, ...
- Android-性能优化-UI优化
Android-性能优化-UI优化 相关系列 Android 性能优化-UI优化 Android 性能优化-内存优化 概述 Android 应用的卡顿,丢帧等,这些影响用户体验的因素绝大部分都与 16 ...
- 【深度学习】小白学深度学习：参数优化与优化器原理
深度学习的「参数优化」 深度学习模型的优化过程是指调整模型的参数以尽量减小预测误差的过程.下面是深度学习模型优化的基本流程: 确定损失函数:衡量模型预测输出和实际输出之间误差的函数. 梯度反向传播:用 ...
最新文章
- 硅谷精英的薪水大揭秘,你和他们差距有多大?
- ANDROID ASSET STUDIO
- vue的activated和deactivated生命周期
- Dropping tests
- dispatch_sync
- UVA621 Secret Research【水题】
- robot frame基础知识--变量
- idea中git回退远程仓库版本
- 【教程】强烈推荐一款超级贴图生成软件——CrazyBump
- 移动端证件识别，支持离线识别
- 我来告诉你，一个草根程序员如何进入BAT
- 离散数学-----自然数系统
- 强烈推荐几个超厉害的公众号！
- 三角波的傅里叶变换对_《傅里叶光学（一）》 复数、特殊函数和冲激函数
- 怎么就那么多SlectObject和DeleteObject···········
- 【SQL Server】grant, revoke, deny介绍及相关问题
- Field-Oriented Control (FOC) 矢量控制 磁场定向控制
- m基于MATLAB的上行链路MIMO关键技术的研究与性能分析
- c语言中编译解释,C语言既可以编译执行又可以解释执行吗? 编译执行怎么解释？ 解释执行又怎么解释？...
- 中央空调安装html5模板,中央空调检修口—中央空调检修口安装须知