I've built a scroller prototype using WebGL. The problem is, when it's combined with other non-WebGL elements on the same page, the scroller becomes jittery and the quality is quite poor. You can see a demo here (scroller is at the bottom, ignore the Chinese characters) - http://viewer-test.appspot.com/Viewer.html?type=presentation&id=6a169bb8-e440-4338-9e3a-8b5e429f32ee&showui=false Even if I take out the video, the scroller still slows when the CPU spikes every time that RSS feed top right shows a new feed snippet.
I had considered using Web Workers to run the scroller on a different thread, but came across another post in this forum that said that Web Workers can't be used with WebGL. What are my other options to ensure smooth scrolling?
Thx.
Are you using RequestAnimationFrame for your animation callbacks? If not, you should. It's managed by the browser to time the draw of your element with the others on the page and with the system screen sync, so you get the smoothest presentation possible. If you do your animation using setTimeout or setInterval, you'll almost always end up out of sync with the pages rendering, which leads to dropped frames and stutters.
Related
For the slideshow feature, the images are on a remote server, then can we implement a batch look ahead download of the images? We want say 'n' images ahead downloaded when an image is being viewed - this helps in providing a smoother viewing experience. Is this a good way to get zero latency for the slideshow or is there any better way than this.
To provide a smooth viewing experience as well as reduce (not zeroing) the latency for your slide show, I agree with caching mechanism.
I assume that you have a list of image urls, now as soon as the slide show displaying on the screen, start loading visible items. Trigger scroll view did scroll and load in the background the next n images after the last visible index, then cache them. So that whenever user scrolling to next indexes, images almost the time will be there in your memory and displayed instantly.
Why we should trigger scroll view did scroll. Firstly, because that is the idle time that allows you start doing things without user's notice. Secondly, if you start loading images while scrolling, at the time it is set to UIImageView, your slide show will be lag due to that task executed on main thread.
As the answer above, SDWebImage is a good library that can help you finish your task.
By the way, if you will consider of using SDWebImage, I would suggest you config this option
/**
* By default, image downloads are started during UI interactions, this flags disable this feature,
* leading to delayed download on UIScrollView deceleration for instance.
*/
SDWebImageLowPriority = 1 << 1,
I hope my answer will contribute 2 cents to solve your problem.
In my opninion, use SDWebImage https://github.com/rs/SDWebImage to preload images and clean memory cache if if exceed memory-limit.
I'm trying to use CSS3 animations in Android WebView but I'm getting a very annoying delay when starting the animation (roughly 500ms).
The animation runs smoothly, no lag, but it has the delay at start. Since there is no lag, I assume that's not a performance issue. Or it could be?
It's not the default 300ms onclick delay, I've already changed to ontouchstart and when I do anything else than animations/transitions, there is no delay. Only with these two.
It's not the animation-delay property as well, I've already set it to 0.
Any possible explanation/solution?
PS: The animation/transition I'm trying to run is with transform: translateX() property. Before, I was trying with left: Xpx, but it was lagging during the animation. With transform, there is no lag, but there is the delay.
I had the same problem and failed to find a reasonable solution. I've tried different approches and these are my conclusions:
making animation longer makes it look more smooth, but doesn't reduce the delay at the beginning
turning hardware acceleration OFF makes animation faster (delay is also reduced) but some frames are being dropped and animation isn't smooth anymore
changing all translate3d to translateX/translateY/translateZ - no visual difference
changing animation into multiple transitions controlled via JavaScript (transitionEnd event) makes it slower with multiple hiccups on the way (each time when transitionEnd is fired).
My guess is that CSS animations are just slow on Android and require some pre-computation to display them; hence the delay at the beginning. We'll probably need to wait for Chrome to became the default browser for Android.
I'm not sure it would help with the delay, but perhaps you should use translate3d(x,0,0) instead of translateX, because 3D transformation run on hardware.
I can't find the reference for that now, but I remember reading an article about it in the Google Android HTML Developers site.
I was having the same issues on stock browser. Turns out that you can add this to the block you're animating:
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
This should smooth out the animations, making them start sooner and also removing a flicker before and after the animation.
I have an iOS App that uses Unity3D. When I pause Unity to show only Quartz-related content, the performance is usually fine.
But on a current project, scrollviews and table views sometimes perform very bad. They stop scrolling too early, and the scrollview stops even between multiples of the size predefined by the paging.
I tried to take a look with Instruments, and found FPS is usually ~50-60, but sometimes less. However this does not answer my question.
Btw, the table and the scroller have only a few data, and there is no reloading issue.
Okay, now I found some very helpful information at the Unity Forum. Using
#define USE_DISPLAY_LINK_IF_AVAILABLE 0
prevents the described issue. The Unity-iOS project now uses THREAD_BASED_LOOP instead of the CADisplayLink class. Maybe I will further play around with CADisplayLink and lower target frame rates.
Some interesting information about the used Rendering Loop Type can be found in the Unity Manual.
TL:DR
What technique does Apple use to make Photo.app so fast, even with large images?
Long Version
I watched Apple's WWDC 2010 video about scroll views to learn how to replicate Photo.app pagination behavior and low memory utilization (PhotoScroller Demo). It works well, but since images are loaded only when they are needed, when I try to paginate to another image, the app locks while the JPEG is being decompressed.
The same video shows a tiling technique to get better performance, but since I'm using photos taken from the camera and stored in the app, that doesn't seem feasible (having multiple copies of each photo, in different resolutions, would consume too much space - 4MB vs 27MB). Also, using iExplorer I noticed Photo.apps has only a copy of each photo (it doesn't even have a small thumbnail copy for the gallery).
What technique did Apple use to make Photos.app so fast? How can I get that same performance in my app?
I'm a bit confused if this should be here or on Programmers,
since there's no code in the question, but F.A.Q. says that algorithm
questions are part of Stackoverflow, and the tags here match it
better.
So if you just show one image fullscreen you can do this:
In the WWDC11 Session 104 - Advanced Scroll View Techniques they talk about infinite scrolling and how to do it. The basic idea is to scroll the view and after scrolling reposition the (UIImage)view inside the scroll view so it appears centered or whatever you layout constraints are.You could then load the new UIImage into the UIImageView. Since you only have one UIImageView it should be pretty low memory consuming. I am not sure about how the loading times of the images will behave though.
Maybe preload the next UIImage to the left and right to the current image and then load it into the UIImageView after reposition the scrollView can help here.
For anyone who is still looking for simply implementation of scroll view that hold lot's of images.
https://github.com/sumofighter666/ReusableScrollView
It is as simply as implementing UITableView
I am creating scripted e-books running under iBooks. They do animations using JS setTimeout and/or requestAnimationFrame. After extensive debugging of why animations were running so slowly, I found that the timer was firing, instead of in the 20-50ms that I requested (and get in Chrome or Safari on the desktop), at intervals more than 10 times that long, sometimes as long as one second or more (this is setTimeout, since apparently requestAnimationFrame / webkitRequestAnimationFrame are not available in iOS or at least in the iBooks-ized version of webkit).
After doing further research, I found out this this is apparently not an iBooks issue as much as an iPad issue--I find similar granularity in Safari on the iPad. Is this just a function of a slow processor (I'm testing on an iPad 2), as discussed here?
Or is this related to setTimeout being reported to not function during scrolling as discussed here (although in my case there is no scrolling involved)?
For your information, the types of animations I am doing are not ones that can be implemented using CSS animations which would potentially be hardware-accelerated.
Bottom line, does anyone have any ideas how to get finer timer granularity in JS on the iPad, whether in iBooks or Safari?
I have found the problem was that iBooks reads through the entire book when it is first opened, opening (and running scripts on) each and every page. Furthermore, it does not appear to correctly prioritize requests from the currently open page over its background page pre-reading work, so until the pre-reading process is finished, which could take dozens of seconds on a large, script-heavy book, timer responsiveness (whether setTimeout or requestAnimationFrame) on the current page can be dramatically impacted for the worse.