Я пытаюсь улучшить производительность своей JavaScript -функции. Я рисую с myPopulation = 50.000 точек на холсте, и это занимает около 230 мс. Поскольку у меня это есть в другом l oop с частотой 100 мс, я получаю задержку из-за функции ниже.
function drawThis(intervals) {
ctx.clearRect(0, 0, myWidth, myHeight);
ctx.beginPath();
for (var i = 0; i < myPopulation; i++) {
ctx.arc(persons[i].posX, persons[i].posY, 2, 0, 2 * Math.PI);
if (persons[i].infected) {
ctx.fillStyle = "#FF0000";
}
else {
ctx.fillStyle = "#000000";
}
if (i < myPopulation - 1) {
ctx.moveTo(persons[i + 1].posX, persons[i + 1].posY);
}
}
ctx.fill();
Моя идея состояла в том, чтобы разделить myPopulation на равные интервалы с помощью вспомогательной функции, такой как
var myIntervals = divideRangeInNParts(0, myPopulation, intervals);
и им параллельно. Таким образом, псевдокод будет выглядеть так:
divide myPopulation in equal parts
drawThis(interval[0][0], interval[0][1]);
drawThis(interval[1][0], interval[1][1]);
drawThis(interval[2][0], interval[2][1]);
drawThis(interval[3][0], interval[3][1]);
[...]
wait for all of them to finish
continue
Я много читал о JavaScript как однопоточном языке, Promises, Web Workders et c., Но я не смог найти никакого решения что подходит моей проблеме.
Любая идея или намек? Я новичок здесь, и если есть какие-либо проблемы с моим вопросом, пожалуйста, сообщите мне также. Заранее спасибо