고성능 JavaScript 루프문 및 조건문_javascript 기술

1. 루프문
우리 모두 알고 있듯이 일반적으로 사용되는 루프 문에는 for, while, do-while, for-in 및 forEach가 있습니다. for-in과 forEach의 성능이 약간 낮다는 점을 제외하면 처음 세 가지를 선택하는 것은 일반적으로 성능 고려 사항보다는 요구 사항에 더 기초를 두는 것입니다. 오늘 우리는 각각의 성능을 테스트하고 여전히 가장 극단적인 성능을 발휘할 수 있음을 알려 드리겠습니다. 어떤 최적화를 수행할 수 있습니까?

먼저 for-in과 forEach가 다른 것보다 느린 이유에 대해 이야기해 보겠습니다. for-in은 일반적으로 객체 속성 이름을 탐색하는 데 사용됩니다. 각 반복 작업은 인스턴스 자체의 속성과 프로토타입 체인의 속성을 동시에 검색하기 때문에 효율성이 확실히 낮습니다. forEach는 함수 기반 반복입니다. (특별한 주의가 필요합니다.) 단, IE의 모든 버전에서는 지원하지 않습니다. 필요한 경우 JQuery와 같은 라이브러리를 사용할 수 있습니다.) 각 배열 항목에 대해 외부 메소드를 호출함으로써 발생하는 오버헤드가 속도가 느린 주요 원인입니다.

그럼 각 반복에서 for, while 및 do-while do가 무엇인지 살펴보겠습니다.

var length = items.length;
for(var i = 0; i < length; i++)
 process(items[i]);

var j = 0;
while(j < length) 
 process(items[j++]);

var k = 0;
do {
 process(items[k++]);
} while(k < length);

위의 각 루프에서 루프 본문이 실행될 때마다 이 작업이 발생합니다.

