perf of walking around is poor

hellochar commented 7 years ago

game shouldn't lag just walking about

hellochar commented 7 years ago

General notes about perf testing:

turn react production mode on; rendering can become up to 5x faster
loggers can slow things down, and the React DevTools extension will really slow things down (if you have it turned on)
test in the worst case where all the map tiles are visible - browser rendering can be significant (>50% of time)

hellochar commented 7 years ago

Tested perf by:

running with NODE_ENV=production yarn start (production React)
visting localhost:3333 (no debug, but with animations)
have debugger turned on, spawn the map
walk around at 100% zoom (and a maximized screen window) until ~50% of the map was explored
Machine is plugged in and on "High performance" power plan
on commit 13a544e76eb9581e2f8cc0d60290b778b2bc7ff1
then Timeline record (on Chrome) 12 moves left/right (download at TimelineRawData-20161213T000953.json.txt)

Perf breakdown:

55ms to update the respond to keypress
16ms delay between keypress and React updating (note: because of lodash's debounce(0) on notify)
16ms for React to render
65ms to recalculate styles (note: 3600 elements are effected), 4 ms for layout (root is the document), 12ms for layer tree, 4ms hit test, 10ms update layer tree, 10ms paint (painting the .rg-level element)

While idling (user not doing anything):

50% of free time is spent Rendering. ~20% of free time is spent painting. And then ~25% is spent in "Other", leaving almost no time in the main thread free. Looks like while idling, ~100 elements constantly need style recalculated (4ms, layout takes ~1.5ms (11 elements need layout), update layer tree takes ~5.5, paint takes ~2ms (and paints the whole document again).

Key takeaways

responding to keypress is time taken for game logic/game model to update. To improve this, we should actually modify the logic/modify how we're updating the game.
- Looks like most of the time is spent on the simpleEntitiesReducer's EntityUpdate method (aka simply re-assigning the entity). This isn't probably because we're duplicating a ~200 element array, 200 times, so it's O(n^2)
styles are being recalculated for every element on the page. The map has 1800 elements (x2 is 3600) so every single tile is being hit for some reason, even though most of them don't change.