JavaScript 함수의 성능을 측정하는 다양한 방법 비교

개요

하나의 함수를 실행하는 데 필요한 시간을 측정하는 것은 항상 좋은 방법으로 어떤 실현이 다른 실현보다 성능이 더 좋다는 것을 증명한다.이것도 좋은 방법으로 성능이 어떤 변화 후에 영향을 받지 않고 병목을 추적할 수 있다.
좋은 성능은 좋은 사용자 체험을 얻는 데 도움이 되고 좋은 사용자 체험은 사용자를 되돌아오게 할 것이다.한 연구에 따르면 온라인 소비자의 88퍼센트가 성능 문제로 인해 사용자 체험이 좋지 않은 후에 사용자가 돌아올 가능성이 적다고 한다.
이것이 바로 코드 중의 병목을 식별하고 개선을 측정할 수 있는 이유다.특히 브라우저를 위해 JavaScript를 개발할 때, 당신이 쓴 모든 줄의 JavaScript가 DOM을 막을 수 있다는 것을 주의해야 한다. 왜냐하면 그것은 일종의 단일 루틴 언어이기 때문이다.
이 글에서, 나는 네가 어떻게 너의 기능의 성능을 측정하고, 네가 그것들로부터 얻은 결과를 어떻게 처리하는지 설명할 것이다.

Perfomance.now

성능 API는 기능 성능을 통해now () 는 페이지가 로드된 후 경과 시간(밀리초 단위)을 반환하는 DOMHighRestimeStamp에 대한 액세스를 제공합니다. 정밀도는 최대 5입니다.μs(분수 단위).
그래서 실천 과정에서 당신은 두 개의 시간 스탬프를 취하여 하나의 변수에 저장한 다음에 두 번째 시간 스탬프에서 첫 번째 시간 스탬프를 빼야 한다.

const t0 = performance.now();
for (let i = 0; i < array.length; i++) {
  // some code
}
const t1 = performance.now();
console.log(t1 - t0, 'milliseconds');

Chrome 출력
0.6350000001020817 "milliseconds"
Firefox 출력
1 milliseconds
여기서 Firefox의 결과는 Chrome과 완전히 다르다. 이것은 Firefox 버전이 60부터 performance API의 정밀도를 2ms로 낮추기 때문이다.
performance API가 제공하는 기능은 타임 스탬프만 되돌아오는 것보다 훨씬 많습니다. 내비게이션 타이밍, 사용자 타이밍, 자원 타이밍을 측정할 수 있습니다.이 문장을 보십시오. 안에 더욱 상세한 해석이 있습니다.
그러나 우리의 용례에 대해 우리는 단일 함수의 성능을 측정하고 싶을 뿐이기 때문에 시간 스탬프는 충분하다.
그건 데이트랑 아니야.now 똑같아요?
지금 너는 아마도 내가 날짜를 사용할 수 있다고 생각할 것이다.노우 이거 하자.
네, 괜찮아요. 그런데 단점이 있어요.
Date.now는 유닉스 기원(1970-01-01-01-01-01T00:00:00Z)에서 시작하는 시간을 밀리초 단위로 되돌려주며 시스템 시계에 따라 달라집니다.이것은 그것이 그렇게 정확하지 않다는 것을 의미할 뿐만 아니라, 반드시 점차적으로 증가하는 것도 아니다.WebKit 엔지니어(Tony Gentilcore)의 설명은 다음과 같습니다.
아마도 비교적 적게 고려한 것은 시스템 시간을 바탕으로 하는 Date도 진정한 사용자 모니터링의 이상적인 선택이 아니라는 것이다.대부분의 시스템은 정기적으로 시간을 동기화하기 위해 수호 프로세스를 실행합니다.일반적으로 시계는 15-20분 간격으로 몇 밀리초씩 조정된다.이 속도에서 약 1%의 10초 간격은 정확하지 않다.

Console.time

이 API는 확실히 사용하기 쉽다. 단지 console만 사용하면 된다.time는 당신이 측정할 코드 앞에 놓고 console를 놓으세요.timeEnd는 측정할 코드 뒤에 놓으면 같은string 파라미터를 사용하여 이 함수를 호출할 수 있으며, 한 페이지에서 최대 10000개의 타이머를 동시에 사용할 수 있습니다.
정밀도는 performance API와 같지만 브라우저에 달려 있습니다.

console.time('test');
for (let i = 0; i < array.length; i++) {
  // some code
}
console.timeEnd('test');

다음과 같이 이해하기 쉬운 출력이 자동으로 생성됩니다.
Chrome 출력
test: 0.766845703125ms
Firefox 출력
test: 2ms - timer ended
여기서 출력은 Performance API와 매우 비슷합니다.
console.시간의 장점은 사용하기 쉽다는 것이다. 왜냐하면 두 시간 스탬프 사이의 차이를 수동으로 계산할 필요가 없기 때문이다.

시간 정밀도 단축

만약 다른 브라우저에서 위에서 언급한 API를 사용하여 함수를 측정한다면, 결과에 차이가 있을 수 있습니다.
브라우저는 사용자가 정시 공격과 지문 공격을 받지 않도록 보호하려고 하기 때문에 시간 스탬프가 너무 정확하면 해커가 이를 사용하여 사용자를 식별할 수 있다.
예를 들어 Firefox와 같은 브라우저는 정밀도를 2ms(버전 60)로 낮추어 이런 상황을 방지하려고 합니다.

주의사항

