JavaScript 함수 측정 ' 성능

웹 응용 프로그램 성능은 항상 웹 개발 속도가 매우 중요합니다. 전문 프론트 엔드 개발자로서 우리는 성능 최적화에주의를 기울여야합니다. 요청 감소, CDN 사용 및 블록 렌더링 쓰기를 피하는 것과 같은 많은 전통적인 웹 성능 최적화 방법은 오늘날에도 여전히 유효합니다. 그러나 점점 더 많은 웹 응용 프로그램이 JavaScript를 사용함에 따라 코드 효율을 검증하는 것이 중요해졌습니다.

기능적이지만 기능이 효율적이지 않다고 의심하고 개선 할 계획이 있다고 가정합니다. 이 가정을 증명하는 방법? JavaScript 기능 성능을 테스트하기위한 모범 사례는 무엇입니까? 일반적으로 가장 좋은 방법은 내장 된

함수를 사용하여 함수가 실행되기 전후의 시간을 측정하는 것입니다. 이 기사는 일반적인 함정을 피하기 위해 코드 실행 시간과 트릭을 측정하는 방법에 대해 논의합니다.

키 포인트

performance.now()

웹 개발의 성능은 중요하며 코드 속도를 확인하여 개선 될 수 있습니다. JavaScript 함수의 성능을 테스트하는 가장 좋은 방법은 내장 기능을 사용하여 기능이 실행되기 전후 시간을 측정하는 것입니다.

고해상도 시간 API는 라는 함수를 제공합니다. 이것은 통과 된 시간에 대한 정확한 설명을 제공하여 내장 함수 실행 시간을 측정 할 때는 실수로 중요하지 않은 컨텐츠를 측정하지 않도록주의하십시오. 둘 사이에서 측정 할 수있는 유일한 작업은 해당 함수 실행인지 확인하십시오. 함수 실행 시간을 한 번만 측정하는 것이 일반적인 오류입니다. 실행 시간은 다양한 요인에 따라 크게 다르므로 함수를 반복하고 평균 또는 중간 시간을 계산하는 것이 좋습니다.

다른 함수의 속도를 비교할 때는 컨텍스트가 중요합니다. 함수의 속도는 수행하는 특정 작업에 따라 다릅니다. 따라서 더 빠른 웹 응용 프로그램을 작성하려면 측정 및 비교를 수행하는 것이 중요합니다.

