Improving scrolling performance with sap.m.App and sap.m.Page

597 Views

Hi,

I'm working with a side project called openui5-cards and are experiencing some issues with scrolling performance. As far as I can see, the problems are general for sap.m.App and/or sap.m.Page and not specific for my components (therefore it should also affect all other sapui5 apps such as fiori)

I'm testing this on desktop chrome and android 4.4 chrome/webview, but I assume these issues are for all browser.

The goal is to have a 60 fps experience when scrolling which leave 16 ms pr frame to be rendered.

When the user is scrolling, it's essential that the whole screen is not repainted after a scroll event. If this happens, you will not be able to reach the 60 fps goal.

I've solved the issues when adding my custom components directly to a div, but am still experiencing issues when adding it to a sap.m.Page and sap.m.App. To reproduce the problems, I've three examples:

http://elsewhat.github.io/openui5-cards/cdn/0.1/example3-1perfissue.html

Here the open.m.CardContainer is added directly to the div (no sap.m.Page or sap.m.App).

This example suffers from full repaint when scrolling

http://elsewhat.github.io/openui5-cards/cdn/0.1/example3-2perfissue.html

Same as the above, but have added the following style:

body{

background-attachment:scroll;

}

The property background-attachment was set to value fixed by sapui5, but here we've overwritten it.

This example does not suffer from full repaint, and is working as we want

http://elsewhat.github.io/openui5-cards/cdn/0.1/example3-3perfissue.html

Same as above, but are adding the open.m.CardContainer to a sap.m.Page which is then added to a sap.m.App that is bound to the content div.

This example suffers from the full repaint when scrolling

(and is the one we want to solve)

To help you understand the video, I've created a short screenrecording showing the repaint issue more clearly. It uses the chrome dev tools timeline.

Improving performance with openui5 and sap.m.App and sap.m.Page - YouTube

Any ideas where to fix this issue ?