Catrope has uploaded a new change for review.
https://gerrit.wikimedia.org/r/316703
Change subject: Follow-up e3192e2d3: property fix layout thrashing in
updateInvisibleIcon
......................................................................
Follow-up e3192e2d3: property 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, 18 insertions(+), 11 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor
refs/changes/03/316703/1
diff --git a/src/ce/ve.ce.FocusableNode.js b/src/ce/ve.ce.FocusableNode.js
index 792fae9..e01852a 100644
--- a/src/ce/ve.ce.FocusableNode.js
+++ b/src/ce/ve.ce.FocusableNode.js
@@ -158,7 +158,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;
@@ -177,17 +177,24 @@
if ( !this.constructor.static.iconWhenInvisible ) {
return;
}
- if ( !this.hasRendering() ) {
- if ( !this.$icon ) {
- this.$icon = this.createInvisibleIcon();
+
+ var showIcon = !this.hasRendering(),
+ rAF = window.requestAnimationFrame || setTimeout,
+ node = this;
+
+ 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: newchange
Gerrit-Change-Id: I4aff88f705782d7ab3bd6f7aaa8096324a29b813
Gerrit-PatchSet: 1
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Catrope <r...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
