Rumah > hujung hadapan web > tutorial js > Menghalang pelaksanaan semula fungsi javascript besar yang telah diproses sekali dengan parameter yang sama.

Menghalang pelaksanaan semula fungsi javascript besar yang telah diproses sekali dengan parameter yang sama.

WBOY
Lepaskan: 2024-08-28 06:08:06
asal
543 orang telah melayarinya

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

memofy

Mekanisme cache(memoizer) untuk fungsi yang dilaksanakan dengan parameter yang sama (Hanya 1.14 KB)

Projek ini menyediakan fungsi memoize untuk meningkatkan prestasi dalam projek JavaScript atau TypeScript dengan menyimpan cache hasil panggilan fungsi yang mahal. Dengan menghafal, panggilan berulang dengan hujah yang sama akan mengembalikan hasil cache, mempercepatkan pelaksanaan.

Modul ini berfungsi seperti cangkuk useMemo react tetapi TIDAK diperlukan bertindak balas. Anda boleh menggunakan mana-mana rangka kerja atau projek javascript tulen

Pakej Npm
Github

Ciri-ciri

  • Memoisasi Fungsi: Menyimpan hasil panggilan fungsi dengan hujah yang sama.
  • Penjejakan Kebergantungan: Mengemas kini cache jika kebergantungan berubah.
  • Fleksibiliti: Boleh digunakan dalam kedua-dua projek JavaScript dan TypeScript.
  • Penyelesaian terbaik untuk operasi intensif CPU atau pengiraan kompleks
  • Fungsi yang terputus sambungan dipadamkan daripada memori. Cache kepunyaan fungsi ini juga dipadamkan.
  • Stor cache berasaskan WeakMap
  • WeakMap Memutuskan sambungan kaedah yang tidak dapat berkomunikasi dengan pautan rujukan yang lemah dan mencetuskan pemungut sampah untuk menyepak masuk

Kes penggunaan

Tanpa parameter deps

Dalam proses berikut, apabila kaedah concatPhoneNumber dipanggil semula dengan parameter yang sama, fungsi itu tidak dilaksanakan lagi, ia mengambil hasil daripada 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
Salin selepas log masuk

Dengan parameter deps

Jika anda mahu kaedah dijalankan semula dengan parameter yang sama mengikut beberapa kebergantungan, anda boleh lulus parameter deps seperti berikut.

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
Salin selepas log masuk

Hasil prestasi

Hasil prestasi pada fungsi kompleks yang membezakan nombor perdana. Ujian Prestasi

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

Keputusan liputan ujian

Ujian telah ditulis untuk semua kes dan semua jenis parameter. Ujian

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

Atas ialah kandungan terperinci Menghalang pelaksanaan semula fungsi javascript besar yang telah diproses sekali dengan parameter yang sama.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan