Улучшения производительности GraphViz ⇐ Javascript

[Anonymous]

Я использую указанную ниже функцию для отображения «дерева технологий» в игре, которую создаю. Это работает, но при росте дерева технологий его производительность снижается. В моем случае рендеринг занимает до 3 секунд, и он вызывается всякий раз, когда изменяется состояние графика, что в моей игре может происходить каждые 10 секунд или около того, если пользователь находится на экране, который это показывает.Мне интересно, будет ли полезно использовать веб-воркера. Я потратил несколько часов, пытаясь его настроить, но мне могли бы пригодиться несколько советов о том, какие библиотеки использовать для этого и как их настроить. используя CDN и ES6, поскольку мой проект — это Интернет. app, а не nodeJS.
Если это не решение, необходимое для ускорения рендеринга, какие библиотеки получше я могу использовать? Я уже кэширую рендеринг на тот случай, если состояние не меняется и, например, пользователь просто переключается на этот экран, но если он находится на этом экране и его необходимо изменить, мне нужно показать это обновление.
Вот функция и то, что я передаю:
export async function drawTechTree(techData, svgElement, renew) {
const cachedTree = getRenderedTechTree();
const container = document.querySelector(svgElement);
container.innerHTML = '';

const bgColor = getComputedStyle(container).getPropertyValue('--bg-color').trim();
const textColor = getComputedStyle(container).getPropertyValue('--text-color').trim();

const researchedBgColor = getComputedStyle(container).getPropertyValue('--text-color').trim();
const researchedTextColor = getComputedStyle(container).getPropertyValue('--ready-text').trim();

const researchedTechs = getTechUnlockedArray();

const svgWidth = container.clientWidth || container.parentNode.clientWidth;
const svgHeight = container.clientHeight || container.parentNode.clientHeight;

if (cachedTree && !renew) {
container.innerHTML = '';
container.appendChild(cachedTree.cloneNode(true));
setupTooltip(svgElement);
return;
}

let graphDef = `digraph TechTree {
graph [bgcolor="${bgColor}", size="${svgWidth / 72},${svgHeight / 72}!", size="10,7!", rankdir="TB"];
node [
color="${textColor}"
style="filled,rounded",
shape="box",
fontname="Arial",
fontsize=24,
penwidth=4
fixedsize=true,
width=4.5,
height=1.3
];
edge [
color="${textColor}",
penwidth=2,
arrowsize=1.2,
fontname="Arial",
fontsize=10
];
`;

let title = `??????`;

for (const [key, value] of Object.entries(techData)) {
const isResearched = researchedTechs.includes(key);
const nodeBgColor = isResearched ? researchedBgColor : bgColor;
const nodeTextColor = isResearched ? researchedTextColor : textColor;

const capitalisedTechName = capitaliseString(key);
const separatedCapitalisedTechNames = capitalisedTechName.replace(/([a-z])([A-Z])/g, '$1 $2');
const price = value.price;

if (getUpcomingTechArray().includes(key) && !getRevealedTechArray().includes(key)) {
title = `???Price: ${price}`;
} else {
title = `${separatedCapitalisedTechNames}
Price: ${price}`;
}
graphDef += `${key} [label= shape="box" style="rounded,filled" fontcolor="${nodeTextColor}" fillcolor="${nodeBgColor}" fontname="Arial"];\n`;
}

for (const [key, value] of Object.entries(techData)) {
const appearsAt = value.appearsAt || [];
if (appearsAt.length > 1) {
for (let i = 1; i < appearsAt.length; i++) {
const prereq = appearsAt;
if (prereq) {
graphDef += `${prereq} -> ${key};\n`;
}
}
}
}

graphDef += "}";

const graphviz = d3.select(svgElement)
.graphviz()
.zoom(false)
.scale(0.8)
.fit(false);

graphviz.renderDot(graphDef);

setTimeout(() => {
setupTooltip(svgElement);
setRenderedTechTree(container);
}, 50);
}

Я передаю:
export async function getTechTreeData(renew) {

let techData = getResourceDataObject('techs');
const unlockedTechs = getTechUnlockedArray();
const upcomingTechs = getUpcomingTechArray();

techData = Object.fromEntries(
Object.entries(techData).filter(([key]) =>
unlockedTechs.includes(key) || upcomingTechs.includes(key)
)
);

await drawTechTree(techData, '#techTreeSvg', renew);
}

Я пробовал использовать таймер и согласовывать время, затраченное на каждую часть функции, но узким местом является то, где она ее отображает, иногда это занимает до 3 секунд, так что, возможно, мне нужно лучшее решение или помощь в настройке веб-работника, который упоминается в документации GraphViz, но я не могу работать в среде CDN ES6.
Так что на самом деле открытый вариант, либо помогите с этим или идеи по улучшению библиотек для моего потребности, а именно визуализация данных моего дерева технологий, которые выглядят следующим образом:
techs: {
knowledgeSharing: { appearsAt: [0, null, null], prereqs: [null], price: 150, idForRenderPosition: 10 },
fusionTheory: { appearsAt: [500, "knowledgeSharing", ""], prereqs: ['Knowledge Sharing'], price: 750, idForRenderPosition: 20 },
hydrogenFusion: { appearsAt: [1000, "fusionTheory", ""], prereqs: ['Fusion Theory'], price: 1150, idForRenderPosition: 30 },
heliumFusion: { appearsAt: [2000, "hydrogenFusion", ""], prereqs: ['Hydrogen Fusion'], price: 2300, idForRenderPosition: 40 },
carbonFusion: { appearsAt: [4100, "nobleGasCollection", ""], prereqs: ['Noble Gas Collection'], price: 4300, idForRenderPosition: 50 },
basicPowerGeneration: { appearsAt: [3000, "heliumFusion", ""], prereqs: ['Helium Fusion'], price: 4200, idForRenderPosition: 51 },
sodiumIonPowerStorage: { appearsAt: [5000, "basicPowerGeneration", ""], prereqs: ['Basic Power Generation'], price: 7000, idForRenderPosition: 52 }
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... provements