BurkusCat
commented
2 years ago With all the counters visible, the task time has went from 120ms~ to under 60ms~ (aka 8fps~ to 17fps~).
The performance graph looks completely different now. The script run time is around 7ms~ which is a great sign for trying to get 60fps (there could be micro optimisations here if we ever need to look but script time is very short now relative to the entire frame).
Recalculate style takes 30ms which is a huge amount of time. Layout takes around 10ms. Paint takes around 5ms. My hope is that savings can be made here in the future.
Issue fixes
Fixes #162 Fixes #209 Fixes #212 Fixes #213 Fixes #214 Fixes #215
Benchmarks
Methodology
Basic methodology is to have very little running on my PC. Then I opened the browser window to a certain size with dev tools open. I run the app in the terminal (and install any npm package changes beforehand) and reload the webpage in my browser. I select all counter filters to show everything. I wait for the graph to settle. I start recording a benchmark in the web browser dev tools. I slowly move a particular operator around in a small circle. I stop recording after a few seconds. I roughly eyeball the performance graph and see roughly on average what the 'ms' improvements are.
Results
Master branch (120ms~ task)
'Split processing transforms + rendering into separate steps' (56ms~ task)
'Perform all relationship rendering after all processing' (60ms~ task)
'Perform node rendering after all processing' (70ms~ task)
'High accuracy simulation button' (High accuracy = 65ms~ task, Low accuracy = 60ms~ task) High
Low
'Split main relationship transform logic' (60ms~ task)
'Use .webp instead of .png' (57ms~ task)
'Simplify split processing + rendering logic' (57ms~ task)
'Update to d3js v5.16.0' (57ms~ task)
'Update d3js to v6.7.0' (57ms~ task)
'Update d3js to v7.4.4' (57ms~ task)