결과적으로 JavaScript의 정렬 주기 중 가장 빠른 것은 무엇입니까?

수조Array를 중복 처리할 때 검증for문, while문, for...of문, forEach문 중 어느 것이 가장 빠른가.
검증의 이유로 일본에서 실행속도를 검증한 글 중 가장 빠른for 글을 많이 볼 수 있었다.예를 들면 다음과 같습니다.

[2021년 버전] 브라우저 분류!JavaScript로 반복하면 뭐가 제일 빠른가요?

JavaScript의 for 속도가 의외의 결과입니다. 공유해 보세요.

https://www.creativevillage.ne.jp/72411

이 기사들은 2021년 12월 5일 현재 순환 비교에서 일본판 구글 검색의 상위권에 있다.
그러나 컴파일러 언어는 잠시 접어두고 해석기 언어에서 반드시 추가 문자로 배열된 요소for에 접근해야 하는 문장이 빨라 직감적으로 받아들일 수 없다.또한 성능 측정 사이트MeasureThat.net에서 forEach가 더 빠른 결과를 얻었다.
어떤 방법으로든 좋아하는 것을 알면 되지만, 속도가 요구되는 프로그램 라이브러리를 개발하는 상황에서 순환이 반복되는 경우도 많아 조금 더 속도를 내려고 한다.
나는 내가 받아들일 수 있는 형식으로 검증하고 싶다.

운영 환경

이번 검증에서는 실행 환경에 대해 상세하게 분리하여 측정하지 않았다.서버, PC, 스마트폰, 어느 브라우저, 어느 OS, CPU가 무엇을 쓰고 있는지 끝이 없다는 이유에서다.그리고 마지막 고찰을 읽어보면 알겠지만 차이가 너무 커서 무의미하다고 느낀다.
따라서 내가 사용하는 서피스 ProX(16GB, 64bit, ARM 기본 프로세서) Windows 10에서는 Node가 사용됩니다.js(v17.1.0)와 Edge(96.0.1054.43)로만 측정됩니다.
측정 방법을 써야 하기 때문에 다른 환경에 신경을 쓰면 자신이 받아들일 수 있는 형식으로 실행해 보세요.

인증 코드

1000개의 배열을 아래 5개 모드로 반복 처리한다.for 문장에 수조 값을 추가하는 글자가 필요하기 때문에 모든 순환에 대입식을 추가합니다.중복console.log된 글도 많았지만 오차가 커질 것 같아 사용하지 않았다.
for i++

for (var i = 0; i < arr.length; i++) {
  var a = arr[i]
}

for i--

for (var i = arr.length; i >= 0; i--) {
  var a = arr[i]
}

while i--

var i = arr.length
while (i--) {
  var a = arr[i]
}

for of

for (var v of arr) {
  var a = v
}

forEach

arr.forEach(v => {
  var a = v
})

성능 측정 웹 사이트에서 검증

우선 측정 사이트를 간단하게 사용해 보자.단위는 ops/sec로 숫자가 큰 것이 더 빠르다.

MeasureThat.온라인으로 측정

다른 사람이 측정한 결과forEach라도 가장 빠른 속도MeasureThat.net로 측정했다.
※++가 깨졌습니다.

참조: Run results for: for vs while vs for of vs forEach
그 결과 forEach 속도가 압도적으로 빠른 것으로 나타났다.for of보다 빨라서 정말 뜻밖이다.

JSBEN.CH로 측정하다

다른 사이트에서도 측정을 시도해 보았다.

참조: for vs while vs for of vs forEach
결과forEach는 속도가 빠르다.for i--와 while에 비해for i++가 더 빠른 것은 최적화된 것이 아닌가.
그러나 이 사이트는 별 차이가 없다. 반복적으로 테스트를 하면 간혹for i++의 가장 빠른 결과가 나온다.평균치를 얻지 못한 것 같다.

JSBench.미로 재다

이 사이트의 결과는 for i++이 가장 빠르다.MeasureThat.net와는 정반대의 결과다.

Perflink로 측정할게요.

참조: for vs while vs for of vs forEach
이 사이트를 운영할 때마다 간혹for i++과forEach가 역전되지만 대부분forEach이 가장 빠르다.
몇 번을 집행해도 변하지 않는 것은for of이 가장 느리다.

성능 측정 사이트의 고찰

