javascript를 마이크로 최적화하는 것은 가치가 없을지도 모르지만…

javascript를 마이크로 최적화하는 것은 가치가 없을지도 모르지만…

반응형

애플리케이션에서 흔히 부르는 기능을 최적화하려면 몇 가지 측정을 수행하고 벤치마크를 설정한 후 그 다음 작업을 시작해야 할 것입니다. 브라우저의 폭포수 차트를 보고 장시간 실행 기능이 레일 모델에 부담을 주거나, 보다 정확하게 말하자면, 장시간 실행 기능이 사용자와 수행된 작업을 분리시켜 준다는 것을 인식했다고 가정해 보겠습니다. UI의 불필요한 지연은 엄격히 말해 100ms가 넘습니다. 다음과 같은 목표를 달성하고자 합니다.

먼저 전체 예제 코드를 여기서 볼 수 있습니다. 이 코드를 향후 측정을 위한 템플릿으로 자유롭게 사용하십시오.

성능 API

우리 기능의 성능을 측정하기 시작하기 위해서는 Performance API에 대해 알아야 합니다. Performance API는 성능 인터페이스와 상호 작용할 수 있는 쉽게 사용할 수 있는 자바스크립트 웹 API입니다. 다시 말해 클라이언트측 애플리케이션 성능을 높은 해상도로 측정할 수 있는 기능을 제공합니다.n 시간. 여기에 많은 내용이 있지만, 여기서 관심 있는 것은 표시 설정, 시간 간격 측정 및 추가 검사를 위해 콘솔에 있는 항목 기록입니다.

API는 사용이 매우 간단하므로 예제 시나리오에 대해 간단히 설명하겠습니다.

두 개의 경쟁 함수

예를 들어, 두 단어가 애너그램인지 확인하는 기능이 있다고 합시다. 두 가지 방법이 떠오른다. 두 줄을 배열로 간주하고 두 단어의 문자가 같은지 여부에 관심이 있기 때문에 배열로 변환하고 정렬한 다음 결과를 비교합니다.

또 다른 방법은, for 루프가 터무니없이 수행된다는 것을 알고, 그것에 대한 논리를 세우는 것입니다. 길이가 동일하지 않은 단어(스스로는 성과급)를 바로 결격시킬 수 있습니다. 그런 다음 한 단어에 있는 각 문자를 반복하여 indexOf를 사용하여 다른 단어에 있는지 확인할 수 있습니다. 또한 우리는 잘못된 긍정을 피하기 위해 두 번째 단어(또는 그것의 사본)에서 글자를 점차 잘라내야 할 필요가 있다.

성능 API 구현

마크를 설정하는 것은 매우 쉬우며, 실제로 코드 내 적절한 위치에 performance.mark( myCustomMarkerString )를 입력하는 것만큼 쉽습니다. 나중에 이 마커 이름을 사용해야 하므로, 실제로 이 마커를 const(예: const A)로 저장한 다음, 함수 시작, performance.mark(A) 및 함수 성능.mark(B) 끝에 표시를 남기기 위해 사용합니다. 그런 다음, 타이밍 포인트 사이에 지정된 표시가 있는 performance.measure(my measurement #1", A, B)를 사용합니다.(예: B)입니다. 아래의 예제 코드는 매우 명확하다고 생각합니다.

여기서 주목할 필요가 있습니다. 두 가지 기능을 차례로 한 번만 실행해도 결정적인 결과를 얻을 수 있는 경우는 거의 없습니다. 두 기능을 100번, 1000번 이상 실행하여 여러 번 호출할 경우 성능 격차가 얼마나 되는지 파악하는 것이 가장 좋습니다.

이렇게 하면 나중에 performance.GetentriesByType("measure")을 사용하여 검색할 수 있는 두 개의 항목이 생성됩니다. 그 결과 PerformanceEntry 개체의 배열이 생성됩니다. 항목의 기간 값에 가장 관심이 있으므로 기간 열이 필터링된 console.table을 사용하여 항목을 표시하는 경향이 있습니다. 이는 대략 다음과 같습니다.

console.table(성능.getEntriesByType( measure ), [ deration ];

전체 코드는 이 코드펜에서 볼 수 있습니다.

결론

분명히, 여기의 예는 몇 가지 부족한 점이 있다. 비록 그것이 두 기능의 대략적인 비교를 보여주지만, 실제 워드 함수는 아마도 모든 종류의 시나리오에서 함수를 호출할 것이기 때문에 둘 이상의 인수 집합과 함께 나란히 테스트될 필요가 있다. 또한 평균을 얻기 위해 결과를 나누고 테스트를 몇 번 자동으로 다시 실행하여 논리를 복잡하게 만들 수도 있습니다. 그러나 이는 사실상 사용자의 사용 사례에 따라 다릅니다. 코드를 마이크로 최적화하기로 결정하셨다면 이 정도면 충분히 시작할 수 있기를 바랍니다.

또한, 만약 여러분이 어떤 통찰력을 가지고 있다고 생각한다면, 제가 빠뜨렸거나 잘못 해석한 것에 대해 논평에서 자유롭게 토론해 보세요. 주제는 광범위하고 무수히 많은 방법으로 접근할 수 있습니다. 네트워크를 확장하거나 확장하려면 트위터와 링크드인을 통해 저를 찾을 수 있습니다.

원천

from http://it-ground.tistory.com/298 by ccl(A) rewrite - 2021-10-13 13:27:59