search

mauriciopoppe / function-plot

A 2d function plotter for the web
https://mauriciopoppe.github.io/function-plot/
MIT License
926 stars 113 forks source link

Introduce a web worker pool to evaluate interval functions in web workers #264

Closed mauriciopoppe closed 9 months ago

mauriciopoppe commented 9 months ago

Design doc at ./design/web-workers.md

Performance numbers

┌─────────┬───────────────────────────────┬─────────┬───────────────────┬──────────┬─────────┐
│ (index) │           Task Name           │ ops/sec │ Average Time (ns) │  Margin  │ Samples │
├─────────┼───────────────────────────────┼─────────┼───────────────────┼──────────┼─────────┤
│    0    │    'compile and eval 1800'    │  '567'  │ 1761171.361090432 │ '±4.58%' │   284   │
│    1    │ 'async compile and eval 1800' │ '1,430' │ 699015.7267567831 │ '±3.78%' │   716   │
└─────────┴───────────────────────────────┴─────────┴───────────────────┴──────────┴─────────┘

The eval pipeline is now parallelized into groups and sent to the web worker pool.

Results

Sync render

functionPlot({
  target: '#playground',
  width: window.innerWidth,
  height: window.innerHeight,
  data: [
    { fn: 'x^2', nSamples: window.innerWidth*5, sampler: 'interval' },
    { fn: 'sin(x)', nSamples: window.innerWidth*5, sampler: 'interval' },
    { fn: '1/x', nSamples: window.innerWidth*5, sampler: 'interval' },
  ]
})

render sync

Async render

functionPlot.withWebWorkers(8)
functionPlot({
  target: '#playground',
  width: window.innerWidth,
  height: window.innerHeight,
  data: [
    { fn: 'x^2', nSamples: window.innerWidth*5, sampler: 'asyncInterval' },
    { fn: 'sin(x)', nSamples: window.innerWidth*5, sampler: 'asyncInterval' },
    { fn: '1/x', nSamples: window.innerWidth*5, sampler: 'asyncInterval' },
  ]
})

render async