> 웹 프론트엔드 > JS 튜토리얼 > 동일한 매개변수로 한 번 처리된 대규모 자바스크립트 함수의 재실행을 방지합니다.

동일한 매개변수로 한 번 처리된 대규모 자바스크립트 함수의 재실행을 방지합니다.

WBOY
풀어 주다: 2024-08-28 06:08:06
원래의
546명이 탐색했습니다.

Prevents re-execution of large javascript functions that have been processed once with the same parameter.

기억하다

동일한 매개변수로 실행되는 기능에 대한 캐시 메커니즘(메모이저)(단 1.14KB)

이 프로젝트는 비용이 많이 드는 함수 호출의 결과를 캐시하여 JavaScript 또는 TypeScript 프로젝트의 성능을 향상시키기 위한 메모 기능을 제공합니다. 메모를 하면 동일한 인수로 반복 호출하면 캐시된 결과가 반환되므로 실행 속도가 빨라집니다.

이 모듈은 React의 useMemo 후크처럼 작동하지만 필수 React는 아닙니다. 모든 프레임워크나 순수 자바스크립트 프로젝트를 사용할 수 있습니다

Npm 패키지
깃허브

특징

  • 함수 메모: 동일한 인수를 사용하여 함수 호출 결과를 캐시합니다.
  • 종속성 추적: 종속성이 변경되면 캐시를 업데이트합니다.
  • 유연성: JavaScript와 TypeScript 프로젝트 모두에서 사용 가능
  • CPU 집약적인 작업이나 복잡한 계산을 위한 최고의 솔루션
  • 연결이 끊어진 기능은 메모리에서 삭제됩니다. 이 기능에 속한 캐시도 삭제됩니다.
  • WeakMap 기반 캐시 저장소
  • WeakMap 약한 참조 링크와 통신할 수 없는 메서드의 연결을 끊고 가비지 수집기가 시작되도록 트리거합니다

사용 사례

Deps 매개변수 없음

다음 과정에서는 동일한 매개변수로 concatPhoneNumber 메소드를 다시 호출하면 함수가 다시 실행되지 않고 캐시에서 결과를 가져옵니다.

import memofy from "memofy";

const concatPhoneNumber = (extension, number) => {
  // Heavy calculation
  // return result
};

const memoizedConcatPhoneNumber = memofy(concatPhoneNumber, []);

memoizedConcatPhoneNumber(90, 555); // Runs concatPhoneNumber when first run
memoizedConcatPhoneNumber(90, 555); // get value from cache

memoizedConcatPhoneNumber(90, 552); // Runs concatPhoneNumber because params is change
로그인 후 복사

deps 매개변수 사용

일부 종속성에 따라 동일한 매개변수로 메소드를 다시 실행하려면 다음과 같이 deps 매개변수를 전달하면 됩니다.

import memofy from "memofy";

const taxRatio = 0.5;
const product = { title: "Test product", price: 10 };

const calculateTax = () => {
  // Calculate tax by product price
  // Heavy calculation
  return taxRatio * product.price;
};

const memoizedConcatPhoneNumber = memofy(calculateTax, [product, taxRatio]);

calculatedPrice = calculateTax(); // Runs concatPhoneNumber when first run

product.price = 40;
let calculatedPrice = calculateTax(); // Runs concatPhoneNumber because product dep changed

taxRatio = 0.8;
calculatedPrice = calculateTax(); // Runs concatPhoneNumber because taxRatio changed
로그인 후 복사

실적결과

소수를 구별하는 복잡한 함수의 성능 결과입니다. 성능 테스트

Case ms
First execute time (no caching) > 52.08 ms
Second execute time (caching) < 0.03 ms
and subsequent execution (caching) < 0.03 ms

테스트 커버리지 결과

모든 경우와 모든 매개변수 유형에 대해 테스트가 작성되었습니다. 테스트

File % Stmts % Branch % Funcs % Lines Uncovered Line #s
All files 100 100 100 100 0
lib 100 100 100 100 0
index.ts 100 100 100 100 0
lib/store 100 100 100 100 0
CacheStore.ts 100 100 100 100 0
DepsStore.ts 100 100 100 100 0

위 내용은 동일한 매개변수로 한 번 처리된 대규모 자바스크립트 함수의 재실행을 방지합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