Animation slowed down when element is expanded in markup view

RESOLVED FIXED in Firefox 39

Status

RESOLVED FIXED
4 years ago
2 months ago

People

(Reporter: bgrins, Assigned: bgrins)

Tracking

unspecified
Firefox 39
Dependency tree / graph

Firefox Tracking Flags

(firefox39 fixed)

Details

(URL)

Attachments

(3 attachments)

(Assignee)

Description

4 years ago
STR: 

Open http://maxwellito.github.io/vivus/#polaroid
Let the animation finish, then press "Replay" to see the current speed.
Open devtools and inspect the #polaroid SVG element
Press "Replay".  It may be a bit slower, but not too much.
Alt+Click to expand all the children of #polaroid
Press "Replay".  Things are very slow now.

This actually seems much better with e10s so that leads me to believe that it's the markup view frontend causing jank.  We should profile this and improve perf.

It's possible that simply highlighting only the attribute that changed rather than the whole element could improve things, which would be killing two birds with one stone.
(Assignee)

Comment 1

4 years ago
Created attachment 8572815 [details]
animation-markupview-profile.json

Profile that shows what is taking a lot of time.  If you invert call tree you can see that _createAttribute is calling template() for every attribute and it is very slow.
(Assignee)

Comment 2

4 years ago
Created attachment 8572816 [details]
animation-markupview-profile-screenshot.png

Screenshot of profile
(Assignee)

Updated

4 years ago
Blocks: 1139644
(Assignee)

Comment 3

4 years ago
Created attachment 8572939 [details] [diff] [review]
markup-attributes-perf.patch

This greatly limits the number of DOM manipulations per mutation and gets rid of the jank on the testcase.  Running some timings for the update() function this appears to take it down from ~4-10ms to ~0-2ms.

Try push: https://treeherder.mozilla.org/#/jobs?repo=try&revision=8b62d0514498
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
Attachment #8572939 - Flags: review?(mratcliffe)
(Assignee)

Updated

4 years ago
OS: Mac OS X → All
Hardware: x86 → All
Thanks for making that change Brian, this part was always a bit weird to work with.
I was experimenting with re-writing the markup-view recently (with react) and was testing it on sites that mutate a lot of attributes very rapidly, to animate elements via script. I ended up implementing an attribute refresh loop with a rather slow timeout (200ms or so). This helped a lot avoiding the inspector from slowing down the page, and I didn't feel this was visible to the user.
Comment on attachment 8572939 [details] [diff] [review]
markup-attributes-perf.patch

Review of attachment 8572939 [details] [diff] [review]:
-----------------------------------------------------------------

I had a patch somewhere that used a similar approach and think it is the best we can do for the moment... at least until we rewrite the tool.

When we land this bug 1080884 will also be fixed.
Attachment #8572939 - Flags: review?(mratcliffe) → review+
(Assignee)

Updated

4 years ago
Blocks: 1080884
(Assignee)

Updated

4 years ago
Keywords: checkin-needed
(Assignee)

Comment 6

4 years ago
https://hg.mozilla.org/integration/fx-team/rev/1a99e0788665
Keywords: checkin-needed
Whiteboard: [fixed-in-fx-team]
https://hg.mozilla.org/mozilla-central/rev/1a99e0788665
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
status-firefox39: --- → fixed
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 39
(Assignee)

Updated

4 years ago
See Also: → bug 1145914
(Assignee)

Updated

4 years ago
Depends on: 1147128
(Assignee)

Updated

4 years ago
No longer blocks: 1139644
(Assignee)

Updated

3 years ago
Duplicate of this bug: 1090890

Updated

2 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.