Improved performance during css transitions
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.7k
- Forks
- 351
- Avg merge
- 1d 22h
- Merged PRs (30d)
- 1
Description
I've been profiling ember-table's performance during a css width transition that causes the table to reflow. There's a lot of work being done for intermediate animation states that just gets thrown away next frame. It would be nice if there was a way to tell ember-table not to do any reflow work temporarily. Then you could set that flag for the duration of your css animation.
The hotspots I've found so far are due to third party event generators, ResizeSensor and hammer.js.
- You can avoid one ResizeSensor by never using
t.loadMoreso that anember-table-loading-morenever appears in your DOM. I recommend not usingt.loadMoreif you need liquid animations resizing an ember-table. - The other ResizeSensor lives in
ember-theadand there's no current way to avoid this one. I temporarily disabled it by modifying the library and the Scripting work in the profiler drops dramatically during a resize animation. - hammer.js usage in
ember-thalso has no way to be avoided, short of not having a header on your table I guess. I similarly disabled this code to get a profiler snapshot.
Note the dramatic improvement in scripting and rendering time. We are operating within a frame budget here, so these milliseconds really matter. They compound frame after frame for the duration of the animation.
Before: 68ms
After: 47ms (31% improvement)
With ResizeSensor and hammer.js fully disabled:

With no t.loadMore, running stock ember-table v3

Apps could get smoother animations when using ember-table if they could disable ResizeSensor and hammer.js for the duration of the animation, and let those libs run once when the animation is done to 'catch up'.
It looks like hammer.js might have a configurable way to do this, by passing an enable function that could check a flag. I saw no easy way to temporarily silence ResizeSensor.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing ResizeSensor usage in ember-thead and ember-table-loading-more, then inspect hammer.js usage in ember-th. Reproduce the CSS width-transition profile described in the issue and determine how those integrations can be temporarily silenced and resumed. Done means applications can disable the reflow-related work during an animation and have both libraries catch up afterward.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100