Web性能优化：理解及使用JavaScript缓存

挑战:编写一个函数返回斐波那契数列中的 n 元素，其中的序列是:

[1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, …] 

知道每个值都是前两个值的和，这个问题的递归解是:

function fibonacci(n) {  
  if (n <= 1) {  
    return 1  
  }  
  return fibonacci(n - 1) + fibonacci(n - 2)  
} 

确实简洁准确!但是，有一个问题。请注意，当 n 的值到终止递归之前，需要做大量的工作和时间，因为序列中存在对某些值的重复求值。

看看下面的图表，当我们试图计算 fib(5)时，我们注意到我们反复地尝试在不同分支的下标 0,1,2,3 处找到 Fibonacci 数，这就是所谓的冗余计算，而这正是缓存所要消除的。

function fibonacci(n, memo) {  
  memomemo = memo || {}  
  if (memo[n]) {  
    return memo[n]  
  }  
  if (n <= 1) {  
    return 1  
  }  
  return memo[n] = fibonacci(n-1, memo) + fibonacci(n-2, memo)  
} 

在上面的代码片段中，我们调整函数以接受一个可选参数 memo。我们使用 memo 对象作为缓存来存储斐波那契数列，并将其各自的索引作为键，以便在执行过程中稍后需要时检索它们。

memomemo = memo || {} 

在这里，检查是否在调用函数时将 memo 作为参数接收。如果有，则初始化它以供使用;如果没有，则将其设置为空对象。

if (memo[n]) {  
  return memo[n]  
} 

接下来，检查当前键 n 是否有缓存值，如果有，则返回其值。

和之前的解一样，我们指定了 n 小于等于 1 时的终止递归。

最后，我们递归地调用n值较小的函数，同时将缓存值(memo)传递给每个函数，以便在计算期间使用。这确保了在以前计算并缓存值时，我们不会第二次执行如此昂贵的计算。我们只是从 memo 中取回值。

注意，我们在返回缓存之前将最终结果添加到缓存中。

使用 JSPerf 测试性能

可以使用些链接来性能测试。在那里，我们运行一个测试来评估使用这两种方法执行fibonacci(20) 所需的时间。结果如下:

哇! ! !这让人很惊讶，使用缓存的 fibonacci 函数是最快的。然而，这一数字相当惊人。它执行 126,762 ops/sec，这远远大于执行 1,751 ops/sec 的纯递归解决方案，并且比较没有缓存的递归速度大约快 99%。

注:“ops/sec”表示每秒的操作次数，就是一秒钟内预计要执行的测试次数。

现在我们已经看到了缓存在函数级别上对应用程序的性能有多大的影响。这是否意味着对于应用程序中的每个昂贵函数，我们都必须创建一个修改后的变量来维护内部缓存?

不，回想一下，我们通过从函数返回函数来了解到，即使在外部执行它们，它们也会导致它们继承父函数的范围，这使得可以将某些特征和属性从封闭函数传递到返回的函数。

使用函数的方式

在下面的代码片段中，我们创建了一个高阶的函数 memoizer。有了这个函数，将能够轻松地将缓存应用到任何函数。

function memoizer(fun) {  
  let cache = {}  
  return function (n) {  
    if (cache[n] != undefined) {  
      return cache[n]  
    } else {  
      let result = fun(n)  
      cache[n] = result 
       return result  
    }  
  }  
} 

上面，我们简单地创建一个名为 memoizer 的新函数，它接受将函数 fun 作为参数进行缓存。在函数中，我们创建一个缓存对象来存储函数执行的结果，以便将来使用。

从 memoizer 函数中，我们返回一个新函数，根据上面讨论的闭包原则，这个函数无论在哪里执行都可以访问 cache。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!