Блог

Я провожу несколько небольших тестов производительности для рендеринга простых многострочных диаграмм. Мне придется отображать несколько экземпляров pixi в виде диаграмм. Что здесь считается хорошей практикой?

https://jsfiddle.net/6ckdbha2/10/

 const _app = new PIXI.Application({width:1000, height:200})
var g = new PIXI.Graphics()

const series = []

for(let i=0; i<100; i  ){
  series.push([i, ~~(Math.random()*100)])
}

let zoomFactor = 0.01

requestAnimationFrame(animate)

async function animate() {
  zoomFactor=(Math.sin( new Date()/1000)*10 15)
  redraw(zoomFactor)
  //await new Promise(rs => setTimeout(rs, 100))
  requestAnimationFrame(animate)
}

const init = (factor = 1) => {
  g.clear()
  for(let i = 0 ; i < 10; i  ){
    g.position.set(0, 0)
    g.moveTo(0, series[i] (i*10))
    series.forEach((point, index) => {
      let x = point[0]
      let y = point[1]  (i*10)
      const pre = series[index-1] || 0

            g.drawCircle(x*factor, y, 4)
      g.lineStyle(1, index % 2 ? 0xffffff : 0xff0000, 0.5)
      g.lineTo(x * (factor), y)
    })
  }
}

init()

function redraw(zoomFactor) {
  init(zoomFactor)
}


document.getElementById('chart').appendChild(_app.view)
_app.stage.addChild(g)
 

Есть ли какой-нибудь способ выжать из этого больше производительности?
При первом использовании PIXI.js сюда!
Возможно, путем манипулирования объектом graphicsData?
Мне просто нужно обновить положение каждой точки.