业务-页面卡顿问题总结

问题：

1、web3.1地图绘制1000个标签实时位置，每隔8~10S左右就会卡顿2S，间歇性地持续进行

2、在解决问题1之后，页面开始运行比较流畅，运行半小时后，页面逐渐卡死

定位思路：

问题1：通过chrome浏览器的performance功能，截取卡顿前后，发现JS引擎执行时间在卡顿时间段内占比很高，放大细节来看，有很多webSocket消息的接收及angular的检测；而绘制标签的频率在1S，当某段时间内有很多ws消息过来（和服务端确认过，所有标签活动状态消息在1~2S内推送完毕，可以达到千次量级，活动状态推送周期在10S），加上穿插着很多angular检测的执行，导致绘制标签的动作推迟，页面就形成了卡顿

问题2：在问题1解决之后，发现绘制页面开始运行时正常，一段时间（半小时左右）后页面逐渐卡顿，断点调试代码时，发现定时绘制标签所需要的时间慢慢大于1S，越到后面耗时越长；

一般来说，遇到此类问题第一感觉就会想到可能是内存在慢慢涨，导致指令的执行更耗时（至于为什么内存涨起来，指令执行更耗时这个解释不了，和计算机底层相关），等到内存积累到一定程度，代码任务积累到一定程度，就卡死了

顺着这个思路，发现页面上的标签低电量告警记录一直在增加，因为标签数量比较大（千级），服务端每次推送的告警数量在70左右，而且同一标签会重复推告警，造成告警记录占用内存一直再涨，把告警所占内存优化下，卡顿问题就解决了

经验：

1、和服务端交互时，WS的推送需要尽量的保持低频（不要超过10次/S），需要知道WS的接收也会引发angular的检测，如果WS频次太高或过于集中在一个时间段推送，会引发JS执行卡顿

2、后续在写业务代码时，不仅仅需要考虑功能的实现，也要督促自己从大量标签的角度考虑问题，如果有大量标签的情况，是否内存会越涨越多，是否会存在内存泄漏的现象