• performance.now () performance.now() 고해상도 시간 API는 라는 함수를 제공합니다. 이것은 밀리 초의 현재 시간을 반영하는 부동 소수점 번호이며, 1 천 분의 1 밀리 초에 정확합니다. 개별적 으로이 숫자는 분석에 그다지 가치가 없지만 두 숫자의 차이는 얼마나 많은 시간이 지났는지 정확하게 설명 할 수 있습니다. 내장 된

  객체보다 더 정확한 것 외에도 "단조로운"이기도합니다. 이는 단순히 시스템 시간을 정기적으로 수정하는 시스템 (예 : 랩톱 운영 체제)의 영향을받지 않는다는 것을 의미합니다. 간단히 말해서, now()의 두 인스턴스를 정의하고 차이를 계산하는 것은 경과 시간을 나타내지 않습니다. "단조 론"의 수학적 정의는 (함수 또는 수량의 경우)가 결코 감소하지 않거나 절대 증가하지 않는 방식으로 변화한다는 것입니다. 그것을 설명하는 또 다른 방법은 시계가 앞뒤로 토글하는 시간 동안 그것을 사용하는 것을 상상하는 것입니다. 예를 들어, 당신의 국가 시계가 모두 하루 동안 햇빛을 극대화하기 위해 한 시간을 건너 뛰는 데 동의합니다. 시계가 다시 전화를 걸기 한 시간 전에 인스턴스를 만들고 나중에 또 다른 DOMHighResTimeStamp 인스턴스를 만들려면 차이를 보면 "1 시간 3 초 123 밀리 초"와 같은 것을 보여줍니다. 의 두 인스턴스를 사용하면 차이는 "3 초 123 밀리 초, 456789 만 분의 1 밀리 초"입니다. 이 섹션에서는이 API에 대해 자세히 설명하지 않습니다. 따라서 더 많은 것을 배우고 사용하는 몇 가지 예를 보려면 고해상도 시간 API를 발견하는 기사를 읽으십시오. 이제 고해상도 시간 API가 무엇인지와 사용 방법을 배웠으므로 잠재적 인 함정에 빠져들겠습니다. 그러나이 작업을 수행하기 전에이 기사의 나머지 부분에 사용할 라는 함수를 정의해 봅시다. Date 이 함수의 실행은 다음과 같이 측정 할 수 있습니다. Date 브라우저 에서이 코드를 실행하면 다음과 같은 것을 볼 수 있습니다. 다음은이 코드의 라이브 데모를 보여줍니다. [CodePen 링크는 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없으므로 여기에 삽입해야합니다. 이 예를 염두에두고 토론을 시작합시다. 트레일 #1 - 중요하지 않은 내용 Date 위의 예에서, 하나 Date와 다른 performance.now() 사이에서 우리가하는 유일한 일은 함수를 호출하고 변수 에 그 값을 할당한다는 것을 알 수 있습니다. 이것은 우리에게 다른 어떤 것도없이 함수를 실행하는 데 걸리는 시간을줍니다. 이 측정은 다음과 같이 수행 할 수 있습니다 makeHash() 아래 에이 코드 스 니펫의 실시간 데모가 있습니다. [CodePen 링크는 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없으므로 여기에 삽입해야합니다. 그러나이 경우, 우리는 함수를 호출하는 데 걸리는 시간과 콘솔에서 해당 출력을 보내고 인쇄하는 데 걸리는 시간을 측정합니다. 우리는이 두 작전이 얼마나 걸리는지 모르겠습니다. 당신은 조합 시간 만 알고 있습니다. 또한 전송 및 인쇄에 필요한 시간은 브라우저 나 브라우저에서 발생하는 일에 따라 크게 다릅니다.

  어쩌면 당신은 그것이 얼마나 느린 지 정확히 알고있을 것입니다. 그러나 각 함수에 I/O가 포함되지 않더라도 여러 기능을 실행하는 것은 똑같이 잘못입니다. 예를 들면 : makeHash('Peter') 마찬가지로, 우리는 실행 시간이 어떻게 할당되는지 모른다. 변수 할당, 호출입니까?

  트레일 #2 - 한 번만 측정하십시오 또 다른 일반적인 실수는 한 번만 측정하고 시간을 요약하고 그 시간에 따라 결론을 도출하는 것입니다. 다른 시간에 이것은 완전히 다를 수 있습니다. 실행 시간은 주로 다양한 요인에 달려 있습니다

  컴파일러 워밍업 시간 (예 : 코드가 바이트 코드로 컴파일되는 시간) 메인 스레드는 우리가 깨닫지 못하는 다른 일을 다루는 데 바쁘다 console.log 컴퓨터의 CPU (들)는 전체 브라우저 속도를 늦출 특정 물건으로 바쁘다.

  점진적인 개선 방법은 다음과 같이 함수를 반복적으로 실행하는 것입니다.

  function makeHash(source) {
    var hash = 0;
    if (source.length === 0) return hash;
    for (var i = 0; i < source.length; i++) {
      var char = source.charCodeAt(i);
      hash = ((hash << 5) - hash) + char;
      hash = hash & hash; // Convert to 32bit integer
    }
    return hash;
  }

  다음은이 예제의 라이브 데모를 보여줍니다. [CodePen 링크는 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없으므로 여기에 삽입해야합니다. 이 접근법의 위험은 브라우저 JavaScript 엔진이 보조 최적화를 수행 할 수 있다는 것입니다. 즉, 기능이 동일한 입력으로 두 번째로 호출되면 첫 번째 출력을 기억하면 이점을 얻을 수 있습니다. 이 문제를 해결하기 위해 동일한 입력 문자열 (예 : "Peter")을 반복적으로 전송하는 대신 다양한 입력 문자열을 사용할 수 있습니다. 분명히, 다른 입력으로 테스트하는 문제는 우리가 측정하는 기능이 자연스럽게 다른 시간이 걸린다는 것입니다. 아마도 일부 입력은 다른 입력보다 실행 시간이 길어질 것입니다.

  트레일 #3-평균적으로 과도한 의존성 toLowerCase()

  이전 섹션에서, 우리는 무언가를 반복하고 이상적으로 다른 입력을 사용하는 것이 좋은 습관이라는 것을 알게되었습니다. 그러나 다른 입력의 문제는 실행 시간이 다른 모든 입력보다 훨씬 길어질 수 있다는 것입니다. 물러서서 동일한 입력을 보내겠습니다. 우리가 같은 입력을 10 번 보내고 매번 걸리는 시간을 인쇄한다고 가정하십시오. 출력은 다음과 같이 보일 수 있습니다

  function makeHash(source) {
    var hash = 0;
    if (source.length === 0) return hash;
    for (var i = 0; i < source.length; i++) {
      var char = source.charCodeAt(i);
      hash = ((hash << 5) - hash) + char;
      hash = hash & hash; // Convert to 32bit integer
    }
    return hash;
  }

  처음으로, 숫자는 다른 숫자와 완전히 다릅니다. 브라우저의 JavaScript 엔진이 약간의 최적화를 수행했으며 워밍업이 필요하기 때문입니다. 우리는 이것을 피할 수는 없지만 잘못된 결론을 막기 위해 좋은 치료법을 고려할 수 있습니다. 한 가지 방법은 지난 9 회 시간 평균을 계산하는 것입니다. 또 다른 더 실용적인 접근법은 모든 결과를 수집하고 중앙값을 계산하는 것입니다. 기본적으로 이것은 순서대로 모든 결과이며 중간 결과를 선택합니다. 원하는대로 사용할 수있는 숫자를 얻을 수 있기 때문에

  가 매우 유용한 곳입니다. 다시 시도해 봅시다. 그러나 이번에는 중간 기능을 사용할 것이다 : performance.now().

  트레일 #4 - 예측 가능한 순서 에서 함수를 비교합니다 우리는 항상 무언가를 여러 번 측정하고 평균화하는 것이 항상 좋은 생각이라는 것을 배웠습니다. 또한 마지막 예제는 평균보다는 중앙값을 사용하는 것이 낫다는 것을 알려줍니다. 이제 기능의 실행 시간을 측정하는 데 잘 사용되는 것은 여러 기능 중 어느 것이 더 빠른지 이해하는 것입니다. 동일한 유형의 입력을 취하고 동일한 결과를 생성하는 두 가지 기능이 있지만 내부적으로 다르게 작동한다고 가정합니다. 문자열이 다른 문자열 배열에 존재하는 경우 true 또는 false를 반환하는 함수를 원하지만 이것은 대소 문자를 사용하지 않습니다. 다시 말해, 우리는

  var t0 = performance.now();
  var result = makeHash('Peter');
  var t1 = performance.now();
  console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result);

  를 사용할 수 없습니다. 이것은 다음과 같은 구현입니다 :

  우리는 루프가 초기 일치가 있더라도 항상 모든 요소를 ​​가로 지르기 때문에 이것이 개선 될 수 있음을 즉시 알았습니다. 좋은 오래된 루프를 사용하여 더 나은 버전을 쓰려고합시다.

  Array.prototype.indexOf 지금 어느 것이 더 빨리 있는지 봅시다. 각 기능을 10 번 실행하고 모든 측정 값을 수집하여이를 수행합니다.

  우리는 그것을 실행하고 다음과 같은 출력을 얻습니다 :

  <code>Took 0.2730 milliseconds to generate: 77005292</code>

  다음은이 예제의 라이브 데모를 보여줍니다. [CodePen 링크는 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없으므로 여기에 삽입해야합니다. > 정확히 무슨 일이 있었나요? 첫 번째 함수는 3 배 더 빠릅니다. 이것은 일어나지 않았어야합니다! haystack.forEach 설명은 간단하지만 미묘합니다. 를 사용한 첫 번째 함수는 브라우저의 JavaScript 엔진의 일부 낮은 수준 최적화로부터 이점을 제공하며 배열 인덱싱 기술을 사용할 때 이러한 최적화를 얻지 못합니다. 그것은 우리의 요점을 증명합니다 : 당신은 그것을 측정하지 않으면 결코 알지 못할 것입니다!

  결론

  var t0 = performance.now();
  console.log(makeHash('Peter'));  // 不好的主意！
  var t1 = performance.now();
  console.log('Took', (t1 - t0).toFixed(4), 'milliseconds');

  를 사용하여 JavaScript에서 정확한 실행 시간을 얻는 방법을 보여 주려고 노력하는 동안, 우리는 직관이 경험적 결과를 얻은 결론과는 정반대 인 벤치 마크 시나리오를 우연히 발견했습니다. 요점은 더 빠른 웹 응용 프로그램을 작성하려면 JavaScript 코드를 최적화해야한다는 것입니다. 컴퓨터는 (거의) 생명체이기 때문에 예측할 수없고 놀랍습니다. 코드 개선이 더 빠른 실행 속도를 초래한다는 것을 알 수있는 가장 신뢰할 수있는 방법은 측정 및 비교입니다. 우리는 어떤 코드가 더 빠른지 알지 못하고, 같은 일을 할 수있는 여러 가지 방법이 있다면 또 다른 이유가 맥락이 중요하기 때문입니다. 이전 섹션에서는 26 개의 다른 문자열에서 문자열을 찾고있는 경우에 민감한 문자열 검색을 수행했습니다. 만약 우리가 100,000 개의 다른 줄에서 끈을 찾아야한다면, 결론은 완전히 다를 것입니다. 위의 목록은 더 많은 함정이 있기 때문에 철저하지 않습니다. 예를 들어, 비현실적인 시나리오를 측정하거나 JavaScript 엔진에서만 측정하는 것. 그러나 는 더 빠르고 더 나은 웹 응용 프로그램을 작성하려는 JavaScript 개발자에게 큰 자산이라는 것은 확실합니다. 마지막으로, 실행 시간을 측정하면 "더 나은 코드"의 1 차원 만 생성됩니다. 메모리 및 코드 복잡성도 고려해야합니다. 당신은 어때요? 이 기능을 사용하여 코드의 성능을 테스트 한 적이 있습니까? 그렇지 않다면이 단계에서 어떻게 진행합니까? 아래 의견에 의견을 공유하십시오. 토론을 시작합시다!

  performance.now() (FAQ 부품은 위의 내용과 크게 복제되므로 핵심 사항을 유지하기 때문에 생략됩니다.)

위 내용은 JavaScript 함수 측정 ' 성능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!