业务场景描述

  • 相信大家经常会出现这样的业务逻辑:封装一个功能(函数),在后面的业务中,会经常使用到它,但后面的大多数运算都是重复的运算,而每一次运算又都会涉及到底层的运算,这是一个非常耗性能的过程。我们可以把重复的运算结果缓存起来,如果后面的调用是重复的,那么我们直接返回缓存结果,就不要再做后面的苦力活了!比如定义一个算法用于实现算出两个数目的和,我们第一次调用时两个参数分别是3和5,当我们后面的调用如果有若干次还是调用的3和5的话,那么就没有必要每次都去做一些相同的逻辑运算了,我们可以把这两个参数相加的结果缓存起来,后面的调用直接用缓存结果返回。

  • 在一些复杂的用于向服务器请求数据的过程中,这种优化是很好的,它可以有效减少服务器的负载量、减轻服务器压力、使页面更快的呈现在用户面前。

 在js中涉及到的技术:函数是一等对象、闭包等!

  • 首先我们把缓存的原理说一下,既然是缓存,也就是说我们需要个容器把前面计算的值保存起来,遇到有用的时候直接取出来。

  • 在计算机中,要想保存一个值肯定需要一个“变量”容器。也就是说需要定义一个变量或者对象属性来保存,因为在js中,函数拥有其他数据类型的性质,比如可以设置属性、可以当做参数传递给函数、可以被返回等!我们可以很好的利用函数属性来存结果达到缓存效果的目的。

  • 同时,有时候我们需要一些效果来达到封闭变量作用域和延长变量作用周期,这时候用闭包就能达到这个效果。

DEMO

注:这里特别说明一下,因为浏览器各厂商之间的竞争等原因,目前js语言上的性能优化空间已经被浏览器引擎内部处理了,所以在代码比较简单的情况下,可以不用在意这种优化,但限较新的浏览器!我想此举主要是让大家把注意力都转移到业务逻辑上来吧,而不是在几句代码性能上纠结半天,毕竟现在js能干的事情确实很多了!下面的代码可在chrome浏览器开发者工具里面测试,发现两端代码花费时间是差不多的!!!

  1. var arr = [];
  2. for(var i = 1;i<=1000000;i++)arr.push(i);
  3. //loop1
  4. console.time("loop1")
  5. for(var i = 0;i<arr.length;i++){};
  6. console.timeEnd('loop1');
  7. //loop2
  8. console.time("loop2");
  9. for(var i = 0,l = arr.length;i<l;i++){};
  10. console.timeEnd("loop2");