In the case of multi-rounded corner view of the page, the page will be stuck. After canceling the rounded corner drawing, the page will be obviously smooth. If you’re in a TableView and the scroll view is drawing rounded corners every time, it’s going to block the page UI. Therefore, it is necessary to optimize the rounded corners to improve page fluency.

self.layer.cornerRadius = cornerRadius;
self.layer.masksToBounds = YES;

// Once rasterized, the layer will be rendered as an image and cached. When used again, it will not be re-rendered
self.layer.rasterizationScale = [UIScreen mainScreen].scale;
self.layer.shouldRasterize = YES;
Copy the code
/* When true, the layer is rendered as a bitmap in its local coordinate * space ("rasterized"), then the bitmap is composited into the * destination (with the minificationFilter and magnificationFilter * properties of the layer applied if the bitmap needs scaling). * Rasterization occurs after the layer's filters and shadow effects *  are applied, but before the opacity modulation. As an implementation * detail the rendering engine may attempt to cache and reuse the  * bitmap from one frame to the next. (Whether it does or not will have * no affect on the rendered output.) * * When false the layer is composited directly into the destination * whenever possible (however, certain features of the compositing * model may force rasterization, e.g. adding filters). * * Defaults to NO. Animatable. */ @property BOOL shouldRasterize; /* The scale at which the layer will be rasterized (when the * shouldRasterize property has been set to YES) relative to  the * coordinate space of the layer. Defaults to one. Animatable. */ @property CGFloat rasterizationScale;Copy the code

When shouldRasterize is set to YES, layer is rendered as a bitmap and cached until it is used again. ShouldRasterize = if blending each page is too costly, we should simply read the bitmap from the rendering engine’s cache next time, saving system resources.

A bitmap is an array of pixels, each of which represents a point in the image. The JPEG and PNG images we often use in our applications are bitmaps.

However, it should be noted that after rasterizing rounded corners of UIImageView and loading network images with SDWebImage will cause image blurring problems. At this time, it is better to use rounded corners without rasterization.

self.layer.cornerRadius = cornerRadius;
self.layer.masksToBounds = YES;
Copy the code

Both JPEG and PNG images are bitmap compressed graphics formats, while SDWebImage is forced to extract images.

The guess is that the bitmap layout information extracted by SDWebImage using CGBitmapContextCreate forces conflicts with the bitmap layout information rendered by drawing rounded corners. System identification only to draw the rounded on CGImageAlphaInfo used kCGImageAlphaNoneSkipFirst rather than SDWebImage kCGImageAlphaNoneSkipLast attribute set, As a result, the color component is used in 5 bits instead of 8 bits, thus resulting in lower image quality and resulting in blur problems.

/* Create a bitmap context. The context draws into a bitmap which is `width' pixels wide and `height' pixels high. The number of components for each pixel is specified by `space', which may also specify a destination color profile. Note that the only legal case when `space' can be NULL is when alpha  is specified as kCGImageAlphaOnly.The number of bits for each component of a pixel is specified by `bitsPerComponent'. The number of bytes per pixel is equal to `(bitsPerComponent * number of components + 7)/8'. Each row of the bitmap consists of `bytesPerRow' bytes, which must be at least `width * bytes per pixel' bytes; in addition, `bytesPerRow' must be an integer multiple of the number of bytes per pixel. `data', if non-NULL, points to a block of memory at least `bytesPerRow * height' bytes. If `data' is NULL, the data for context is allocated automatically and freed when the context is deallocated. `bitmapInfo' specifies whether the bitmap should contain an alpha channel and how it's to be generated, Along with whether the components are floating-point or integer. */ /*CGBitmapContextCreate This function creates a bitmap context, Used to draw a bitmap with wide width pixels and high height pixels. */ /* data: If not NULL, it should point to a block of memory with a size of at least bytesPerRow * height; If the value is NULL, the system automatically allocates and frees the required memory. Width and height: the width and height of the bitmap, which are assigned to the pixel width and pixel height of the image respectively. BitsPerComponent: The number of bits used for each color component of a pixel. Specify 8 in RGB color space. BytesPerRow: The number of bytes used in each line of the bitmap. The size must be at least Width * bytes per pixel bytes. Interestingly, when 0 is specified, the system not only automatically calculates for us, but also optimizes the cache line alignment space: the color space mentioned above, which is generally RGB. BitmapInfo: Bitmap layout information. */ CG_EXTERN CGContextRef __nullable CGBitmapContextCreate(void * __nullable data, size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow, CGColorSpaceRef cg_nullable space, Uint32_t bitmapInfo) CG_AVAILABLE_STARTING (10.0, 2.0);Copy the code

