UITableView too slow on main thread - multithreading

I was wondering if there is any way to accelerate/speed up the UItableView/[reload data].
Even though I reload the data on the main thread using:
> [self.tableview performSelectorOnMainThread:#selector(reloadData) withObject:nil waitUntilDone:No]
I still think the results is quite slow (2 to 3 seconds to refresh each time the table is being reloaded, making a bad user experience if the user keep refreshing the table).
For a bit of background here is how it works at the moment.
1) I create my UITableView from data coming from the database on apple starting (until here no problem and I am fine if its taking few seconds).
2) I click on one of the item of the table view, which opens a new screen to modify the elements.
3) Once the elements is modified, I change the database of my table view so that the elements I changed comes at the top of my table view.
4) When I press the back button on the screen to change my elements, I implements the ViewWillAppear of my UITableView and I reload the data on the main thread.
5) What I observer is a latency of about 2/3 seconds to go from one screen to another. Removing the reload data line from my code, make the transition instantaneous. So the problem is really in the reload data.
Each row of my UITableView has the following elements inside:
A background color coming from a file (this is basically a gradient, the file is about 20Ko, it is a PNG, the file is store on the phone)
1 or 2 UIImageView (depending on the status of what I display) (about 5Ko each, very small PNG icons, the file is store on the phone)
3 UILabel
1 UIButton (inside this PNG, there is a picture, the original size of the picture may vary from 200 to 300ko, the original source is coming from internet. I use SDWebImage to load it/cache it)
I would think I may have too much information on each of my cell, as I can see a big difference in loading time when I only have one row, versus having 10rows.
Would like to have some input from the community to see if anything can be done to improve. The best would be to be able to update the UI in the background, so for example, when I am modifying my elements, I do reloaddata in the background, so that when I come back to the previous screen that shows the UITableView my view is already refreshed,
Thanks

