Webworker Offscreen-Canvas-Leistungsprobleme ⇐ JavaScript

[Anonymous]

Ich habe zwei Leinwände im Körper einer HTML-Datei. Ich greife normalerweise auf die erste Leinwand aus einem Haupt -Thread -Skript und führe eine Animation mit RequestArimationFrame durch. Die zweite Leinwand sollte den Hintergrund zeichnen und erhält eine Reihe von Objekten pro Rahmen zum Zeichnen. Da diese Hintergrundzeichnung relativ schwer ist und ich nicht möchte, dass die Animation auf der ersten Leinwand verziert ist, habe ich die zweite Leinwand über TransferControllToFOFFSCreen an einen Webworker übertragen. In jedem Frame sende ich die Liste der Objekte an den Webworker und er zieht sie direkt auf die zweite Leinwand. Aber irgendwie wird sich die Leistung auf der Hauptleinwand auch verschlechtert, wenn ich die Rendering -Aufgaben für den Arbeiter erhöhe? Es ist so schlimm, dass selbst das Rendern von allem im Haupt -Thread schneller zu sein scheint.

Code: Select all

main.js
const mainCanvas = document.getElementById("main-canvas");
const ctx = mainCanvas.getContext("2d");
let offscreenCanvas = document.getElementById("offscreen-canvas");
offscreeenCanvas = offscreenCanvas.tranferControlToOffscreen();

const worker = new Worker("worker.js");
worker.postMessage({type: "init", canvas: offscreenCanvas}, [offscreenCanvas]);

let workerIsDone = true;

function drawScene(objects){

renderForeground(ctx);

if (workerIsDone){
workerIsDone = false;
worker.postMessage({type:"render", objects: objects});
}

requestAnimationFrame(drawScene);
}

worker.onmessage = ()=> workerIsDone = true;
< /code>
//worker.js

let offscreenCanvas;
let ctx;

onmessage = (e) => {
if (e.data.type === 'init') {
const { canvas } = e.data;

offscreenCanvas = canvas;
ctx = offscreenCanvas.getContext('2d');
}

if (e.data.type === 'render' && ctx) {
renderBackground(ctx, e.data.objects);

postMessage("Worker is finished");
}
};