perf: MkImgWithBlurhashとMkMediaImageを最適化 (#10782)

* #10781

* fix tsconfig

* fetch image??

* Revert "fetch image??"

This reverts commit 0925c28d5a4f328264c39d5591dc736795541683.

* wip

* Revert "wip"

This reverts commit be97c6cb88318bcea441edeeecb69b6d6ed0dd8f.

* loading="eager"

* loading="eager" 2

* error

* wip

* wip

* wip

* wip

* clean up

* fix

* 生成するworkerを1つにする?

* clean up

* use buraha

* wip

* smaller width, height

* update buraha

* clean up

* fix

* Update MkMediaImage.vue

* Update MkImgWithBlurhash.vue

* Revert "fix(frontend): センシティブ設定された画像を開くとき一瞬レイアウトが崩れる問題を修正"

This reverts commit 41e9aa6f9b03107518224e2ebde8889c64408204.

* Update MkMediaList.vue

* Update MkMediaList.vue

* Update MkMediaList.vue

* Update CHANGELOG.md

* wait for decode

* fix

* ?

* (test) remove container-type: inline-size;

* Revert "(test) remove container-type: inline-size;"

This reverts commit 9448e64228428175a3d624c04df1bfad0f59cb69.

* container-name

* Revert "container-name"

This reverts commit 94385d32213a00a06a59fbd2296d6ef1b5f91785.

* width: 100%;

* improve performance

* refactor

* wip

* WIP

* wip

* Revert "wip"

This reverts commit 36e3b75cab8114e423544b79a8e2df353880f43b.

* Revert "WIP"

This reverts commit 05b729ef9189aea052ba411ac10f30a46cc668c8.

* Revert "wip"

This reverts commit 0801e7936116c58154d7cecfea955dd15fa61a77.

* #10860

* wip

* no worker

* Revert "no worker"

This reverts commit a9c49e4fb49976958a7594393343d52be0e082d7.

* :v:

* workerNumber固定は不要

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

1 files changed, 75 insertions, 0 deletions

diff --git a/packages/frontend/src/scripts/worker-multi-dispatch.ts b/packages/frontend/src/scripts/worker-multi-dispatch.ts
new file mode 100644
index 0000000000..1847a8ccff
--- /dev/null
+++ b/packages/frontend/src/scripts/worker-multi-dispatch.ts
@@ -0,0 +1,75 @@
+function defaultUseWorkerNumber(prev: number, totalWorkers: number) {
+    return prev + 1;
+}
+
+export class WorkerMultiDispatch<POST = any, RETURN = any> {
+    private symbol = Symbol('WorkerMultiDispatch');
+    private workers: Worker[] = [];
+    private terminated = false;
+    private prevWorkerNumber = 0;
+    private getUseWorkerNumber = defaultUseWorkerNumber;
+    private finalizationRegistry: FinalizationRegistry<symbol>;
+
+    constructor(workerConstructor: () => Worker, concurrency: number, getUseWorkerNumber = defaultUseWorkerNumber) {
+        this.getUseWorkerNumber = getUseWorkerNumber;
+        for (let i = 0; i < concurrency; i++) {
+            this.workers.push(workerConstructor());
+        }
+
+        this.finalizationRegistry = new FinalizationRegistry(() => {
+            this.terminate();
+        });
+        this.finalizationRegistry.register(this, this.symbol);
+
+        if (_DEV_) console.log('WorkerMultiDispatch: Created', this);
+    }
+
+    public postMessage(message: POST, options?: Transferable[] | StructuredSerializeOptions, useWorkerNumber: typeof defaultUseWorkerNumber = this.getUseWorkerNumber) {
+        let workerNumber = useWorkerNumber(this.prevWorkerNumber, this.workers.length);
+        workerNumber = Math.abs(Math.round(workerNumber)) % this.workers.length;
+        if (_DEV_) console.log('WorkerMultiDispatch: Posting message to worker', workerNumber, useWorkerNumber);
+        this.prevWorkerNumber = workerNumber;
+
+        // 不毛だがunionをoverloadに突っ込めない
+        // https://stackoverflow.com/questions/66507585/overload-signatures-union-types-and-no-overload-matches-this-call-error
+        // https://github.com/microsoft/TypeScript/issues/14107
+        if (Array.isArray(options)) {
+            this.workers[workerNumber].postMessage(message, options);
+        } else {
+            this.workers[workerNumber].postMessage(message, options);
+        }
+        return workerNumber;
+    }
+
+    public addListener(callback: (this: Worker, ev: MessageEvent<RETURN>) => any, options?: boolean | AddEventListenerOptions) {
+        this.workers.forEach(worker => {
+            worker.addEventListener('message', callback, options);
+        });
+    }
+
+    public removeListener(callback: (this: Worker, ev: MessageEvent<RETURN>) => any, options?: boolean | AddEventListenerOptions) {
+        this.workers.forEach(worker => {
+            worker.removeEventListener('message', callback, options);
+        });
+    }
+
+    public terminate() {
+        this.terminated = true;
+        if (_DEV_) console.log('WorkerMultiDispatch: Terminating', this);
+        this.workers.forEach(worker => {
+            worker.terminate();
+        });
+        this.workers = [];
+        this.finalizationRegistry.unregister(this);
+    }
+
+    public isTerminated() {
+        return this.terminated;
+    }
+    public getWorkers() {
+        return this.workers;
+    }
+    public getSymbol() {
+        return this.symbol;
+    }
+}