js Memoization 优化运行速度

项目中需要用到 大计算量 耗时的js运算。

 

Memoize 是一个优化方法 ，对耗时的递归运算，漫长的查找运算的结果进行缓存，使运行时间最小化

原理是缓存先前的结果计算值从而可以避免需要重新计算   提高运行速度的方法。

magic  先看效果

以斐波那契数组 为例

当n>40  firfox  ie 都会弹出停止脚本的提示框，浏览器进入僵死状态，ui线程被阻塞

var fibonacci =function(n) {

    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);

};

console.log(fibonacci (40))

 

著名underscore 的 Memoize  方法, 成功执行 没有僵死，ui线程没有阻塞

var fibonacci = _.memoize(function(n) {

    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);

});



document.write( fibonacci (40))

　

源码分析

 _.memoize = function(func, hasher) {

    var memoize = function(key) {

      var cache = memoize.cache;

      var address = hasher ? hasher.apply(this, arguments) : key;

      if (!_.has(cache, address)) cache[address] = func.apply(this, arguments);

      return cache[key];

    };

    memoize.cache = {};

    return memoize;

  };

　　以参数作为键进行缓存，被执行的结果按参数缓存在memo对象上，用内存空间 换cpu执行时间

 

详解  ：

Example1 :  

function square(num){

    return num*num;

}



square(10) //100

square(100)

如上所示，每次调用square方法，都会重新计算。如果这是一个递归 耗时的任务 缓存就很重要可以很好的优化执行时间。 如下所示

function square(num){

  var result = '';

  if(!square.cache[num]){ 

     console.log("Computing value...");

     result = num*num;

     square.cache[num] = result;  

  }

 

  return square.cache[num];

 

}

square.cache = {}

square(10) //第一次调用 计算结果 缓存结果

square(10) //第二次开始从缓存中返回结果。

square(20) // 如果一个新值，再次计算。

　创建一个普通的js对象，以参数作为键，缓存结果存在键值上.

 

Example2  （升级）

square的arguments，可能是数组或者json对象 

var square = function(num){

    var key = JSON.stringify(Array.prototype.slice.call(num));



    if(!square.cache[key]){

    var result={};

    //Computation

        console.log("Computing value..."); 

        result = num*num;

    square.cache[key] = result;

}



return square.cache[key];

}



square.cache = {};

　　

　　

　　

　　缓存是个很好的优化js执行速度的方法，不但可以缓存数据运算的结果，前端用到最多的是类似backbone一类mvc 前端框架，缓存视图对象的实例。