더 빨리 실행할 수있는 코드 블록은 무엇입니까?

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 문을 사용하면 성능 이점 (심지어 존재하는 경우)이 한계가됩니다. </> 연산자는 아마도 네이티브 코드의 명령어이거나 두 가지 일 수 있습니다. 어떤 switch 문도 그렇게 작게 컴파일 될 것이라고는 상상할 수 없습니다.

차이점을 테스트하는 데 신경 쓰지 않을 것입니다. 그 몇 줄이 프로그램에서 병목 현상이 있음을 증명할 수 없다면 시간 가치가 없어야합니다. (그럴 경우 대단히 놀랄 것입니다.)

또한 실제로 성능이 좋으면 length을 캐싱하고 작은 가독성을 얻을 수 있습니다. 당신이 개발 도구를 사용하지 않은 "n00b"의 많은 경우

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 파서에 따라 다릅니다.

두 번째 옵션을 사용하는 것이 좋지만 가독성이 뛰어나고 나중에 변경하는 것이 훨씬 쉽습니다. 또한 성능에 크게 신경 쓰면 두 번째 문자 수가 적어 사이트로드 속도가 빨라집니다.