js基本性能优化

首先，跟各位朋友说声抱歉，时隔那么久才决定写上这一篇推文。最近工作可以说是十分繁忙，甚至上个星期连假期都没得休息。以后除非需要，会提前说声，不然还是会每星期更文的。 

这一个月来，我被安排去完成一项大的模块任务，运用qunee拓扑图组件以及echarts图形库来完成。刚开始时是挺兴奋的，居然有这种业务场景可以学习，顶着热情去完成自己的工作，然而，在进行bvt时，却出现了很多bug，这给我带来特别大的教训。而这次就来总结下其中之一，基本性能优化。 
对于学习前端的我们来讲，什么减少http请求呀，代码压缩呀等等百度搜索一大堆，可是呢，在应用场景时，我们却很容易忽略一些基础的性能问题，这带来的后果便是整个页面的性能特别卡，体验特别不好。而解决这类问题的方法便有一下几种。 
1.函数节流（throttle） 
预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。 
这是百度搜索的解说，简单的来讲，就是在第一次执行fn后，在wait ms后再继续执行，而ms期间的所有重复操作会抛弃。也就是如果有重复触发时，每隔ms后会触发一次。 

我在写一个拖拽对象的功能时，刚开始使用的是qunee库自带的ondrag方法来实现，业务场景是当拖拽对象到边上时触发警告提示。但在重复执行拖拽到顶部的操作时会产生大量的提示弹窗，会造成很不友好的体验。后来在我导师的指导下，实现了throttle的节流请求。 

利用lodash库里的throttle方法，实现对用户进行每n秒执行一次fn 
2.函数节流（debounce） 
当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。也就是说，第一次触发后，进行倒计wait毫秒，如果倒计时过程中有其他触发，则重置倒计时；否则执行fn。 

在实现搜索联想功能的过程中，利用axios+keypress来实现，用户输入值进行验证的场景。然后，如果一直输入则会进行多次请求，这种情况会造成频繁触发请求，导致页面性能卡顿。因此，运用debounce来实现去抖请求。 

通过对lodash库的debounce方法赋给searchFunc变量，当用户进行验证输入时，将会调用changeKey方法，进行数据的请求。

3.取消未完成请求 

在实现流量线的描绘后，点击每条流量线将会发起请求，而如果当请求未完成时，多次请求其他流量线，如果不处理这些未完成的请求时，将会造成请求超时的场景。因此，可以利用axios的cancelToken来处理。 

根据这个月来的工作成果，总的来讲还是学到了很多东西，如果大家有什么看法可以留言哈~