Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2024-08-28 06:08:06
Original
520 people have browsed it

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

memofy

Cache mechanism(memoizer) for functions executed with the same parameters (Only 1.14 KB)

This project provides a memoize function for improving performance in JavaScript or TypeScript projects by caching the results of expensive function calls. By memoizing, repeated calls with the same arguments will return the cached result, speeding up execution.

This module works like react's useMemo hook but NOT required react. You can use any framework or pure javascript projects

Npm Package
Github

Features

  • Function Memoization: Caches results of function calls with the same arguments.
  • Dependency Tracking: Updates the cache if dependencies change.
  • Flexibility: Usable in both JavaScript and TypeScript projects.
  • The best solution for CPU-intensive operations or complex calculations
  • The disconnected functions are deleted from memory. The caches belonging to this function are also deleted.
  • WeakMap based cache store
  • WeakMap Disconnects methods that cannot communicate with weak reference links and triggers the garbage collector to kick in

Usage case

Without deps parameters

In the following process, when the concatPhoneNumber method is called again with the same parameters, the function is not executed again, it fetches the result from the cache.

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
Copy after login

With deps parameter

If you want the method to run again with the same parameter according to some dependencies, you can pass the deps parameter as follows.

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
Copy after login

Performance result

Performance results on a complex function that distinguishes prime numbers. Performance Test

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

Test coverage result

Tests were written for all cases and all parameter types. Tests

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

The above is the detailed content of Prevents re-execution of large javascript functions that have been processed once with the same parameter.. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template