『翻译』一些 JavaScript 优化的细节

Read the original

前言

优化客户端JavaScript代码常常是不值得的，因为这会失去代码可读性。如果你的APP运行缓慢，你可以考虑是否能优化请求，减少对DOM的操作，尽量少的操local storage，或者牺牲其它的来换取性能。几乎没有足够的数据认为客户端需要让代码同步运行速度更快。我认为接下来的代码十分具有可读性，如果你也需要，为什么不使用它呢？

递归尾调用(Recursive tail calls)

在下面例子中，函数每次执行都会创建一个新的栈(维持新添加的环境)。所以，如果参数x:5000，那就会创建5000个栈。

function foo(x) {
  if (x < 0) {
    return 1;
  }
  return 1 + foo(x-1);
}

如果使用一个累加数，就不会有新添加的环境需要被维持，所以返回的栈可以代替当前函数的栈。

function foo(x, accumulated) {
  if (x < 0) {
    return 1;
  }
  return foo(x-1, accumulated + 1);
}

使用逻辑表达式

与C语言不同，在JavaScript中逻辑表达式可以用来做操作运算，而不只是判断真假。这意味着我们可以写出像下面一样简单的代码：

function foo(x) {
  if (!x) {
    return null;
  }
  return x.y;
}

优化后的版本：

1
2
3

function foo(x) {
  return x && x.y;
}

散列法 > 迭代

switch语句可以让返回的数据在结构中重现。但通常，我们只需要查找和比较一个文件，使用散列法会比迭代快很多。

function iterating(action) {
  switch (action.type) {
    case 'a':
      // do something with action.data
      ...
      return;
    case ...
    case 'z':
      ...
      return;
    default:
      return;
  }
}
iterating({type: 'z', data: 'asdf'});

迭代26个元素。

const lookupTable = {
  'a': (data) => {...},
  ...
  'z': (data) => {...}
}
function hashing(action) {
  const handler = lookupTable[action.type];
  if (handler) {
    return handler(action.data);
  }
}

一个比较和一个查找。

当然，这适用于任何可迭代的元素(arrays,strings,etc)，但switch也有它的一些优势。

本文作者：余震（Freak）
本文出处：Rockjins Blog
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 CN许可协议。转载请注明出处！