使用键与条件语句获取值

Question

我正在尝试优化滑块的性能，该滑块具有许多在滑动/滑动时执行的条件语句。

哪种方式性能更好？

1- 使用关键条件

访问准备好的对象

const controller = (config) => {
    top: {
      positionVertical: false,
      orderAfter: false,
      width: '100%',
      height: config.height + 'px',
    },
    bottom: {
      positionVertical: false,
      orderAfter: true,
      width: '100%',
      height: config.height + 'px',
    },
    left: {
      positionVertical: true,
      orderAfter: false,
      width: config.width + 'px',
      height: '100%'
    },
    right: {
      positionVertical: true,
      orderAfter: true,
      width: config.width + 'px',
      height: '100%'
    }
};

this.gallery.sub$.pipe(
  map(({state, config}) => this.controller(config)[config.position])
);

2- 使用标准的 if-else 或 switch case 语句

this.gallery.sub$.pipe(
  map(({state, config}) => {
    switch(config.position) {
       case 'top': return {
         positionVertical: false,
         orderAfter: false,
         width: '100%',
         height: config.height + 'px',
       }
       case 'left': return {
         positionVertical: true,
         orderAfter: false,
         width: config.width + 'px',
         height: '100%'
       }
       case 'right': return {
         positionVertical: true,
         orderAfter: true,
         width: config.width + 'px',
         height: '100%'
       }
       default: return {
         positionVertical: false,
         orderAfter: true,
         width: '100%',
         height: config.height + 'px',
      }
    }
  })
);

感谢额外的解释

Answer 1

太简单了，我做个测试

Here is two kind different functions

Test controller,we loop 10000000 times

Test controller1,same loop times

first function is 288ms

second function is 159ms

Answer 2

您很可能永远看不到代码的两个版本之间的任何性能差异。根据 Yuan 的测试结果，即使您的滑块中有 10,000 个条目，也不应该有任何明显的差异。我假设这些测试是在桌面上进行的 CPU，但即使在移动设备上 CPU 也不会有太大区别。

也就是说，根据第一原则很容易判断哪个版本可能更快：第二个，只是因为它做的工作少得多。 Yuan 的测试在 10,000,000 个条目的极端情况下证实了这一点（尽管我没有查看详细的测试设置）。

为什么第二个更快？看第一个。对于每个条目，它执行以下操作：

计算所有四种情况的所有值并为每种情况创建一个对象。
构造一个包含所有四个内部对象的新外部对象。
根据 config.position 选择其中一个内部对象并丢弃其余对象。

第二个版本就是这样做的：

使用 config.position 到 select 创建四种对象中的哪一种。
只构造一个对象而不构造其他三个。
没有第3步

按理说，计算和构建四个不同的对象，加上一个包装器对象来保存它们，比只计算和构建一个这些对象需要更长的时间。

在风格上，我会在第二个版本中改变一件事。 default: 案例应该是 case 'bottom': 以匹配其余部分并使意图更清楚。

使用键与条件语句获取值

Get the value using a key vs conditional statements

javascript

performance

conditional

typescript

ecmascript-6