• 대조조건(i
• 조건 결과가 true인지 여부를 제어하는 ​​비교(i < length === true)
• 한 번의 자동 증가 연산(i++)
• 하나의 배열 검색(항목[i])
• 1개의 함수 호출 과정(항목[i])

배열 순서를 반대로 하여 루프 성능을 향상할 수 있습니다.

for(var i = items.length; i--; )
 process(items[i]);

var j = items.length;
while(j--) 
 process(items[j]);

var k = items.length - 1;
do {
 process(items[k]);
} while(k--);

이 예에서는 역순 루프가 사용되며 빼기 연산이 루프 조건에 통합됩니다. 이제 각 제어 조건은 단순히 0과 비교됩니다. 제어 조건은 참값과 비교됩니다. 0이 아닌 숫자는 자동으로 참으로 변환되며, 0값은 거짓과 동일합니다. 실제로 제어 조건은 두 번의 비교(반복 횟수가 전체보다 적습니까? 참입니까?)에서 하나의 비교(참입니까?)로 축소됩니다. 이는 두 번의 비교에서 반복당 하나로 줄어들어 루프 속도가 더욱 향상됩니다.

성능 테스트:

그럼 정말 그런가요? 실제 돈은 브라우저 확인을 두려워하지 않습니다. 테스트 코드는 매우 간단하며 8가지 상황에 대한 8가지 기능을 캡슐화합니다(프로필 정보는 타이머 없이 Firefox에서 인쇄할 수 없으며 이유는 알 수 없음).

// init array
var a = [];
var length = 10;
for(var i = 0; i < length; i++)
 a[i] = 1;

function for_in() {
 var sum = 0;
 for(var i in a) 
  sum += a[i];
}

function for_each() {
 var sum = 0;
 a.forEach(function(value, index, array) {
  sum += value;
 });
}

function for_normal() {
 var sum = 0;
 for(var i = 0; i < length; i++)
  sum += a[i];
}

function for_reverse() {
 var sum = 0;
 for(var i = length; i--; )
  sum += a[i];
}

function while_normal() {
 var sum = 0;
 var i = 0;
 while(i < length) 
  sum += a[i++];
}

function while_reverse() {
 var sum = 0;
 var i = length;
 while(i--) 
  sum += a[i];
}

function do_while_normal() {
 var sum = 0;
 var i = 0;
 do {
  sum += a[i++];
 } while(i < length);
}

function do_while_reverse() {
 var sum = 0;
 var i = length - 1;
 do {
  sum += a[i];
 } while(i--);
}

setTimeout(function() {
 console.profile();
 for_in();
 for_each();
 for_normal();　　
 for_reverse();
 while_normal();
 while_reverse();
 do_while_normal();
 do_while_reverse();
 console.profileEnd();
}, 1000);

배열 길이가 100일 때 Firefox에서의 결과는 실제로 예상과 유사하다는 것을 발견했습니다. for-each와 for-in은 비효율적이며 역순은 순방향보다 약간 더 효율적입니다. (크롬 아래 프로필은 시간이 너무 짧아서 표시되지 않습니다)

데이터량이 100만개에 도달하면 Firefox와 Chrome에서의 결과는 예상대로이지만 약간의 차이가 있습니다. ff에서 for-in의 성능은 for-each보다 좋지만 chrome에서 for-in의 성능이 좋지 않아 경고가 직접 발생합니다. 역반복 성능은 약간 향상되었으나, 향상 정도가 크지 않고 코드 가독성도 떨어집니다.

요약:

• 역반복은 실제로 코드 성능을 약간 향상시킬 수 있지만 극단적인 성능 최적화를 추구하지 않는 한 코드 가독성을 희생합니다.
• 일반 루프를 사용하여 배열을 탐색할 수 있다면 for-in 및 for-each를 사용하지 마세요

2. 조건문
일반적인 조건문에는 if-else와 switch-case가 포함됩니다. 그러면 언제 if-else를 사용하고 언제 switch-case 문을 사용합니까?

먼저 간단한 if-else 문의 코드를 살펴보겠습니다.

if (value == 0){
  return result0;
} else if (value == 1){
  return result1;
} else if (value == 2){
  return result2;
} else if (value == 3){
  return result3;
} else if (value == 4){
  return result4;
} else if (value == 5){
  return result5;
} else if (value == 6){
  return result6;
} else if (value == 7){
  return result7;
} else if (value == 8){
  return result8;
} else if (value == 9){
  return result9;
} else {
  return result10;
}

최악의 경우(값=10) 올바른 결과를 반환하기 전에 10번의 판단을 내려야 할 수도 있습니다. 그러면 이 코드를 어떻게 최적화합니까? 확실한 최적화 전략은 가장 가능성이 높은 값을 미리 판단하는 것입니다. 예를 들어 값이 5 또는 10과 같을 가능성이 가장 높은 다음 이 두 가지 판단을 미리 수행하는 것입니다. 그러나 일반적으로 우리는 (가장 가능성이 높은 선택) 알지 못합니다. 이 경우 성능 최적화를 위해 이진 트리 검색 전략을 채택할 수 있습니다.

if (value < 6){
  if (value < 3){
    if (value == 0){
      return result0;
    } else if (value == 1){
      return result1;
    } else {
      return result2;
    }
  } else {
    if (value == 3){
      return result3;
    } else if (value == 4){
      return result4;
    } else {
      return result5;
    }
  }
} else {
  if (value < 8){
    if (value == 6){
      return result6;
    } else {
      return result7;
    }
  } else {
    if (value == 8){
      return result8;
    } else if (value == 9){
      return result9;
    } else {
      return result10;
    }
  }
}

这样优化后我们最多进行4次判断即可，大大提高了代码的性能。这样的优化思想有点类似二分查找，和二分查找相似的是，只有value值是连续的数字时才能进行这样的优化。但是代码这样写的话不利于维护，如果要增加一个条件，或者多个条件，就要重写很多代码，这时switch-case语句就有了用武之地。

将以上代码用switch-case语句重写：

switch(value){
  case 0:
    return result0;
  case 1:
    return result1;
  case 2:
    return result2;
  case 3:
    return result3;
  case 4:
    return result4;
  case 5:
    return result5;
  case 6:
    return result6;
  case 7:
    return result7;
  case 8:
    return result8;
  case 9:
    return result9;
  default:
    return result10;
}

swtich-case语句让代码显得可读性更强，而且swtich-case语句还有一个好处是如果多个value值返回同一个结果，就不用重写return那部分的代码。一般来说，当case数达到一定数量时，swtich-case语句的效率是比if-else高的，因为switch-case采用了branch table（分支表）索引来进行优化，当然各浏览器的优化程度也不一样。

除了if-else和swtich-case外，我们还可以采用查找表。

var results = [result0, result1, result2, result3, result4, result5, result6, result7, result8, result9, result10];

//return the correct result
return results[value];

当数据量很大的时候，查找表的效率通常要比if-else语句和swtich-case语句高，查找表能用数字和字符串作为索引，而如果是字符串的情况下，最好用对象来代替数组。当然查找表的使用是有局限性的，每个case对应的结果只能是一个取值而不能是一系列的操作。

小结：

• 当只有两个case或者case的value取值是一段连续的数字的时候，我们可以选择if-else语句
• 当有3~10个case数并且case的value取值非线性的时候，我们可以选择switch-case语句
• 当case数达到10个以上并且每次的结果只是一个取值而不是额外的JavaScript语句的时候，我们可以选择查找表

以上就是本文的全部内容，希望对大家的学习有所帮助。