4개 기준 사이트에서 측정한 결과forEach가 비교적 빠른 것 같다.
매번 집행 결과에 변화가 생기는 데는 여러 가지 이유가 있다고 생각하기 때문에 이해할 수 있지만 평균치MeasureThat.net와 JSBench.Me의 결과는 완전히 상반되는 것은 불가사의하다.
나는 어느 사이트를 믿어야 할지 전혀 모르겠다.

Benchmark.js로 검증

측정 사이트의 결과가 각기 다르기 때문에 어쩔 수 없다.js의 라이브러리Benchmark.js를 사용하여 측정합니다.단위는 ops/sec로 숫자가 큰 것이 더 빠르다.

Node.js 결과

처음

for i++ x 890,587 ops/sec ±1.98% (85 runs sampled)
for i-- x 676,696 ops/sec ±1.51% (88 runs sampled)
while i-- x 535,465 ops/sec ±1.66% (84 runs sampled)
for of x 637,016 ops/sec ±1.69% (85 runs sampled)
forEach x 493,769 ops/sec ±54.98% (84 runs sampled)

두 번째

for i++ x 921,759 ops/sec ±0.34% (85 runs sampled)
for i-- x 694,308 ops/sec ±0.53% (85 runs sampled)
while i-- x 557,372 ops/sec ±0.35% (88 runs sampled)
for of x 659,756 ops/sec ±0.50% (89 runs sampled)
forEach x 729,502 ops/sec ±53.00% (91 runs sampled)

소스: ittedev/my_measure/for_vs_foreach/node.jsfor i++가 가장 빠르다.첫 번째와 두 번째 결과가 위에 올라온 것은 forEach의 결과가 편차가 있어 2위나 꼴찌가 됐기 때문이다.

Edge 결과

for i++ x 1,486,420 ops/sec ±0.57% (66 runs sampled)
for i-- x 990,967 ops/sec ±1.14% (64 runs sampled)
while i-- x 748,789 ops/sec ±1.18% (66 runs sampled)
for of x 988,361 ops/sec ±0.30% (66 runs sampled)
forEach x 2,322,379 ops/sec ±2.02% (65 runs sampled)

소스: ittedev/my_measure/for_vs_foreach/browser.htmlforEach 속도가 압도적으로 빠르다.다른 방법 중for i++이 빠르다.

Benchmark.js에서의 고찰

결과가 또 달라졌다.그리고 결과는 각 검증 사이트와 다르다.
Node.js에서 for i++ 더 빠르고 브라우저에서 forEach 더 빠릅니다.
결과적으로 실행 환경이 다르다.물론 내 환경 외에는 다른 결과가 있겠지.
그리고 Benchmark.js 신뢰성 여부는 적어도 성능 측정 사이트보다 실행 환경과 측정 방법이 명확하기 때문에 신뢰할 수 있다.

고찰하다.

그 결과 1위는 for i++와forEach였다.어떤 게 더 센지 말하자면 환경이 달라서 잘 모르겠고 앞으로도 바뀔 가능성이 있다.
분명히 for i++가 가장 빠른 것은 아니다.차라리 사용MeasureThat.net과 Benchmark.js을 엣지로 측정한 결과를 보면 크롬계forEach가 압도적으로 빠른 경우가 많았다.
C 언어 등을 사용해 자주 하는 for문과 while문i--문의 기교는 기대한 결과를 얻지 못했다.이거 사용for i++할 때 최적화 중이었잖아요.또는 변동분과 변동분의 실행 속도가 다를 수 있습니다.
또한 비교적 새로운 문법for...of의 문장이 가장 빠른 속도에 이르지 못한다는 것을 발견했다.for...of 문장은 배열뿐만 아니라 생성기나 균형기에도 사용할 수 있고 for await...of 동기화 처리에도 사용할 수 있기 때문에 만능이기 때문에 배열에서 중복 처리하려는 것과는 용도가 다르다는 것을 고려하는 것이 좋다.

결론

루프 속도의 순서는 실행 환경에서 변경됩니다.

Node.js에서 속도를 요구할 때 자신의 환경에서 측정하는 것이 가장 좋고 귀찮으면 문장for을 추가하면서 사용하는 것이 좋다.

브라우저에서 속도를 구할 때forEach.

이외의 경우 for...of문구와 forEach 중 하나가 현혹forEach되면 forEach문구를 사용할 수 없을 때만 for...of문구를 사용한다.