Page MenuHomePhabricator
Create Task
Maniphest T87160

~200ms spent on CSSStyleDeclaration.getPropertyValue() due to jQuery hide()/show()
Closed, ResolvedPublic8 Estimated Story Points
Actions

Description

About 200ms of VE's load time is spent in CSSStyleDeclaration.getPropertyValue(). It appears that most of the callers are checking the hidden state of elements, which happens whenever you toggle visibility with $.hide. Optimizing that away looks like an easy win.

Screen_Shot_2015-01-18_at_18.40.47.png (1,262×646 px, 177 KB)

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
mw.ViewPageTarget: Use CSS instead of JS for DOM hiding/mutingmediawiki/extensions/VisualEditormaster+32 -121
Re-implement ve.ce.ResizableNode#showHandles using CSSVisualEditor/VisualEditormaster+20 -15
Don't use .hide() in ve.ui.Context constructorVisualEditor/VisualEditormaster+14 -3
ce.MWReferencesListNode: Remove unnecessary .show() callmediawiki/extensions/VisualEditormaster+1 -1
Customize query in gerrit

Related Objects
Search...

Event Timeline

ori created this task.Jan 19 2015, 2:50 AM
ori raised the priority of this task from to Needs Triage.
ori updated the task description. (Show Details)
ori added projects: VisualEditor, VisualEditor-Performance.
ori added subscribers: ori, Catrope, Krinkle.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 19 2015, 2:50 AM
ori assigned this task to Krinkle.Jan 20 2015, 7:17 PM
ori set Security to None.
Jdforrester-WMF triaged this task as Unbreak Now! priority.Jan 20 2015, 8:07 PM
Jdforrester-WMF moved this task from To Triage to Bug Fixes on the VisualEditor board.
Catrope claimed this task.Jan 21 2015, 12:07 AM
ori moved this task from Backlog to Doing on the VisualEditor-Performance board.Jan 23 2015, 7:48 AM
gerritbot added a project: Patch-For-Review.Jan 23 2015, 11:04 PM
gerritbot subscribed.

Change 186524 had a related patch set uploaded (by Catrope):
Don't use .hide() in ve.ui.Context constructor

https://gerrit.wikimedia.org/r/186524

Patch-For-Review

gerritbot added a comment.Jan 23 2015, 11:08 PM

Change 186527 had a related patch set uploaded (by Catrope):
Re-implement ve.ce.ResizableNode#showHandles using CSS

https://gerrit.wikimedia.org/r/186527

Patch-For-Review

gerritbot added a comment.Jan 23 2015, 11:10 PM

Change 186528 had a related patch set uploaded (by Catrope):
ce.MWReferencesListNode: Remove unnecessary .show() call

https://gerrit.wikimedia.org/r/186528

Patch-For-Review

Jdforrester-WMF added a project: VisualEditor 2014/15 Q3 blockers.Jan 23 2015, 11:32 PM
Jdforrester-WMF moved this task from Bug Fixes to Blocked on the VisualEditor board.Jan 24 2015, 1:45 AM
gerritbot added a comment.Jan 26 2015, 6:30 AM

Change 186528 merged by jenkins-bot:
ce.MWReferencesListNode: Remove unnecessary .show() call

https://gerrit.wikimedia.org/r/186528

Catrope mentioned this in rEVED154d2cb118f8: ce.MWReferencesListNode: Remove unnecessary .show() call.Jan 26 2015, 6:31 AM
gerritbot added a comment.Jan 26 2015, 6:18 PM

Change 186524 merged by jenkins-bot:
Don't use .hide() in ve.ui.Context constructor

https://gerrit.wikimedia.org/r/186524

gerritbot added a comment.Jan 26 2015, 6:18 PM

Change 186527 merged by jenkins-bot:
Re-implement ve.ce.ResizableNode#showHandles using CSS

https://gerrit.wikimedia.org/r/186527

Jdforrester-WMF moved this task from Blocked to FY 18-19 Q3/Q4 on the VisualEditor board.Jan 28 2015, 11:41 PM
Liuxinyu970226 subscribed.Feb 1 2015, 2:35 AM
Jdforrester-WMF moved this task from Nominated to Accepted on the VisualEditor 2014/15 Q3 blockers board.Feb 3 2015, 5:02 PM
Jdforrester-WMF closed this task as Resolved.Feb 4 2015, 4:12 PM
Jdforrester-WMF added a project: WMF-deploy-2015-02-04_(1.25wmf16).
Jdforrester-WMF removed a project: Patch-For-Review.Feb 4 2015, 4:22 PM
• TrevorParscal edited a custom field.Feb 4 2015, 6:46 PM
• TrevorParscal edited a custom field.Feb 4 2015, 7:09 PM
Jdforrester-WMF moved this task from Accepted to Done on the VisualEditor 2014/15 Q3 blockers board.Feb 4 2015, 8:09 PM
gerritbot added a project: Patch-For-Review.Feb 5 2015, 2:55 AM

Change 188733 had a related patch set uploaded (by Krinkle):
mw.ViewPageTarget: Use CSS instead of JS for DOM hiding/muting

https://gerrit.wikimedia.org/r/188733

Patch-For-Review

Krinkle renamed this task from ~200ms spent on CSSStyleDeclaration.getPropertyValue() to ~200ms spent on CSSStyleDeclaration.getPropertyValue() due to jQuery hide()/show().Feb 5 2015, 2:55 AM
Krinkle added a subtask: T87420: OO.ui.PopupWidget.toggle triggers recalc style.
Liuxinyu970226 unsubscribed.Feb 5 2015, 12:21 PM
gerritbot added a comment.Feb 5 2015, 10:37 PM

Change 188733 merged by jenkins-bot:
mw.ViewPageTarget: Use CSS instead of JS for DOM hiding/muting

https://gerrit.wikimedia.org/r/188733

Krinkle mentioned this in rEVED62c1d64ad082: mw.ViewPageTarget: Use CSS instead of JS for DOM hiding/muting.Feb 5 2015, 10:38 PM
ori reopened this task as Open.Feb 13 2015, 12:24 AM

Still seeing this:

Screen_Shot_2015-02-12_at_16.19.44.png (593×351 px, 40 KB)

(On osmium's Barack Obama, all repos on HEAD)

Catrope added a comment.Feb 14 2015, 12:26 AM
In T87160#1035744, @ori wrote:

Still seeing this:

Screen_Shot_2015-02-12_at_16.19.44.png (593×351 px, 40 KB)

(On osmium's Barack Obama, all repos on HEAD)

That's because it's using $.fn.animate rather than CSS transitions. Could we file that as a separate bug please? It's not to do with show/hide or getPropertyValue.

ori mentioned this in T89543: ve.init.mw.ViewPageTarget#transformPage triggers recalculate style due to $.fn.animate.Feb 14 2015, 8:46 AM
matmarex closed this task as Resolved.Feb 14 2015, 11:35 AM
matmarex subscribed.
Jdforrester-WMF removed a project: Patch-For-Review.Feb 19 2015, 9:35 PM
ori moved this task from Doing to Done on the VisualEditor-Performance board.Feb 21 2015, 6:12 AM
Catrope mentioned this in rGVED6fc57d410311: Don't use .hide() in ve.ui.Context constructor.Mar 3 2015, 7:37 PM
Catrope mentioned this in rGVED7bbfc4e9671e: Re-implement ve.ce.ResizableNode#showHandles using CSS.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits