angular-vs-repeat
angular-vs-repeat copied to clipboard
kamilkp
Mobile performance
Hi, I've been searching for a solution to the poor performance loading of big DOMs on mobile browsers, especially in hybrid apps. I've been very enthusiastic about the angular-vs-repeat but maybe I'm doing something wrong, because whilst the DOM performance is much better, the scrolling became unusable. Am I doing something wrong? Can this be speeded up somehow? The mobile device is Android with Kitkat 4.4 and it is quite fast itself, but scrolling is now worse than with a simple ng-repeat. Do you have any ideas that could help?
I've checked your demo on the device in the Chrome browser and the demo scrolling doesn't feel native as well, but there's at least no effect of missing rows that I can see in my cordova app. If I make the value of vs-excess a higher number, the app scrolling works better and the improper rendering effect is rarer but unfortunately still present; however, the DOM is getting bigger and the benefit of the directive is lost.
I suppose that the Android's mobile Chrome isn't fast enough to handle quick inertia scrolling and chokes on adding new items to the DOM. I'm not sure if there could be any cure except using the crosswalk solution, which I'd prefer to avoid (app size, load time, etc).
I've noticed you're Pole. Me too :-) If you don't mind we could talk in Polish.
I've been playing with that issue a bit and I've found that changing translateY or translateX (2D transforms) that you are using to the translate3D makes things a lot better, but still not perfect. List items are now rendered properly when scroll stops (before they were missing a half or some parts were not rendered). However there is still an empty area during fast scrolling which is then filled with items when scroll ends. Increasing the vs-excess helps a bit here. During slow scrolling the Android view is filling the view enough fast, but scrolling isn't as smooth as simple div with overflow-y: scroll. However there's a progress and you should definately thing about changing translateX/Y to translate3D.
Unfortunately the choppy scroll is a big disadvantage. So I've tried the left/top method of positioning items in the view (positioningProperty) and the scroll is smoother, but sadly rendering is bad again causing items are not rendered properly. See attached screenshot and the gap in the middle.
https://www.dropbox.com/s/5vynzeia9x5ix99/device-2015-01-14-133936.png
I have no idea what to do. I'll probably try reactjs or mustachejs to speedup the initial dom rendering, because scrolling is ok even with simple unbinded ngrepeat. I would rather like to use virtual scrolling, but the choppy scrolling is very annoying and this happens on a quite fast device, so on older would be even worse I suppose. Have you got any idea maybe?
Ok, changing 2D transforms to 3D looks like a good idea. I saw your screenshot and it looks totally wierd. I have never experienced sth like that. Oddly, it looks like a problem with browser's internal rendering engine. I mean when you inspect the DOM, do those elements have proper transform values or that is calculated incorrectly?
Yes, the code is OK and transform values are also OK. It seems that it is a problem with the view refresh or something is rendered out of sync. Unfortunately I cannot find anything else I could do to make this looks better. I've given up and returned to rendering the whole lists but in a faster way. The DOM is a bit heavy but perfectly smoots. I suppose the virtual scrolling with transform3D works better on iOS. The Ionic library has the same issues. Their scroll works great on iPhones but it's choppy on Android. Pitty, I've been so happy looking at the DOM and just dozens of watches instead of hundreds :-)
Hey!, any update on this?, @rafaellop did you find a good way to do it? I have a long list of posts, something like Facebook, and I need to keep the scroll position and the posts when the user returns but for performance i need to use native scroll and not virtual.
Hey! I'm also looking for incorporating this into an hybrid application, but unfortunately the demo does not perform very well, at least on android. The scrolling itself is somewhat smooth, but you can se the content "being rendered" as you scroll (meaning that I see a blank light blue space and then the items being rendered on top..)
Any help / tips on that? Did you guys saw an improvement over this issue by using 3d ? According to @rafaellop comments, that doesn't seems to do the trick.
The problem is i think the fact that mobile triggers the scroll event too late - at least thats what happens on iOS. I dont know any solution for that unfortunaletly.
Hey @kamilkp, on iOS (device & simulator) the 'simple' example from the demo pages seems to scroll beautifully. However, when implementing in my own project I'm seeing the list not update until scrolling completely stops as mentioned above. Is there anything different that you did to overcome this limitation in the demo?
No, I use just the plain angular with optimizations like :: and 'track by' and no fancy stuff.
With rc10 performance of phonegap app on android device is:
( - ) much slower scrolling speed, like it is working without this lib ( + ) white empty 'holes' did disappear (when scrolling)
Can someone share their experience/advice?
Update: Still stuck with this issue - on mobile scrolling there is rendering problem. Did notice something interesting - when scrolling (even very fast), if the finger is always on the screen (testing on ipad) there is no issue at all. When i scroll and remove my finger from the screen and scrolling is fast - here the problem becomes visible.
Did anyone succeed getting close to native mobile performance?
Made video example of my problem. https://youtu.be/aG6W5mlMqxM
Anyone has an idea how to fix this?
This is NOT an issue from this component, or from cordova, but a nonsense feature from Apple !
UIWebView blocks javascript during scroll... and Cordova is still using UIWebView. From IOS8, Apple starts using WKWebView instead of UIWebView. All applications like Safari and Chrome are updated with WKWebView, so :
- if you test your application with safari on your mobile, it will works.
- if you compile your application with default Cordova, it will not working.
If you want to solve your problem, you just have to install the new WKWebView plugin and it will works as excepted.
https://github.com/apache/cordova-plugin-wkwebview-engine
READ CAREFULLY ALL the instructions or it will not working... You can update your own project, but keep in mind to change the name to "Hello Cordova" as mentionned.
On my Iphone 6S, this component it reaaaaaaaaaallly fast and I love it ! 👍
@rafaellop hey. Did you use this library in ionic? It works fine without ionic, but doesn't work with it. Here is the complete issue. Any idea?
No, as mentioned above in https://github.com/kamilkp/angular-vs-repeat/issues/28#issuecomment-106263949