Optimizing ShinobiGrid


Hey all, I’m hoping to compile some general tips on performance optimization of Shinobi Grids.

I have a grid that is working well, but the framerate while scrolling is around 30 fps. It tends to drop frames and can get as low as 20fps.

The grid cells are a bit complicated, each containing a number of subviews (uilabels, image views, custom drawing) and collection views. I’m reusing cells, but when a cell gets reused, quite a lot of work may need to be redone. I’m considering some of the techniques that apple recommends as far as drawing to an image then caching the image, but the problem with that is I need to keep the collection views interactive / scrollable.

Another piece of welcome feedback would be methods of diagnosing and improving the performance. My regular technique of using Instruments -> Time Profiler doesn’t seem to be yielding a great return.



Hi JustinKent,

There’re a few things that you can look at to improve the performance of your grid:

  1. Keep your cells as simple as possible. You’ve already identified this as a bottleneck in your use case and have mentioned the technique of using image placeholders so that complex view layouts do not need to be calculated/drawn. In order to get around the problem that your cells need to be interactive you could possibly replace your cell’s cached image content with the more complex (and interactive) view layout upon first touch down.
  2. Use cell reuse identifiers to pool common cells together. You mention that there is a large amount of work necessary when a cell is reused. It may be possible to identify common work between your rows/cols and use the reuse identifiers to provide cells to your grid that are already appropriate for its required use. For example, if the cells always have exactly the same subview positioning across several rows then you can give all of those common rows the same reuse identifier - this means that when a cell is requested for one of these rows it already has the desired layout, so you do not need to repeat the work. 
  3. Make your cells as uniform as possible. This ties into point 2 above - the more cells that have something in common, the fewer (and bigger) the reuse pools become. Reducing the number of reuse pools means that fewer cells have to be initialised when scrolling in your grid which can help improve performance. We’ve found that trying to keep all your cells the same size can help as the grid doesn’t have to spend time altering the frame of every cell is reuses.
  4. Make sure you have no transparency in your grid/cells. An alpha of less than 1 any where in the grid will significantly increase render times and slow the grid down. The same may also be true of clipToBounds, which should be set to YES where possible.
  5. If all else fails, bigger cells (or fewer cells on screen at once) can help improve performance. This is because the more cells you have on screen, the more work that needs to be done in order to reuse cells when scrolling - therefore reducing the number of visible rows/cols reduces the amount of work being done.

I hope the above suggestions help you improve the performance of your grid. If you have any comments on the above, or any suggestions that I may have missed, then please add to this as I can see this being a very useful post for other users!  :laughing:

Problem with Problem with setContentOffset - Grid crashes app