//CGBitmapInfo typedef CF_ENUM(uint32_t, CGImageAlphaInfo) { kCGImageAlphaNone, /* For example, RGB. */ kCGImageAlphaPremultipliedLast, /* For example, premultiplied RGBA */ kCGImageAlphaPremultipliedFirst, /* For example, premultiplied ARGB */ kCGImageAlphaLast, /* For example, non-premultiplied RGBA */ kCGImageAlphaFirst, /* For example, non-premultiplied ARGB */ kCGImageAlphaNoneSkipLast, /* For example, RBGX. */ kCGImageAlphaNoneSkipFirst, /* For example, XRGB. */ kCGImageAlphaOnly /* No color data, alpha data only */ }; * Alpha information; * Whether the color component is floating point; * Byte order in pixel format.Copy the code
//CGImageAlphaInfo typedef CF_OPTIONS(uint32_t, CGBitmapInfo) { kCGBitmapAlphaInfoMask = 0x1F, kCGBitmapFloatInfoMask = 0xF00, kCGBitmapFloatComponents = (1 << 8), kCGBitmapByteOrderMask = kCGImageByteOrderMask, kCGBitmapByteOrderDefault = (0 << 12), kCGBitmapByteOrder16Little = kCGImageByteOrder16Little, kCGBitmapByteOrder32Little = kCGImageByteOrder32Little, kCGBitmapByteOrder16Big = kCGImageByteOrder16Big, kCGBitmapByteOrder32Big = kCGImageByteOrder32Big } CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0); * Whether alpha is included; * If alpha is included, the location of the alpha message is in the least significant bit of the pixel, such as RGBA, or the most significant bit, such as ARGB; * If alpha is included, then whether each color component has been multiplied by alpha. This can speed up the rendering time of the image because it avoids extra multiplication during rendering. For example, for RGB color space, rendering images with data already multiplied by alpha can avoid 3 multiplications per pixel, red multiplied by alpha, green multiplied by alpha, and blue multiplied by alpha.Copy the code

Network picture loading and decompression explain

Pixel format

Pixel format is used to describe the composition format of each pixel, containing information content

  • 14. Bits per component: The number of Bits used by each independent color component in a pixel;
  • 2. Bits per pixel: The total number of Bits used in a pixel;
  • Bytes per row: The number of Bytes used for each row in the bitmap.

Pixel formats are not arbitrary for bitmaps, and only the following limited 17 combination formats are currently supportedFor iOS, only 8 pixel formats are supported. Among them, 1 color space is Null, 2 color space is Gray, 5 color space is RGB, and 0 color space is CMYK. In other words, iOS does not support CMYK color space.

Representation of a pixel in CMYK and RGB color space in 16 or 32 bit pixel formatIn 32-bit pixel format, each color component uses 8 bits; In the 16-bit pixel format, five bits are used for each color component.

Color mode ARGB_8888, ARGB_4444, RGB_565, ALPHA_8 difference

Bitmap.config ARGB_8888: consists of four 8-bits, i.e. A=8, R=8, G=8, B=8, then A pixel of 8+8+8+8=32 bits (4 bytes)

Bitmap.Config ARGB_4444: consists of four 4-bits, i.e. A=4, R=4, G=4, B=4, then A pixel of 4+4+4+4=16 bits (2 bytes).

Bitmap.config RGB_565: No transparency, R=5, G=6, B=5, then a pixel of 5+6+5=16 bits (2 bytes)

Bitmap.Config ALPHA_8: Each pixel has 8 bits, only transparency, no color.

The color mode we usually use is ARGB_8888. In this mode, a pixel is 4 bytes in size, and the higher the sum of the bits of a pixel, the more realistic the image will be.

If you have a 480×800 image with color mode ARGB_8888, it will take up 4808004/1024KB=1500KB of memory. In the case of RGB_565, the occupied memory is 4808002/1024KB=750KB.