CPU spikes when calling async method

[sidster-io]

Using UIImageColor to get the dominant color on the photo to set background accordingly but when I do try the following

WebImage(url: URL("https://img-9gag-fun.9cache.com/photo/aQ1GWV8_700b.jpg"))
                 .onSuccess { image, cacheType in
                            image.getColors(quality: .lowest) {colors in
                                guard let colors = colors else { return }
                                if (colors.background.toHexString() != "#000000") {
                                    self.cardBackground = colors.background
                                } else {
                                    self.cardBackground = UIColor(red: 0.130, green: 0.130, blue: 0.130, alpha: 1.0)
                                }
                                self.cardHeading = colors.primary
                                self.cardDesc = colors.secondary
                            }
                    }

Before I using WebImage I had

Image.init(uiImage: imageData)
           .onAppear(perform: {
                            image.getColors(quality: .lowest) { colors in
                                guard let colors = colors else { return }
                                if (colors.background.toHexString() != "#000000") {
                                    self.cardBackground = colors.background
                                } else {
                                    self.cardBackground = UIColor(red: 0.130, green: 0.130, blue: 0.130, alpha: 1.0)
                                }
                                self.cardHeading = colors.primary
                                self.cardDesc = colors.secondary
                            }
                        }) 

[dreampiggy]

Can you describe your issue more clearly ?

For example, does this getColors method call a system API or your custom code, which take huge CPU to calculate ?

One more thing, if you modify the View Status inside the onSuccess, you should take care to use DispatchQueue.main.async, because when Memory Cache Hit, the onSuccess is called back sync (just in the same timing when SwiftUI call .body). So this may leak to recursive call ?

[dreampiggy]

@Sidrock28 A little demo which can reproduce this issue is more welcomed. They I can use Instruments to debug the issue cause this CPU peak.

[sidster-io]

Hey @dreampiggy, Thank you for taking a look, here is the library that has the getColors implementation https://github.com/jathu/UIImageColors. I did try DispatchQueue.main.async but I do also believe onSuccess is getting called recursively as I can see it on profiler in Instrumentation. But not sure how to handle it, any help is appreciated.

[sidster-io]

I'm about to try the sync function on UIImageColor inside DispatchQueue.main.async to see if that fixes it.

[dreampiggy]

https://github.com/jathu/UIImageColors

This API seems looks the same as SDWebImage's UIImage.sd_colorsWith(rect:) method, which loop through all the pixels (consume CPU and RAM) and do math sorting, which is not designed to call in the main queue, it will drop down your frames.

The previous example you use Image, and your own imageData, does that called each time your view loaded ? Which means, does previous code do the same logic (including a memory disk cache && URLSession fetching) as current code ? I assume this is because of memory cache (previous you don't have so it always use async). To approve that behavior, you can pass .fromLoaderOnly to disable memory cache fetching, then run again to check:

WebImage(url: url, options: [.fromLoaderOnly])

[dreampiggy]

recursively as I can see it on profiler in Instrumentation

You can use Instrument's Time Profile template, which tell your which of method call is the most expensive, and who block the main queue.

or, just write a simple demo for me to help for this

[sidster-io]

Will try what you mentioned, if it doesn't help I will upload a simple demo. Thank you!

[dreampiggy]

Performance tip:

1. That UIImage.getColors consume CPU && RAM, you should not call it on main queue, even your previous code. To do the correct thing, you should place it with global queue (for example, start a global queue in onAppear).
2. More radical, since for single image, the dominant color is the only fixed one, right ? (never change). So you can cache it. SDWebImage provide the extendedObject which can be stored into cache, so maybe this is the better code. (See SDWebImage's extended object: Allows advanced user to read/write extended metadata associated with image data from disk cache SDWebImage#2898, or I can update the wiki)

// Make the ImageColors to allows for archive, or use a wrapper NSObject (you can even use a Dictionary to store color hexStrings) class to decode, both OK.
// See: https://medium.com/if-let-swift-programming/migrating-to-codable-from-nscoding-ddc2585f28a4

extension ImageColors : NSCoding {
}
let dominantCacheSerilizer = SDWebImageCacheSerializer { image, data, imageUrl in
    // This cache serilizer is always on global queue, safe to calculate huge thing
    guard let colors = image.getColors else { 
        return data
    }
    image.sd_extendedObject = colors
    return data
}
WebImage(url: URL("https://img-9gag-fun.9cache.com/photo/aQ1GWV8_700b.jpg"), context: [.cacheSerilizer: dominantCacheSerilizer])
                 .onSuccess { image, cacheType in
			guard let colors = image.sd_extendedObject as? ImageColors else {return}
			if (colors.background.toHexString() != "#000000") {
			    self.cardBackground = colors.background
			} else {
			    self.cardBackground = UIColor(red: 0.130, green: 0.130, blue: 0.130, alpha: 1.0)
			}
			self.cardHeading = colors.primary
			self.cardDesc = colors.secondary
                    }

[sidster-io]

Trying what you suggested. Thank you so much!

[sidster-io]

Hey @dreampiggy, Thank you for suggesting a performant solution. I'm currently stuck with this one error Type 'SDWebImageContextOption' has no member 'cacheSerilizer'

[dreampiggy]

Ops. The cacheSerializer...

[sidster-io]

Thank you!

[dreampiggy]

Seems UIColor does not conforms to NSCoding or Codable It support. Nor that third party library ImageColors. You can use the hexString for serialization. Like you create a dummy class, for example

class ImageColorsObject : NSObject, NSCoding {
    func encode(with coder: NSCoder) {
        let backgroundColorString = background.hexString
        coder.encode(backgroundColorString, forKey: "backgroundColorString")
    }
    
    required convenience init?(coder: NSCoder) {
        guard let backgroundColorString = coder.decodeObject(forKey: "backgroundColorString") as? String else {
            return nil
        }
        let background = UIColor(hexString: backgroundColorString)
        self.init(background: background)
    }
    
    public init(background: UIColor) {
        self.background = background
    }
    
    public var background: UIColor
}

extension ImageColors {
    public func toObject() -> ImageColorsObject {
        
    }
}

Update:

class ImageColorsObject : NSObject, NSCoding {
    func encode(with coder: NSCoder) {
        coder.encode(background, forKey: "background")
    }
    
    required convenience init?(coder: NSCoder) {
        guard let background = coder.decodeObject(of: UIColor.self, forKey: "background") else {
            return nil
        }
        self.init(background: background)
    }
    
    public init(background: UIColor) {
        self.background = background
    }
    
    public var background: UIColor
}

Then use ImageColorObject to do serialization and de-serialization. The extendedObject will be associated to image, save to disk when store cache. Which means it works for both memory cache and disk cache.

[sidster-io]

I was doing the above part but I guess following the medium post. This is the first time I'm introduced to NSCoding so I was doing it in the most elaborated way possible, I guess :D. I will try yours approach, which is much cleaner. Thank you for all the help :)