| [Neon] Slow SmartField performance on IE [message #1758403] |
Tue, 28 March 2017 08:38  |
Eclipse User |
|
|
|
Hi there,
Since upgrading to Scout Neon 6.1, we've been experiencing poor performance when operating with SmartFields on Internet Explorer. (Screen freezes for a few seconds while typing.)
After taking a look at it with the dev tools, I found that the methods `cssBackup()` and `cssRestore()` seem to be causing a lot of reflows, i.e. have the browser relayout everything.
If I've read the code correctly, they are used to determine the width of the columns in the proposal window (which was added in 6.1, I believe).
My proposal would be splitting the "backup step" into a "clear" step and a "backup" step, so that getting and setting the CSS is not done alternately for each single row.
This quick fix seems to improve the performance somewhat:
ProposalChooserLayout.js
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/smartfield/ProposalChooserLayout.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/smartfield/ProposalChooserLayout.js
index 9fa6e97dc5..78579306d8 100644
--- a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/smartfield/ProposalChooserLayout.js
+++ b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/smartfield/ProposalChooserLayout.js
@@ -29,13 +29,19 @@ scout.ProposalChooserLayout.TYPE_HANDLER = {
this._table = layout._proposalChooser.model;
},
/**
- * Clears the given CSS property and stores the old value as data with prefix 'backup'
+ * Clears the given CSS property to measure its natural size
+ */
+ cssClear: function($element, property) {
+ $element
+ .css(property, '');
+ },
+ /**
+ * Stores the old value as data with prefix 'backup'
* which is used to restore the CSS property later.
*/
cssBackup: function($element, property) {
var oldValue = $element.css(property);
$element
- .css(property, '')
.data('backup' + property, oldValue);
},
cssRestore: function($element, property) {
@@ -75,6 +81,7 @@ scout.ProposalChooserLayout.TYPE_HANDLER = {
this.modifyFiller(this._table.$fillBefore);
this.modifyFiller(this._table.$fillAfter);
this.modifyTableData(this.cssBackup);
+ this.modifyTableData(this.cssClear);
},
modifyFiller: function($filler) {
Do you recognize any other possible causes or solutions / does this change seem plausible to you?
[edit]
Is there a reason why this functionality isn't implemented using a real table, which natively comes with this kind of layouting?
[Updated on: Tue, 28 March 2017 09:57] by Moderator |
|
|
|
|
|
Powered by
FUDForum. Page generated in 0.03974 seconds
Home