『翻譯』一些JavaScript優化的細節

FREAKFILTH發表於2017-02-13
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;
}複製程式碼

優化後的版本：

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也有它的一些優勢。

喜歡本文的朋友可以關注我的微信公眾號，不定期推送一些好文。

『翻譯』一些JavaScript優化的細節

本文由Rockjins Blog翻譯，轉載請與譯者聯絡。否則將追究法律責任。

相關文章