UITableView with JSON data very slow and freezing - ios

Question

Good morning,
Yesterday I finally made my first TableViewController with JSON parsing data from my database but now I have a problem with that:
The app is taking almost 9-10 second to load and show 3 entries.
When I navigate with scroll down the TableView it freezes when it displays a new image.
I'm going to show you my code because I don't know why is this happening, maybe it's because the images are really big (they are made with the iPhone camera and stored in my FTP).
Do you know why my App is so slow when loading the results and then navigation through them?
ViewDidLoad:
- (void)viewDidLoad
{
[super viewDidLoad];
[self fetchJson];
}
TableView:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"carTableCell";
CarTableViewCell *cell = [tableView
dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[CarTableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:CellIdentifier];
}
// Configure the cell...
cell.makeLabel.text = [[_jsonArray objectAtIndex:indexPath.row] valueForKey:#"id"];
cell.likes.text = [[_jsonArray objectAtIndex:indexPath.row] valueForKey:#"likes"];
cell.comments.text = [[_jsonArray objectAtIndex:indexPath.row] valueForKey:#"comments"];
cell.username.text = [[_jsonArray objectAtIndex:indexPath.row] valueForKey:#"username"];
cell.refuser.text = [[_jsonArray objectAtIndex:indexPath.row] valueForKey:#"user_ref"];
cell.modelLabel.text = [[_jsonArray objectAtIndex:indexPath.row] valueForKey:#"user"];
NSURL * imageURL = [NSURL URLWithString:[[_jsonArray objectAtIndex:indexPath.row] valueForKey:#"imagen"]];
NSData * imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage * carPhoto = [UIImage imageWithData:imageData];
cell.carImage.image = carPhoto;
NSURL * imageURL2 = [NSURL URLWithString:[[_jsonArray objectAtIndex:indexPath.row] valueForKey:#"image"]];
NSData * imageData2 = [NSData dataWithContentsOfURL:imageURL2];
UIImage * carPhoto2 = [UIImage imageWithData:imageData2];
cell.profileImage.image = carPhoto2;
return cell;
}
FetchJSON:
-(void)fetchJson {
dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_async(queue, ^{
NSString * urlString = [NSString stringWithFormat:#"http://website.com/service.php"];
NSURL * url = [NSURL URLWithString:urlString];
NSData * data = [NSData dataWithContentsOfURL:url];
self.carModels = [[NSMutableArray alloc] init];
self.carMakes = [[NSMutableArray alloc] init];
self.carImages = [[NSMutableArray alloc] init];
self.likes = [[NSMutableArray alloc] init];
self.comments = [[NSMutableArray alloc] init];
#try
{
NSError *error;
[_jsonArray removeAllObjects];
_jsonArray = [NSJSONSerialization
JSONObjectWithData:data
options:NSJSONReadingMutableContainers|NSJSONReadingMutableLeaves
error:&error];
for(int i=0;i<_jsonArray.count;i++)
{
NSDictionary * jsonObject = [_jsonArray objectAtIndex:i];
NSString* imagen = [jsonObject objectForKey:#"imagen"];
[_carImages addObject:imagen];
NSDictionary * jsonObject2 = [_jsonArray objectAtIndex:i];
NSString* user = [jsonObject2 objectForKey:#"user"];
[_carMakes addObject:user];
NSDictionary * jsonObject3 = [_jsonArray objectAtIndex:i];
NSString* date = [jsonObject3 objectForKey:#"date"];
[_carModels addObject:date];
}
}
#catch (NSException * e)
{
NSLog(#"Exception: %#", e);
}
#finally
{
[self.tableView reloadData];
}
}
);
}
And that's my JSON output file:
[{"id":"15","user":"1","imagen":"http:\/\/website.com\/juliaroberts.jpg","date":"2014-09-13","userID":"1","image":"http:\/\/m.c.lnkd.licdn.com\/mpr\/mpr\/shrink_200_200\/p\/3\/000\/25b\/1fe\/200e9f3.jpg","username":"*jordi","id_post":"15","likes":"5","comments":"2","post_id":"15","user_ref":"*juliaroberts"},{"id":"16","user":"1","imagen":"http:\/\/website.com\/onedirection.png","date":"2014-11-11","userID":"1","image":"http:\/\/m.c.lnkd.licdn.com\/mpr\/mpr\/shrink_200_200\/p\/3\/000\/25b\/1fe\/200e9f3.jpg","username":"*jordi","id_post":"16","likes":"1","comments":"0","post_id":"16","user_ref":"*onedirection"},{"id":"17","user":"1","imagen":"http:\/\/website.com\/onedirection.png","date":"2014-11-09","userID":"1","image":"http:\/\/m.c.lnkd.licdn.com\/mpr\/mpr\/shrink_200_200\/p\/3\/000\/25b\/1fe\/200e9f3.jpg","username":"*jordi","id_post":"17","likes":"3","comments":"3","post_id":"17","user_ref":"*onedirection"}]
Thanks in advance.

Answer 1

The problem is that your images are being downloaded synchronously and thay block main thread. So every time you see tableview cell, image will be downloaded.
This is the most expensive code:
NSData * imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage * carPhoto = [UIImage imageWithData:imageData];
You should always avoid heavy operations to be run on the same thread as UI runs (main thread).
The workaround for you is:
1). Move any images downloading code to the background threads.
2). Return downloaded UIImage to the main thread to show in the UI.
3). Cache the image once it downloaded to save traffic.
Basically you can use a lot of 3rd party libraries for these tasks. The most popular is SDWebImage:
https://github.com/rs/SDWebImage

Answer 2

You should try to measure the performance bottlenecks of your app using Instruments. Reading this post on raywenderlich.com is a simple introduction to profiling this sort of issues.
Based solely on the code you posted, it looks like you're fetching the images for the cars in the main thread which causes the performance hickups. The line of code that does this is:
NSData * imageData = [NSData dataWithContentsOfURL:imageURL];
and the reason is the fact that dataWithContentsOfURLis run synchronously in the current thread which in this case is the main thread. The Apple Documentation of dataWithContentsOfURL acknowledges this and recommends using dataTaskWithURL:completionHandler: instead.