이제 자바스크립트 함수의 속도를 측정하는 데 필요한 도구가 있습니다.하지만 함정은 피하는 것이 좋다.

나누어 다스리다

너는 일부 결과를 필터할 때 어떤 것들은 매우 느리다는 것을 알아차렸지만, 너는 병목이 어디에 있는지 모른다.
코드 중 어느 부분이 느린지 함부로 추측하기보다는 상술한 함수로 측정하는 것이 낫다.
그것을 추적하려면 우선 너의 콘솔을 추적해라.타임 문장은 느린 코드 블록 주위에 놓여 있습니다.그리고 그것들의 다른 부분이 어떻게 집행되는지 측정한다. 만약 그 중 한 부분이 다른 부분보다 느리다면, 병목을 찾을 때까지 그곳에 깊이 들어가서 계속해라.
이 문장들 사이의 코드가 적을수록 흥미롭지 않은 내용을 추적할 가능성이 적다.

값 입력 주의

실제 응용에서 주어진 함수의 입력 값에 큰 변화가 발생할 수 있다.임의의 무작위 값으로만 함수의 속도를 측정할 수 있을 뿐 우리가 실제로 사용할 수 있는 어떠한 가치 있는 데이터도 제공할 수 없다.
같은 입력 값을 사용하여 코드를 실행해야 합니다.

여러 번 실행 함수

만약 당신이 하나의 함수를 가지고 하나의 그룹을 교체한다면, 모든 그룹의 값을 계산하고, 하나의 그룹의 결과를 되돌려줍니다.forEach인지 간단한 for 순환이 더 효과적인지 알고 싶어요.
함수:

function testForEach(x) {
  console.time('test-forEach');
  const res = [];
  x.forEach((value, index) => {
    res.push(value / 1.2 * 0.1);
  });

  console.timeEnd('test-forEach')
  return res;
}

function testFor(x) {
  console.time('test-for');
  const res = [];
  for (let i = 0; i < x.length; i ++) {
    res.push(x[i] / 1.2 * 0.1);
  }

  console.timeEnd('test-for')
  return res;
}

너는 이렇게 그것들을 테스트할 수 있다.

const x = new Array(100000).fill(Math.random());
testForEach(x);
testFor(x);

Firefox에서 위의 함수를 실행하면 다음과 같은 출력을 얻을 수 있습니다.
test-forEach: 27ms - timer ended
test-for: 3ms - timer ended
보아하니 ForEach가 느려진 것 같은데, 그렇죠?
동일한 입력을 사용하여 동일한 함수를 두 번 실행하는지 살펴보겠습니다.
testForEach(x);
testForEach(x);
testFor(x);
testFor(x);
test-forEach: 13ms - timer ended
test-forEach: 2ms - timer ended
test-for: 1ms - timer ended
test-for: 3ms - timer ended
만약 우리가 두 번째로 forEach 테스트를 호출한다면, 그것의 성능은 for 순환과 마찬가지로 좋다.초기 값이 비교적 느린 것을 감안하여 어쨌든 forEach를 사용할 가치가 없을 수도 있습니다.

...여러 브라우저에서

Chrome에서 위의 코드를 실행하면 결과가 갑자기 달라집니다.
test-forEach: 6.156005859375ms
test-forEach: 8.01416015625ms
test-for: 4.371337890625ms
test-for: 4.31298828125ms
Chrome과 Firefox는 서로 다른 JavaScript 엔진을 가지고 있으며 서로 다른 유형의 성능 최적화를 가지고 있기 때문이다.이런 차이를 깨닫는 것은 좋은 일이다.
이런 상황에서 Firefox는 같은 입력 상황에서forEach의 사용을 비교적 잘 최적화시켰다.
for는 두 엔진의 성능이 모두 더 좋기 때문에 for 순환을 꾸준히 사용하는 것이 가장 좋다.
이것은 왜 여러 엔진에서 측정을 해야 하는지의 좋은 예이다.Chrome만 사용하여 측정하면 for에 비해 forEach가 그리 나쁘지 않다는 결론을 얻을 수 있습니다.

CPU 절약

이 수치들은 보기에 결코 높지 않다.당신의 개발 기계는 일반적으로 당신의 사이트에서 사용하는 일반 휴대전화보다 조회 속도가 훨씬 빠르다는 것을 알아야 한다.
이런 모습을 느끼기 위해 브라우저에는 CPU 성능을 줄일 수 있는 기능이 있습니다.
이것이 있으면 그 10ms나 50ms는 곧 500ms가 된다.

상대적 표현을 측정하다

이러한 원본 결과는 하드웨어뿐만 아니라 CPU와 자바스크립트 라인의 현재 부하에도 달려 있다.다음에 컴퓨터를 다시 켤 때, 이 숫자들이 매우 달라 보일 수 있기 때문에, 당신의 측정 결과의 상대적인 개선에 관심을 가져라.

총결산

본고에서 우리는 JavaScript API를 보았는데 우리는 그것들을 사용하여 성능을 측정하고 진실한 세계에서 어떻게 사용하는지 알 수 있다.간단한 측정에 대해, 나는 콘솔을 사용하는 것을 발견했다.시간이 더 쉬워요.
비록 수입에 직접적인 영향을 미치더라도 많은 전단 개발자들이 매일 성능에 대해 충분한 고려를 하지 않는다고 생각한다.
이상은 자바스크립트 함수의 성능을 측정하는 여러 가지 방식의 대비에 대한 상세한 내용입니다. 자바스크립트 함수의 성능에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!