どのコードブロックが高速に実行されますか？

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 
    } 
} 

私自身は、ブラウザの開発者ツールを使用して、これをテストするだろうが、残念ながら私はプログラミングにN00Bだし、まだ開発ツールを使用する方法がわかりませんすべてうまい。どんな入力も非常に高く評価されます。

Answer 1

は常にです。可読性に優れた選択肢があり、switchステートメントを使用すると、パフォーマンス上のメリット（存在する場合でも）が限界になります。 </>演算子はおそらくネイティブコードの命令または2つであり、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 
    } 
} 

Answer 2

これはごくわずかですが、実際にはユーザーのJavascriptパーサーによって異なります。

2番目のオプションは、読みやすさに優れており、後で変更する方がはるかに簡単です。さらに、パフォーマンスに非常に関心がある場合は、2番目の文字も少ないため、サイトの読み込み速度が速くなります。