perf: ⚡ 只在需要时才创建 worker

Author: hymbz

src/components/Manga/actions/imageRecognition.ts

@@ -3,7 +3,7 @@ import { unwrap } from 'solid-js/store';
 
 import type { MainFn } from 'worker/ImageRecognition';
 
-import { getImageData, log, throttle, wait } from 'helper';
+import { getImageData, log, onec, throttle, wait } from 'helper';
 import { showCanvas, showColorArea, showGrayList } from 'worker/helper';
 import * as worker from 'worker/ImageRecognition';
 
@@ -23,6 +23,7 @@ export const handleImgRecognition = async (
     imgEle ??= await wait(() => getImgEle(url), 1000);
     if (!imgEle) return log.warn('获取图片元素失败');
     const { data, width, height } = getImageData(imgEle);
+    initWorker();
     return worker.recognitionImg(
       Comlink.transfer(data, [data.buffer]),
       width,
@@ -33,12 +34,14 @@ export const handleImgRecognition = async (
   }
 };
 
-const mainFn = {
-  log,
-  updatePageData: throttle(() => setState(updatePageData), 1000),
-  setImg: (url, key, val) =>
-    Reflect.has(store.imgMap, url) && setState('imgMap', url, key, val),
-} satisfies MainFn;
-if (isDevMode)
-  Object.assign(mainFn, { showCanvas, showColorArea, showGrayList });
-worker.setMainFn(Comlink.proxy(mainFn), Object.keys(mainFn));
+const initWorker = onec(() => {
+  const mainFn = {
+    log,
+    updatePageData: throttle(() => setState(updatePageData), 1000),
+    setImg: (url, key, val) =>
+      Reflect.has(store.imgMap, url) && setState('imgMap', url, key, val),
+  } satisfies MainFn;
+  if (isDevMode)
+    Object.assign(mainFn, { showCanvas, showColorArea, showGrayList });
+  worker.setMainFn(Comlink.proxy(mainFn), Object.keys(mainFn));
+});

src/components/Manga/actions/imageUpscale.ts

@@ -3,7 +3,7 @@ import * as Comlink from 'comlink';
 import type { MainFn } from 'worker/ImageUpscale';
 
 import { toast } from 'components/Toast';
-import { createEffectOn, getImageData, log, t, wait } from 'helper';
+import { createEffectOn, getImageData, log, onec, t, wait } from 'helper';
 import { request } from 'request';
 import * as worker from 'worker/ImageUpscale';
 
@@ -14,6 +14,7 @@ import { activeImgIndex, imgList, isUpscale } from './memo';
 export const upscaleImage = async (url: string, imgEle: HTMLImageElement) => {
   setState('imgMap', url, 'upscaleUrl', '');
   const { data, width, height } = getImageData(imgEle);
+  initWorker();
   await worker.upscaleImage(
     Comlink.transfer(data, [data.buffer]),
     width,
@@ -105,12 +106,14 @@ const getModel = async () => {
   }
 };
 
-const mainFn = {
-  log,
-  toast,
-  t,
-  setImg: (url, key, val) =>
-    Reflect.has(store.imgMap, url) && setState('imgMap', url, key, val),
-  getModel,
-} satisfies MainFn;
-worker.setMainFn(Comlink.proxy(mainFn), Object.keys(mainFn));
+const initWorker = onec(() => {
+  const mainFn = {
+    log,
+    toast,
+    t,
+    setImg: (url, key, val) =>
+      Reflect.has(store.imgMap, url) && setState('imgMap', url, key, val),
+    getModel,
+  } satisfies MainFn;
+  worker.setMainFn(Comlink.proxy(mainFn), Object.keys(mainFn));
+});

src/helper/other.ts

@@ -38,6 +38,17 @@ export const inRange = (min: number, val: number, max: number) =>
 export const approx = (val: number, target: number, range: number) =>
   Math.abs(target - val) <= range;
 
+/** 创建一个只会执行一次的函数 */
+export const onec = (fn: () => unknown) => {
+  let hasRun = false;
+
+  return () => {
+    if (hasRun) return;
+    hasRun = true;
+    fn();
+  };
+};
+
 /** 创建顺序递增的数组 */
 export function range(a: number, b?: number): number[];
 export function range<T = number>(a: number, b: (K: number) => T): T[];

src/userscript/detectAd.ts

@@ -1,6 +1,6 @@
 import * as Comlink from 'comlink';
 
-import { log, waitImgLoad } from 'helper';
+import { log, onec, waitImgLoad } from 'helper';
 import { request } from 'main';
 import * as worker from 'worker/detectAd';
 
@@ -81,8 +81,10 @@ export const getAdPageByFileName = (
 ) =>
   getAdPage(fileNameList, (fileName: string) => /^z+/i.test(fileName), adList);
 
-export const isAdImg = (imgBitmap: ImageBitmap) =>
-  worker.isAdImg(Comlink.transfer(imgBitmap, [imgBitmap]));
+export const isAdImg = (imgBitmap: ImageBitmap) => {
+  initWorker();
+  return worker.isAdImg(Comlink.transfer(imgBitmap, [imgBitmap]));
+};
 
 /** 通过图片内容判断是否是广告 */
 export const getAdPageByContent = (
@@ -95,6 +97,8 @@ export const getAdPageByContent = (
     adList,
   );
 
-const mainFn = { log } satisfies MainFn;
-if (isDevMode) Object.assign(mainFn, { showCanvas, showGrayList });
-worker.setMainFn(Comlink.proxy(mainFn), Object.keys(mainFn));
+const initWorker = onec(() => {
+  const mainFn = { log } satisfies MainFn;
+  if (isDevMode) Object.assign(mainFn, { showCanvas, showGrayList });
+  worker.setMainFn(Comlink.proxy(mainFn), Object.keys(mainFn));
+});