Ok I foudn the solution on this website:
http://www.raywenderlich.com/31166/25-ios-app-performance-tips-tricks#drawing
20) Optimize Your Table Views
Table views need to scroll quickly — when they don’t, users really notice the lag.
To keep your table views scrolling smoothly, ensure that you’ve implemented all of the suggestions below:
Reuse cells by setting the correct reuseIdentifier.
Make as many views opaque as possible, including the cell itself.
Avoid gradients, image scaling, and offscreen drawing.
Cache the height of any rows if they aren’t always the same.
If the cell shows content that comes from the web, be sure to make those calls asynchronously and cache the responses. (Personnal note on this one as it was my issue: look at this other website http://keighl.com/post/sdwebimage-uitableviewcell/ that explains how to use SDWebImage in a UITableView. Very useful.
Use shadowPath to set up shadows.
Reduce the number of subviews.
Do as little work as possible in cellForRowAtIndexPath:. If you need to do some work, do it only once and cache the results.
Use the appropriate data structure to hold the information you need. Different structures have different costs for different operations.
Use rowHeight, sectionFooterHeight and sectionHeaderHeight to set constant heights instead of asking the delegate.

You say "A background color coming from a file" - this alerts me that you're doing IO work, which is generally time-consuming, I'm curious if you remmed out the loading a colour from a file if you get a significant speed increase?

Related

JavaFX-8: Custom Layout and Layout Passes (layout pass/css pass): Where should I add child nodes?

I'm developing a custom table component for very large and very custom content. Therefore I decided not to go with TableView, but start from scratch (i.e. Control). I adopted the idea of the VirtualFlow to create and manage only the visible part of the table and reuse cells that have become invisible. However I needed virtual rows and columns.
My CustomVirtualFlow implements layoutChildren(). From the component's size and scrollbar positions I know which cells are visible. If necessary, I add cells to the VirtualFlow. I then update the content and css pseudo class states (selected, focused, ...).
This works almost fine ... currently, my only problem is that the css styles are sometimes lagging: newly created cells are shown with e.g. wrong backgrounds for a moment and then get correcteted with the next pulse.
My explanation for this is that JavaFX performs layout in two passes:
first a css pass and secondly the layout pass that calls layoutChildren().
The css of newly added children (during layoutChildren) is therefore not processes correctly.
I tried to call applyCss() directly, which helps, but seems to do too much because it takes a lot of time.
My question is:
How is the correct way to add nodes during layout, i.e. if the size of the component makes it neccessary to use further nodes?
If it is not during layoutChildren(), where else should I do it?

How to handle 1000 of tables in one scene in javafx without hang?

I am working on Project on which around 1000 table view on a single page is exit.I had given a scroll bar for it but it is not as smooth as intended to be.So Some how can I draw the table which fits within the screen or window. Then when user wants to scroll down it will draw the other table.I donot want to use pagination provided by javafx .I prefer to have a scroll bar but in the beginning instead of displaying all the table it will display 10 or 15 tables whichever fits within the screen.Any help on this will be appreciated..
You may use Pagination instead. Each page will create it's own table every time it's opened. When you provide a page index to the page factory then retrieve the necessary data according to that index. Only one istance of Table View will exist in the memory.

How to get a callback when a View becomes visible on the screen on Android

Is there a way to get a callback when a View appears/disappears on the screen?
I need this for analytics purposes - eg. I need to check how many times people saw a view versus how many times they clicked on it.
I can tell whether a view is on screen at a certain point in time but I'm wondering whether there is a callback for that.
Also note that I'm not interested when a View's state becomes VISIBLE and not even when a view gets rendered (because eg. in a ViewPager the Views of the second page are rendered before they actually appear on screen).
We did several workarounds for certain scenarios but I'd like to have something which is more generic. We need it in ListViews, GridViews, ScrollViews and ViewPagers and each one of them presents different challenges.
Does ViewTreeObserver.OnGlobalLayoutListener help? I have never used it myself though.
See: http://developer.android.com/reference/android/view/ViewTreeObserver.OnGlobalLayoutListener.html

GPUImageMovieWriter without the camera

I'm new to GPUImage, but I think that it is really nice: good work Brad. I love the way the filters chain together so cleanly.
GOAL
I'm trying to wire up the following:
* create an openGL scene
* apply some filters (irrelevant to the discussion below)
* record to video
PROBLEM
My problem is I'm not clear how to connect up the recording. Unfortunately, interacting with opengl-es does not give me enough detail to work out what to do.
ATTEMPT
I have two starting points from the examples in the package:
* CubeExample - getting raw openGL to interact with GPUImage
* SimpleVideoFileFilter - recoding a video file through filters to a new file
I started with the CubeExample, substituted the videoCamera filter for GPUImageSolidColorGenerator (as an aside, I'm not sure how to start with no filter). This allowed me to be able to create a mesh, render it and interact with it. Then I thought that I'd simply add on a GPUImageMovieWriter filter as per the instructions given in filtering and re-encoding a movie, but that requires coordination between the GPUImageMovie (the source) and the writer. As I'm not wanting a camera stream or a video file as the source, but an animated openGL sequence, I'm not clear how to do it. I've tried adding a videoInputReadCallback to the movieWriter:
movieWriter.videoInputReadyCallback = ^{
[renderer nextFrame];
[movieWriter newFrameReadyAtTime:renderer.cmTime atIndex:0];
};
where nextFrame is creates the next frame, calls endProcessing when done and sets the CMTime. Without the newFrameReadyAtTime:atIndex: call, it works fine (animated image rendered as expected to the screen) except that it creates a video with only one frame in it. With the newFrameReadyAtTime:atIndex: call, I get the message
Problem appending pixel buffer at time: 6
before it dies, which makes me think that the movieWriter is not yet ready for the renderer to present its frame, but I'm not sure what to do about it. I've tried many other things, but to no avail. From the description in Interacting with OpenGL-ES (see link above), it seems like it should be easy, but I'm not having any luck.
REQUEST
To make the question more relevant to others, I would just like it if someone might be able to post an example of creating an openGL scene (eg a triangle) and connecting it to GPUImageMovieWriter to record to a file, perhaps rotating the triangle for 10 frames so that we can see that more than a still image is created.
thanks.

ExtJS 3.4 EditorGridPanel Layout Issues

GridPanel not rendering correctly
I'm using EditorGridPanels on dynamically generated web pages. ExtJS does not control the ViewPort.
When I wrap the Grid generation code in Ext.onReady(), the grids render perfectly.
If I do not wrap it in Ext.onReady() it renders with subtle layout issues like
the grids are a little too wide
the top toolbar gets cut off on the right
the rows don't quite fit and they shift when clicking a cell
I have tried forcing the grids' layout to get recalculated once the page loads...
(function(){}
var grid = ...
[ ... ]
Ext.onReady(function(){
grid.doLayout();
});
)();
...but this does not work.
The reason I'm trying to avoid placing Grid initialization inside Ext.onReady() is that sometimes pages take a long time to fully load every resource, and in these cases the pages look fully loaded apart from the blank spaces where the grids eventually get rendered to!
Any suggestions on what I might try? Right now a complete redesign of the page is not in scope, so I'm looking for something I can do to get the grid to layout like it does when initialized inside onReady()!
Thanks
You could perhaps mask the page initially with 'loading..' message and remove this in the onReady().
If you're getting issue outside of on the onReady it would indicate something has not loaded when you're trying to render components, this in my experience will lead to further issues down the line.

Resources