-1

我正在做一些小的性能测试来渲染简单的多线图。我将不得不将多个 twojs 实例呈现为图表。什么被认为是好的做法？

https://jsfiddle.net/76ekv53c/5/


const series = new Array(5000).fill(0).map((x,i) => [i, ~~(Math.random()*100)])

const _2 = new Two({ width: 500, height: 200, type : Two.Types.canvas }).appendTo(document.getElementById('chart'))

const circles = []
const lines = []

let zoomFactor = 0.01

_2.bind('update', () => {

  zoomFactor=(Math.sin(+new Date()/1000)*10+10)

  lines.forEach((line, index) => {

    line.vertices[0].set(index*zoomFactor,  Math.sin((index)/10)*100+100)
    line.vertices[1].set((index-1)*zoomFactor, Math.sin((index-1)/10)*100+100)

  })
  circles.forEach((circle, index) => {
    circle.translation.set(index*zoomFactor, Math.sin(index/10)*100+100)
  })

}).play()


const init = (factor = 1) => {
  series.forEach((point, index) => {
    const x = point[0]
    const y = point[1]
    const circle = _2.makeCircle(x*factor, y, 2)
    const line = _2.makeLine(x*factor, y, x+1*factor, series[index+1] ? series[index+1][1] : series[index][1])
    lines.push(line)
    circles.push(circle)
  })
}

init()

有没有办法从中挤出更多的性能？第一次在这里使用two.js！我只需要更新每个点的位置。

4

1 回答 1

0

我结合了圆和线循环，我节省了Math.sin()，每圈只计算一个循环，而不是 OP 中的四个（可能它们自己缓存）。很难知道它是否改善了很多，但看看......

const series = new Array(5000).fill(0).map((x,i) => [i, ~~(Math.random()*100)])

const _2 = new Two({ width: 500, height: 200, type : Two.Types.canvas }).appendTo(document.getElementById('chart'))

const circles = []
const lines = []

let zoomFactor = 0.01

_2.bind('update', (frame, dt) => {
  zoomFactor=(Math.sin(+new Date()/1000)*10+10)
  let prevSin = null;
  lines.forEach((line, index) => {
    let zoomIndex = index*zoomFactor
    let sin_i = Math.sin(index/10)*100+100;
    prevSin = prevSin || Math.sin((index-1)/10)*100+100
    
    line.vertices[0].set(zoomIndex,  sin_i)
    line.vertices[1].set((index-1)*zoomFactor, prevSin)
    
    let circle = circles[index];
    circle.translation.set(zoomIndex, sin_i)
    
    prevSin = sin_i;
  })
  //circles.forEach((circle, index) => {
    //circle.translation.set(index*zoomFactor, Math.sin(index/10)*100+100)
  //})

}).play()


const init = (factor = 1) => {
  series.forEach((point, index) => {
    const x = point[0]
    const y = point[1]
    const circle = _2.makeCircle(x*factor, y, 2)
    const line = _2.makeLine(x*factor, y, x+1*factor, series[index+1] ? series[index+1][1] : series[index][1])
    lines.push(line)
    circles.push(circle)
  })
}

init()
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.7.8/two.min.js"></script>
<div id="chart"></div>

于 2021-08-12T05:27:22.910 回答