Rendering performance is bad when zooming in

[webresh]

Hi and thanks for a great script.

There is a problem I faced accross different platforms in webkit browsers: when you zoom in, all animations become lagged starting from some certain level. Chrome on Android got lagged even with simple swipes.

My further investigation with Chome's developer tools and "timeline tool" showed that there is a very high FPS at the time when swipable area is wide and the amount of tick elements on the minor timeaxis is high.

Chrome tools shows there is a bunch of "Recalculate style" actions. See screen here: http://pasteboard.co/mKmslWiew.png "Forced reflow is a likely performance bottleneck" https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts "Things get problematic if you’ve changed the styles of an element before you ask for its height" - this is what can be seen in timeline.js in several places: for instance a function _assignRowsToMarkers contains a call to _calculateAvailableHeight

So this issue is having a lot of roots and doesn't seem solvable within existing logic of the rendering mechanism, when for instance you have to reposition and animate opacity of 28000 objects on a 130000px width canvas. https://developers.google.com/web/fundamentals/performance/rendering/

Maybe It would be good to make timeaxis scaling working same way as TimelineJS v2 had - simplify look and feel in exchange to a better performance.

There are other questionable operations that affect overall performance. For example I was able to save 200ms of scripting time by adding a line if (tick.tick_text.innerHTML != tick.display_date) before tick.tick_text.innerHTML = tick.display_date; in the _positionTickArray function.

with regards

[maryandmike]

Is anyone interested in fixing this issue? Would love to use this timeline, but need it to work properly!