У меня есть две полотна внутри тела HTML-файла. Я получаю доступ к первым холстам обычно из основного сценария потока и выполняю анимацию с запросом QuestionAnimationFrame. Второй холст должен нарисовать фон и получить массив объектов на кадр для рисования. Поскольку этот фоновый рисунок относительно тяжелый, и я не хочу, чтобы анимация на первом холсте отстаивала, я передал второй холст через TransferControlltofoffscreen на веб -работник. Каждый кадр, который я посылаю списком объектов в веб -работник, и он рисует их непосредственно ко второму холсту. Но каким -то образом производительность на главном холсте также ухудшается, если я увеличу задачи рендеринга у работника? Это настолько плохо, что даже рендерирование всего внутри основного потока кажется быстрее. < /P>
Я уже пытался запросить другой кадр только в том случае, если работник сделал предыдущий, и я знаю, что я мог бы увеличить производительность, сделав функции рендеринга более эффективными, но мне интересно, почему я получаю так плохие результаты от веб -работы.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");
}
};
Подробнее здесь: https://stackoverflow.com/questions/795 ... nce-issues
