js程式碼優化 提高執行效能

1if-else 排序
在 React元件中，這種寫法還是很常見的。

export default function UserList(props) {
  const { users } = props

  if (users.length) {
    return <UserList />
  }

  return <EmptyUserList />
}

在這裡，我們在沒有使用者時渲染否則渲染。 有大部分人認為，我們首先處理所有空的的情況，然後再處理有資料的情況。 對於任何讀過它的人來說都更清楚，而且效率更高。 也就是說，以下程式碼比上一個程式碼更有效。

export default function UserList(props) {
const { users } = props

  if (!users.length) {
    return <EmptyUserList />
  }

  // some resource intensive operation
  return <UserList />
}

當然 users.length 一直有值的話，就使用第一種情況。

2執行時的求值的數量越少，效能就越好。

// maxWidth - (margin * 2)
const maxWidth = '980'
// minWidth - (margin * 2)
const minWidth = '80'
const margin = '10'
getWidth = () => ({
  maxWidth,
  minWidth,
})

3 延遲
延遲演算法將計算延遲到需要執行時才執行，然後生成結果。

const someFn = () => {
  doSomeOperation()
  return () => {
    doExpensiveOperation()
  }
}

const t = someArray.filter((x) => checkSomeCondition(x)).map((x) => someFn(x))

// 現在，如果有需要在執行
t.map((x) => t())

最快的程式碼是未執行的程式碼，所以儘量延遲執行。

4 JavaScript 使用原型繼承，JS 中所有物件都是Object的例項。

MDN說：

嘗試訪問物件的屬性時，不僅會在物件上搜尋該屬性，還會在物件的原型，原型的原型等上搜尋該屬性，直到找到匹配屬性名或原型鏈的末端。

對於每個屬性，JavaScript引擎都必須遍歷整個物件鏈，直到找到匹配項。 如果使用不當，這會佔用大量資源，並影響應用程式的效能。

所以不要這樣：

const name = userResponse.data.user.firstname + userResponse.data.user.lastname

而是這樣做：

const user = userResponse.data.user
const name = user.firstname + user.lastname

使用臨時變數來儲存連結的屬性，而不是遍歷訪問整條鏈。