10 Tips to Speed ​​Up Table Views Development

[[142625]]

Before we get started, I'd like to ask for one more opinion from you this year. Please take a moment to give us some feedback via this short survey. It will help me help you.

If you’ve ever worked with collection views, you’ve probably already realized the value of this article. If you don’t pay attention to speed this can be a big problem, and your users will let you know. You’ll quickly notice when your scrollview isn’t as fast as the other apps on your device. Table views are something every beginner iOS developer uses first, and can quickly get confused. This article will go into some depth on some of the issues you might be looking for.

The Tortoise and the Hare

Table views are interactive objects that many apps use to display structured data. They are tedious to use well, which makes them a winding adventure to use. Designers don't consider performance issues when designing. That designer might even be you. Soon you'll be working on a graphics app that needs to display a lot of information in a cell. It may start out fast but quickly slows to a crawl. You want your table views to be smooth as butter. These effects of your app will be quickly noticed if they are not good.

Speed ​​up your Table Views

We’ll explore these tips through a practical example of a poorly implemented table view.

Usually you will find that an image app will do the following things on an imageview:

• Download images (main content images + user avatar images)
• Update timestamp
• Show Comments
• Calculate the height of dynamic cells

In this example we intend to focus on analyzing the above points.

I recommend you clone the demo repository (github) to experience how bad it is at first. Jump into XMCFeedTableViewCell to see the improvements and feel the performance. It's important to realize that the optimizations may not feel as good if you're running on an iPhone 6+. Don't forget to try it on an older device.

Tip #1 Learn how to increase your speed

I could write a whole article about Instruments. I'll just give you a quick overview here because it will be helpful.

If you are not experienced with Instruments, I urge you to spend some time on your weekends to study them. They can be very helpful when you want to measure memory and time consumption. However, when you start to build an app you will encounter many problems during the development process, the code will become worse and worse, and you may not have time to think about performance issues. But refactoring is potential. In order to properly refactor you should spend time analyzing performance.

So, here’s what to explore over the weekend:

1. Open your project and click Product > Profile

2. Select Custom there

3. Find the Add button and add tools: Allocations, Time, Profile, Leaks

4. Observe your application and its performance.

For example, we are concerned about speed (but memory is also a big issue). Which tool do we need? If you choose Time Profile, then you are right. Let's open it and observe the app in action.

Below you can see an overview of our app. All you see is me opening the app and scrolling up and down the tableview as fast as I can. This simulates a good “worst case scenario” that we can then act on.

This area is the code that will be executed when I start scrolling the app, and we only want to know the time consumed in this area.

Now you can start exploring the code we discussed above. Double click on any of these lines (*** the top line is where the most time is being consumed)

It is important to point out that the options under Call Tree are not set for you when Instruments is loaded. You need to set them yourself.

Tip #2 Avoid blocking the main thread

In this example you'll see that the first image-related method blocks the main thread while the data is downloaded and converted into an image object. You should try to avoid blocking the main thread, which is especially important for interactive objects in a collection. Network requests? Keep them running in the background (asynchronously) and cache the responses. You don't want to repeat any operations. Imagine that your cell is being drawn during a period of silence. Your cell should only display data that is already stored on your device. This will make you feel better.

Tip #3 Reuse cells

If you have spent some time learning iOS, then sorry. This advice is for those who are new to iOS. You should use the dequeueReusableCellWithIdentifier method to get a cell on a table or collection. If you don't do this, you will waste a meaningless time and data.

Tip #4 Cache downloaded images

This is definitely the most important piece of advice you’ll read here. If you don’t cache your images you’re going to have big problems.

If you're reusing local images then use the UIImage method imageNamed:. Requesting images as JPGs will save time and resources. If you're getting your image from a server you have the luxury of sending the exact image that's needed. PNG files take up a lot of space in memory. If you're curious you can download a bunch of PNG images by replacing JPG with PNG in the example.

Use SDWebImage or Heneke to manage images. I used Heneke in the provided example, but I had never heard of it or its benefits before.

Tip #5 Using rich text tags is expensive

Going to all the trouble of using rich text tags is expensive. Avoid using them whenever possible. Ask yourself if you really need them. If so, cache them whenever possible.

Tip #6 Cell height calculation

If your table has complex dynamic heights then you may want to cache the calculated heights. Consider how often you calculate them (especially for collection views) and you want those heights to be directly available.

Tip #7 The pain of NsDateFormatter

Like rich text, date formatters can cause a lot of memory usage if you initialize them frequently. Ideally your web client will provide you with readable text (much easier than calculating the exact time). If not you can create a singleton instance of NSDateFormatter to use. NSDateFormatter is not thread safe, but this is no longer the case in iOS 7 and later. Thanks to quellish for reminding me of this.

Tip #8: Transparency

If you can avoid it, create objects that are opaque (non-transparent, you can't see through them). If you have transparent images, the system has to work hard to redraw them. You can actually see these areas in the simulator by clicking Debug>Color Blended Areas.

See the red ones? That means those areas are transparent. This can be very time consuming when you are dealing with a CollectionView. Ideally, you want to see the entire screen green. That may not be feasible for your design, but strive to reduce the amount of red you see. In the example you can see that the label extends to the end of the view, which can be cleared.

Tip #9 Don’t use Xibs too much (use storyboards if possible)

Be careful if you use xibs. When you load a Xib, the entire content is loaded into memory (images, hidden views). But this does not happen in the storyboard, it only instantiates what is currently being used.

There are some special cases where using a xib makes sense. For example, you might be using some third-party framework that uses pure code to write the UI part of the collection. If you want to use a xib to create a prototype cell you can use a xib to do it. Just be careful not to overload it.

Tip #10 Use CoreGraphics

I rarely need this, but it’s there when you need it. Use CoreGraphics and write your UI code in a view’s drawRect method.

challenge

Who doesn't love a good challenge? Let's keep it here. Take time this week to do the following two things.

• Learn how to use Instruments (time profiler, allocations)
• Check the usage of Learning Instruments by testing the image cache (turn it off, turn it on, and observe).

https://github.com/mcgraw/dojo-table-performance

Questions and Answers

No questions yet! Leave a comment or send it to [email protected].

Takeaway

Interface interaction is important in iOS. It is non-negotiable. If you don’t spend time solidifying your app’s experience on a device, people will stay away. When I review the content in the app, it should flow smoothly.

now you

What are your top tips for improving performance? I’d love to hear your suggestions. Please share them below when you have a moment.