From 68ce61002cd1aeee45d01db5f739528753dd0f83 Mon Sep 17 00:00:00 2001
From: Justin Mayfield <mayfield@users.noreply.github.com>
Date: Sat, 22 Jul 2023 08:16:05 -0600
Subject: [PATCH] Reduce redux saveState overhead (#283)

* Reduce redux saveState overhead

I noticed my CPU was quite high when downloading big streams and most of
the CPU was being spent doing browser.storage.local.set(...) for saving
the state.  This state only appears to be needed when the background
page is reloaded (which will never happen if the a content-script is
active.

Buffering the save by 200ms reduces JS overhead by about ~40% (not
including native methods overhead) and total CPU usage on my system
(circa 2022 AMD 16 core) is reduced by ~28%.

* change: use throttle

---------

Co-authored-by: Shy <puemos@gmail.com>
---
 src/extension/extension-background/package-lock.json  | 11 +++++++++++
 src/extension/extension-background/package.json       |  1 +
 src/extension/extension-background/src/index.ts       |  3 ++-
 .../extension-background/src/persistState.ts          |  3 ++-
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/extension/extension-background/package-lock.json b/src/extension/extension-background/package-lock.json
index cff44b67..5aeb8250 100644
--- a/src/extension/extension-background/package-lock.json
+++ b/src/extension/extension-background/package-lock.json
@@ -9,6 +9,7 @@
       "version": "3.3.0",
       "license": "MIT",
       "dependencies": {
+        "@github/mini-throttle": "^2.1.0",
         "@hls-downloader/core": "file:../../core",
         "@types/uuid": "^7.0.2",
         "@videojs/vhs-utils": "^1.3.0",
@@ -65,6 +66,11 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@github/mini-throttle": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.0.tgz",
+      "integrity": "sha512-iEeR2OdVCPkdIPUszL8gJnKNu4MR8ANh7y0u/LPyaatYezgaWxUZEzhFntloqQq+HE6MZkFy+cl+xzCNuljOdw=="
+    },
     "node_modules/@hls-downloader/core": {
       "resolved": "../../core",
       "link": true
@@ -1799,6 +1805,11 @@
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
       "integrity": "sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA=="
     },
+    "@github/mini-throttle": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.0.tgz",
+      "integrity": "sha512-iEeR2OdVCPkdIPUszL8gJnKNu4MR8ANh7y0u/LPyaatYezgaWxUZEzhFntloqQq+HE6MZkFy+cl+xzCNuljOdw=="
+    },
     "@hls-downloader/core": {
       "version": "file:../../core",
       "requires": {
diff --git a/src/extension/extension-background/package.json b/src/extension/extension-background/package.json
index 3a7f5f53..3833e1ce 100644
--- a/src/extension/extension-background/package.json
+++ b/src/extension/extension-background/package.json
@@ -17,6 +17,7 @@
     "typescript": "4.9.5"
   },
   "dependencies": {
+    "@github/mini-throttle": "^2.1.0",
     "@hls-downloader/core": "file:../../core",
     "@types/uuid": "^7.0.2",
     "@videojs/vhs-utils": "^1.3.0",
diff --git a/src/extension/extension-background/src/index.ts b/src/extension/extension-background/src/index.ts
index 2cb44d42..ba10e198 100644
--- a/src/extension/extension-background/src/index.ts
+++ b/src/extension/extension-background/src/index.ts
@@ -6,6 +6,7 @@ import { CryptoDecryptor } from "./services/crypto-decryptor";
 import { FetchLoader } from "./services/fetch-loader";
 import { IndexedDBFS } from "./services/indexedb-fs";
 import { M3u8Parser } from "./services/m3u8-parser";
+import { throttle } from "@github/mini-throttle";
 
 (async () => {
   const state = await getState();
@@ -22,7 +23,7 @@ import { M3u8Parser } from "./services/m3u8-parser";
   wrapStore(store);
 
   store.subscribe(() => {
-    saveState(store.getState());
+    throttle(saveState, 100);
   });
 
   subscribeListeners(store);
diff --git a/src/extension/extension-background/src/persistState.ts b/src/extension/extension-background/src/persistState.ts
index 21f86708..d6ad9ea0 100644
--- a/src/extension/extension-background/src/persistState.ts
+++ b/src/extension/extension-background/src/persistState.ts
@@ -1,7 +1,8 @@
 import { browser } from "webextension-polyfill-ts";
 import { RootState } from "@hls-downloader/core/lib/adapters/redux/root-reducer";
 
-export async function saveState(state: RootState) {
+export async function saveState() {
+  const state = getState();
   if (!state) {
     return;
   }