array_javascript 스킬에 항목 추가에 대한 JS 성능 분석

배열에 항목을 추가하는 4가지 방법의 성능을 비교했습니다.

인덱서를 사용하여 추가

코드 복사 코드는 다음과 같습니다.

console.time("index");
var a = [];
for (var i = 0, l = times; i a[i] = i;
}
console.timeEnd("index");

푸시 방식 사용

코드 복사 코드는 다음과 같습니다.

console.time("푸시");
var a = [];
for (var i = 0, l = times; i a.push(i);
}
console.timeEnd("푸시");

연결 방법 사용

코드 복사 코드는 다음과 같습니다.

console.time("concat");
var a = [];
for (var i = 0, l = times; i a.concat(i);
}
console.timeEnd("concat");

concat 메소드를 사용하세요. 매개변수는 배열입니다

코드 복사 코드는 다음과 같습니다.

console.time("배열과 연결");
var a = [];
for (var i = 0, l = times; i a.concat([i]);
}
console.timeEnd("배열과 연결");

시간을 10,000(만)번으로 설정:

코드 복사 코드는 다음과 같습니다.

인덱스: 0.310ms
푸시: 1.476ms
연결: 8.911ms
배열과 연결: 2.261ms

시간을 100000(십만)번으로 설정:

코드 복사 코드는 다음과 같습니다.

인덱스: 1.967ms
푸시: 11.980ms
연결: 70.410ms
배열과 연결: 28.292ms

시간을 1000000(백만)번으로 설정:

코드 복사 코드는 다음과 같습니다.

인덱스: 138.559ms
푸시: 93.074ms
연결: 608.768ms
배열과 연결: 243.371ms

시간을 10000000(천만)번으로 설정:

코드 복사 코드는 다음과 같습니다.

인덱스: 1473.733ms
푸시: 611.636ms
연결: 6058.528ms
배열과 연결: 2431.689ms

요약

이 결론은 Chrome 브라우저에만 적용됩니다

concat 방식의 실행 효율성이 가장 느립니다
두 가지 concat 메소드의 매개변수 전달과 비교하여, 매개변수를 배열로 받아들인 경우, 매개변수를 비배열로 받아들인 경우보다 실행 효율성이 더 높습니다
대부분의 경우 인덱서의 실행 효율성은 푸시 방식보다 높습니다
실행 횟수가 많아지면 인덱서의 실행 효율성이 푸시 방식에 비해 떨어지기 시작합니다

브라우저 비교

경험이 부족하다고 지적해주신 네티즌분들께 감사드리며 여기에 브라우저 간 수평적 비교를 추가하겠습니다

첫 번째는 concat 방식을 사용하는 것입니다. IE와 Firefox에서는 매개변수가 배열인 경우 매개변수가 배열이 아닌 경우에 비해 실행 효율성이 떨어지지만 차이는 크지 않습니다
그러면 index와 push 방식이 concat보다 확실히 빠릅니다. Firefox에서는 push가 약간 더 좋지만 차이는 크지 않습니다.
세 브라우저의 인덱스와 푸시 방식의 실행 효율성을 비교해 보면, Firefox의 실행 효율성은 IE와 Chrome의 경우에는 기본적으로 10배 더 빠릅니다. 다른 브라우저에 비해 Firefox의 실행 효율성은 기본적으로 10배 빠릅니다.

수백만번의 결과는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

// 파이어폭스
색인: 타이머가 시작되었습니다
인덱스: 229.79ms
푸시: 타이머가 시작되었습니다
푸시: 205.12ms
연결: 타이머가 시작되었습니다
연결: 2136.99ms
배열과 연결: 타이머가 시작되었습니다
배열과 연결: 2365.18ms
``

코드 복사 코드는 다음과 같습니다.

//즉
인덱스: 2,533.744밀리초
푸시: 3,865.979밀리초
연결: 4,303.139밀리초
배열과 연결: 4,792.208밀리초

이 기사에서는 JS의 성능에 대해서만 설명하고 비교를 통해 친구들의 JavaScript에 대한 이해가 깊어지기를 바랍니다.