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

使用临时变量来保存链接的属性，而不是遍历访问整条链。