Question

我在一个反应应用程序中有一段相当时间关键的代码，可以在表单中的所有用户击键上运行。它一般没有性能问题，但我正在考虑对它进行一些优化，并对for (let k in obj)和Object.keys(obj).reduce之间的performance differences感到有些惊讶。

我认为设置函数调用堆栈等在JS中会很昂贵，但是以下例程的功能版本将程序性的版本吹出水面（完整的数量级！）。

以下是不同的版本：

程序

const generateProps = (fields, source, start) => {
  if (!fields) return start
  let finish = {...start}
  for (let k of Object.keys(fields)) {
    const fld = fields[k]
    if (fld instanceof Array) {
      if (fld.length === 0) continue
      // Handle an array of scalars (e.g. phoneNumbers)
      if (fld[0].hasOwnProperty('value')) {
        let sf = {}
        for (let i = 0; i < fld.length; i++) {
          sf[i] = fld[i]
        }
        finish = generateProps(sf, source[k], finish)
      // Handle an array of fields (e.g. addresses)
      } else {
        for (let i = 0; i < fld.length; i++) {
          finish = generateProps(fld[i], source[k][i], finish)
        }
      }
    } else {
      finish = {
        hasError: fields[k].hasError || fields[k].value === '' || finish.hasError,
        isEditing: fields[k].editing || finish.isEditing,
        unchanged: (!fields[k].isNew && fields[k].value === source[k]) && finish.unchanged,
        hasNew: fields[k].isNew || finish.hasNew
      }
    }
  }
  return finish
}

功能

const generateProps = (fields, source, start) => {
  if (!fields) return start
  const keys = Object.keys(fields)
  return keys.reduce((props, k) => {
    const fld = fields[k]
    if (fld instanceof Array) {
      if (fld.length === 0) return props
      // Handle an array of scalars (e.g. phoneNumbers)
      if (fld[0].hasOwnProperty('value')) return generateProps(fld.reduce((sf, f, i) => {sf[i] = f; return sf}, {}), source[k], props)
      // Handle an array of fields (e.g. addresses)
      return fld.reduce((subp, f, i) => generateProps(f, source[k][i], subp), props)
    }
    return {
      hasError: fields[k].hasError || fields[k].value === '' || props.hasError,
      isEditing: fields[k].editing || props.isEditing,
      unchanged: (!fields[k].isNew && fields[k].value === source[k]) && props.unchanged,
      hasNew: fields[k].isNew || props.hasNew
    }
  }, start)
}

以下是jperf results

正如您在运行测试时所看到的那样，程序版本比功能版本慢近50％。我很想知道为什么会出现如此明显的差异。

Answer 1

好的，我发现了一个关键的区别！功能版本正在改变start（我假设reduce会创建一个副本，来自ramdajs背景），而程序正在创建一个副本。如果我将前reduce次呼叫的最后一个参数更改为{...start}，那么它们就是偶数。

这让我想知道......为什么对象传播这个慢？

程序与功能Javascript

1 个答案: