jenkins-bot has submitted this change and it was merged.
Change subject: Follow-up e3192e2d3: properly fix layout thrashing in
updateInvisibleIcon
......................................................................
Follow-up e3192e2d3: properly fix layout thrashing in updateInvisibleIcon
Rather than deferring the whole function with rAF, do the measurements
immediately and defer the DOM modification. In theory, this means we
should be able to do all the measurements first and all the DOM modifications
after that, causing no reflows. In practice, there are still a couple
of reflows because of other stuff that happens during FocusableNode
setup, so we'd need to use something like the fastdom library to
really cut down on reflows.
This cuts post-AJAX load time on [[en:Barack Obama]] down to 5.8s
down from 7.6s on my laptop.
Change-Id: I4aff88f705782d7ab3bd6f7aaa8096324a29b813
---
M src/ce/ve.ce.FocusableNode.js
1 file changed, 22 insertions(+), 13 deletions(-)
Approvals:
Jforrester: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/ce/ve.ce.FocusableNode.js b/src/ce/ve.ce.FocusableNode.js
index 792fae9..a43d992 100644
--- a/src/ce/ve.ce.FocusableNode.js
+++ b/src/ce/ve.ce.FocusableNode.js
@@ -119,8 +119,6 @@
* @method
*/
ve.ce.FocusableNode.prototype.onFocusableSetup = function () {
- var rAF = window.requestAnimationFrame || setTimeout;
-
// Exit if already setup or not attached
if ( this.isFocusableSetup || !this.root ) {
return;
@@ -158,7 +156,7 @@
.find( 'img:not([width]),img:not([height])' )
.addBack( 'img:not([width]),img:not([height])' )
.on( 'load', this.updateInvisibleIcon.bind( this ) );
- rAF( this.updateInvisibleIcon.bind( this ) );
+ this.updateInvisibleIcon();
}
this.isFocusableSetup = true;
@@ -174,20 +172,31 @@
* @method
*/
ve.ce.FocusableNode.prototype.updateInvisibleIcon = function () {
+ var showIcon,
+ rAF = window.requestAnimationFrame || setTimeout,
+ node = this;
+
if ( !this.constructor.static.iconWhenInvisible ) {
return;
}
- if ( !this.hasRendering() ) {
- if ( !this.$icon ) {
- this.$icon = this.createInvisibleIcon();
+
+ showIcon = !this.hasRendering();
+
+ // Defer updating the DOM. If we don't do this, the hasRendering() call
for the next
+ // FocusableNode will force a reflow, which is slow.
+ rAF( function () {
+ if ( showIcon ) {
+ if ( !node.$icon ) {
+ node.$icon = node.createInvisibleIcon();
+ }
+ node.$element.first()
+ .addClass( 've-ce-focusableNode-invisible' )
+ .prepend( node.$icon );
+ } else if ( node.$icon ) {
+ node.$element.first().removeClass(
've-ce-focusableNode-invisible' );
+ node.$icon.detach();
}
- this.$element.first()
- .addClass( 've-ce-focusableNode-invisible' )
- .prepend( this.$icon );
- } else if ( this.$icon ) {
- this.$element.first().removeClass(
've-ce-focusableNode-invisible' );
- this.$icon.detach();
- }
+ } );
};
/**
--
To view, visit https://gerrit.wikimedia.org/r/316703
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I4aff88f705782d7ab3bd6f7aaa8096324a29b813
Gerrit-PatchSet: 5
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Catrope <r...@wikimedia.org>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
