NUKnightLab / NUKnightLab/TimelineJS3

Rendering performance is bad when zooming in

Open
#458 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug
Dominant language
JavaScript
Stars
3.2k
Forks
645
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the lag while zooming in on the timeline, then profile the rendering path with Chrome's timeline tool. Start with timeline.js, especially _assignRowsToMarkers, _calculateAvailableHeight, and _positionTickArray, and compare the forced reflows and repeated tick updates described in the report. Done means the zoom and swipe experience improves without the reported rendering bottleneck.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, performance
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.