feat: implement throttling for mousemove events to improve performance

src/components/popups/popupBox/component.tsx

@@ -8,6 +8,7 @@ import { getIframeDoc } from "../../../utils/reader/docUtil";
 import PopupAssist from "../popupAssist";
 import { isElectron } from "react-device-detect";
 import { ConfigService } from "../../../assets/lib/kookit-extra-browser.min";
+import { throttle } from "../../../utils/common";
 
 const POPUP_SIZE_KEY = "popupBoxSize";
 const DEFAULT_WIDTH = 500;
@@ -79,7 +80,8 @@ class PopupBox extends React.Component<PopupBoxProps, PopupBoxStates> {
       });
       this.setState({ isShowUrl });
     }
-    document.addEventListener("mousemove", this.handleResizeMove);
+    const throttledMouseMove = throttle(this.handleResizeMove, 100);
+    document.addEventListener("mousemove", throttledMouseMove);
     document.addEventListener("mouseup", this.handleResizeEnd);
   }
 

src/pages/reader/component.tsx

@@ -30,6 +30,7 @@ import {
   READING_PANEL_TOGGLE_EVENT,
   MOUSE_POSITION_EVENT,
 } from "../../utils/reader/mouseEvent";
+import { throttle } from "../../utils/common";
 declare var window: any;
 let lock = false; //prevent from clicking too fasts
 let throttleTime = 200;
@@ -141,12 +142,14 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
         ConfigService.setReaderConfig("isFinishWebReading", "yes");
       }
     });
-    window.addEventListener("mousemove", () => {
+    const handleMouseMove = () => {
       isMouseMoving = true;
       setTimeout(() => {
         isMouseMoving = false;
       }, 100);
-    });
+    };
+    const throttledMouseMove = throttle(handleMouseMove, 100);
+    window.addEventListener("mousemove", throttledMouseMove);
     window.addEventListener("mousemove", this.handleEdgeProximity);
     window.addEventListener(MOUSE_POSITION_EVENT, this.handleEdgeProximity);
     window.addEventListener(
@@ -208,10 +211,7 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
 
   componentWillUnmount() {
     window.removeEventListener("mousemove", this.handleEdgeProximity);
-    window.removeEventListener(
-      MOUSE_POSITION_EVENT,
-      this.handleEdgeProximity
-    );
+    window.removeEventListener(MOUSE_POSITION_EVENT, this.handleEdgeProximity);
     window.removeEventListener(
       READING_PANEL_TOGGLE_EVENT,
       this.handleReadingPanelToggle

src/utils/reader/mouseEvent.ts

@@ -1,7 +1,12 @@
 import { ConfigService } from "../../assets/lib/kookit-extra-browser.min";
 import { isElectron } from "react-device-detect";
 import { getIframeDoc, getIframeWin } from "./docUtil";
-import { handleExitFullScreen, handleFullScreen, sleep } from "../common";
+import {
+  handleExitFullScreen,
+  handleFullScreen,
+  sleep,
+  throttle,
+} from "../common";
 import Hammer from "hammerjs";
 import TTSUtil from "./ttsUtil";
 import {
@@ -454,7 +459,7 @@ export const bindHtmlEvent = (
     { passive: false }
   );
 
-  doc.addEventListener("mousemove", (event: any) => {
+  const throttledMouseMove = throttle((event: any) => {
     window.dispatchEvent(
       new CustomEvent(MOUSE_POSITION_EVENT, {
         detail: {
@@ -463,7 +468,9 @@ export const bindHtmlEvent = (
         },
       })
     );
-  });
+  }, 100);
+
+  doc.addEventListener("mousemove", throttledMouseMove);
 };
 export const htmlMouseEvent = (
   rendition: any,