哪个代码块执行得更快？

Question

B1

if (this.id === 'username') {
  switch (this.value.length) {
    case  0:
    case  1:
    case  2:
      // 'Username must be at least 3 characters'
      break;
    case  3:
    case  4:
    case  5:
    case  6:
    case  7:
    case  8:
    case  9:
    case 10:
    case 11:
    case 12:
    case 13:
    case 14:
    case 15:
    case 16:
    case 17:
    case 18:
    case 19:
    case 20:
      // Another if else statement
      break;
    default:
      // 'Username must be at most 20 character'
  }
}

B2

if (this.id === 'username') {
  if (this.value.length < 3) {
    // 'Username must be at least 3 characters'
  } else if (this.value.length > 20) {
    // 'Username must be at most 20 characters'
  } else {
    // Another if else statement
  }
}

我会自己使用浏览器开发工具对此进行测试，但不幸的是，我对编程一窍不通，还不知道如何很好地使用开发工具。任何输入将不胜感激。

Answer 1

它可以忽略不计，实际上取决于用户的 Javascript 解析器。

您应该使用第二个选项，因为它的可读性更好，而且以后更容易更改。此外，如果您非常关心性能，那么第二个因素就是更少的字符，这意味着您的网站加载速度会更快。

Answer 2

第二个 always 是可读性更好的选择，并且使用 switch 语句时性能优势（如果存在的话）将是微不足道的。 < / > 运算符可能是本机代码的一两条指令，我无法想象任何 switch 语句会编译成这么小的东西。

我什至懒得去测试差异；它不值得你花时间，除非你能证明那几行是你程序的瓶颈。（在那种情况下，我会非常惊讶。）

此外，如果您真的关心良好的性能实践，您可以缓存 length 并获得小的可读性胜利。

if (this.id === 'username') {
  var length = this.value.length
  if (length < 3) {
    // 'Username must be at least 3 characters'
  } else if (length > 20) {
    // 'Username must be at most 20 characters'
  } else {
    // Another if else statement
  }
}

哪个代码块执行得更快？

Which block of code will execute faster?

javascript

ecmascript-6

developer-tools

B1

B2