Eclipse Community Forums: scout » [Neon] Slow SmartField performance on IE

Help

Home

Home » Eclipse Projects » scout » [Neon] Slow SmartField performance on IE

Show: Today's Messages :: Show Polls :: Message Navigator

[Neon] Slow SmartField performance on IE [message #1758403]

Tue, 28 March 2017 12:38

Simon Meer

Messages: 7
Registered: February 2017

Junior Member

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 13:57]

Report message to a moderator

Re: [Neon] Slow SmartField performance on IE [message #1758633 is a reply to message #1758403]

Thu, 30 March 2017 20:01

Andreas Hoegger

Messages: 186
Registered: February 2010

Senior Member

Hi Simon
Thank you for the request - especially for the very helpful analysis.
I was able to reproduce the behavior on our side. The performance is exponentially breaking down with the amount of columns in the SmartField popup table.

The performance leak came with a fix to preserve css styles during the layout mechanism.

I propose to remove the table from the DOM for the inline style modifications and attach it afterwards again. This would end up in 4 DOM manipulations instead of 2'200 inline style modifications (having a table with 100 rows and 5 columns). With this enhancement we reach almost the performance as in the 6.0 version without loosing any functionality. I would like to have the Gerrit Change reviewed by other committers before applying it.

-andreas

Report message to a moderator