The preparatory work

One of the most valuable attributes in performance optimization is FPS: the full name of Frames Per Second, which is actually the screen refresh rate. The recommended refresh rate of Apple iPhone is 60Hz, which means that the GPU refreshes the screen 60 times Per Second, and each refresh is a frame. FPS is how many frames are refreshed per second. The FPS value of a static page is 0, which is of no reference value. The FPS value is only useful when the page is animated or sliding. The FPS value reflects the smoothness of the page, and stuttering is more obvious when the page is below 45.

  • Note:

  1. Use real machine debugging.

  2. It is best to test with a release package (a release is a release, and Apple does a lot of optimization in the release package, so the performance tested with the release package is the most realistic). To start the application, click on XCode and select the top left corner -XCode->Open Developer Tool ->Instruments. Open Instruments and select CoreAnimation.

Open the CoreAnimation


Color Blended Layers

This option is to detect where layer blending occurs, so what is layer blending? In many cases, multiple UI controls are superimposed on the interface. If there are transparent or translucent controls, the GPU will calculate the final display color of these layers, which is the effect seen by our naked eyes. For example, if an upper Veiw color is green RGB(0,255,0), and a lower View color is red RGB(0,0,255), and the opacity is 50%, then the final color displayed to our eyes is blue RGB(0,127.5,127.5). This calculation process will consume certain GPU resource consumption performance. If we change the top green View to opaque, then the GPU doesn’t have to consume resources to display green.

If the layer is Blended, turn on the Color Blended Layers option and the area will show red, so our goal is to reduce the red area as little as possible. So how do you reduce the red areas? Just set the control to be opaque.

  1. Example Set the opaque property to true.
  2. Give the View an opaque color, no special need to set white.

If you print an opaque control in the LLDB, you will see that the opaque control is true. The default value of this property is true, so the first method can be ignored. If you use the second method, you’ll see that all of the red gets eliminated.

Before setting opacity:

After setting opacity:

label.backgroundColor = [UIColor whiteColor];

label.layer.masksToBounds = YES;

The first line of the label’s background color is enough. Why the second line? This is because if the content of the label is Chinese, the actual rendering area of the label is larger than the size of the label, and a sublayer is added to the outermost layer. If the outer gray of the edge of the label in the second line is not set, the layer will be mixed red, so the second sentence needs to be added when the content of the label is Chinese. Single use label. Layer. MasksToBounds = YES is not going to happen off-screen rendering.

Note: UIImageView is a special control, not only the container itself needs to be opaque, but the imageView content must also be opaque. If you have your own image layer mixed red, first check if there is a problem with your code, if there is a problem with the code, it is the image itself

Color Hits Green and Misses Red

This option checks if we are using the layer’s shouldRasterize attribute correctly, shouldRasterize = YES to enable rasterization. What is rasterization? Rasterization is to pre-render a layer into a bitmap and then add it to the cache. The layer that is successfully cached will be marked green, and the layer that is not successfully cached will be marked red. The correct use of rasterization can improve performance to a certain extent.

Application: Generally, rasterization is used only when the image content remains unchanged. For example, it is helpful to improve the performance of static content that consumes a lot of resources to set shadows. Not applicable: If the content changes frequently, do not enable it at this time, otherwise it will cause a waste of performance. For example, in the use of tableViewCell, generally do not use rasterization, because the tableViewCell is drawn very frequently, the content is constantly changing, if the use of rasterization, will cause a large number of off-screen rendering performance.

If you use rasterization in an interface, all of the rasterized controls that have entered the page will be red because they haven’t been cached yet, and if you scroll up and down you’ll see that the layer turns green. But if you swipe too far, the new controls will be red and then green, because they haven’t been cached at the layer yet.

Note:

  1. The raster cache is assigned a fixed size, so it should not be overused, and exceeding the cache will cause off-screen rendering.
  2. The cached time is 100ms, so if a cached object is not used within 100ms, it will be purged from the cache.

Color Copied Images (Image Color format)

Official Apple notes are copied to the CPU for conversion of images shown in green. So how to understand this sentence? If the GPU does not support the current image color format, it will hand the image to the CPU for pre-formatting and the image will be marked blue. So what formats does the GPU support? Apple’s GPU only parses 32bit Color formats, and if you use Color Copied Images to debug you find blue.

Knowledge expansion: For example, if an image supports 256 colors, then 256 different values are required to represent different colors, that is, from 0 to 255. The binary representation is from 00000000 to 11111111, a total of 8 binary digits. So the color depth is 8. Generally, there are three 8bits in 32bit colors, one for R red, one for green, one for blue, and one for transparency (Alpha).

Color Immediately (Color refresh frequency)

Remove the 10ms delay when performing color refreshes, because you may not need these delays in certain situations, so use this option to speed up the color refresh frequency. However, this debugging option is not usually used.

Color Misaligned Images(image size)

This option helps us to see if the image size is displayed correctly. If the image size does not match the imageView size, the image will appear yellow. Minimize yellow as much as possible, because the image size does not match the imageView size and will consume resources to compress the image. The image in the image below is the actual size (81,110). The top image is normal and the bottom image is yellow because it is placed in a size x 2 imageView container.

Rendered Yellow Color -Rendered off-screen

Off-screen Rendering refers to the process in which the GPU creates a new buffer outside the current Screen buffer for Rendering. There is another type of Screen Rendering — on-screen Rendering, where the GPU renders in the Screen buffer currently used for display. Off-screen rendering will first create a new buffer outside the screen, and then cut to the current screen to display the off-screen rendering results on the current screen after the off-screen rendering is finished. This context switching process is very performance consuming, so off-screen rendering should be avoided as far as possible in actual development.

Trigger Offscreen rendering behavior:

  1. The drawRect: method
  2. layer.shadow
  3. layer.allowsGroupOpacity or layer.allowsEdgeAntialiasing
  4. layer.shouldRasterize
  5. layer.mask
  6. layer.masksToBounds && layer.cornerRadius

ShouldRasterize is the third option in this article. Rasterize will trigger off-screen rendering, so be careful with rasterize.

Layer. masksToBounds = YES; layer.masksToBounds = YES; layer.masksToBounds = YES; layer.cornerRadius = 5;

The image below shows a label rounded to trigger an off-screen rendering:

In order to avoid triggering the off-screen rendering as much as possible, we can implement the necessary functions by other means:

  1. Shadow draw shadow: Use ShadowPath instead of shadowOffset

    imageViewLayer.shadowPath = CGPathCreateWithRect(imageRect, NULL);
  2. usingGraphicsContexGenerate a picture or view with rounded corners, here do not write the specific implementation process, need to Baidu Copy, a lot of ready-made code.

Color Compositing fast-path Blue

Places a blue overlay over content that is detached from the compositor. Mark paths drawn by hardware as blue, the more blue the better, and highlight layers drawn directly with OpenGL. I haven’t done a lot of research on OpenGL, so I’m not going to give you a demo here, but you just have to remember that the more blue the better.

Flash Updated Regions

Colors regions on your iOS device in yellow when those regions are updated by the graphics processor. This option highlights yellow for redrawn content, which is drawn using Core Graphics. Redrawing takes a bit of performance, so the redrawn area should be as small as possible. The following is the effect drawing of activating Flash Updated Regions debugging by entering the original map with the real machine. Unfortunately, the yellow area cannot be captured in the screenshot, so I circle it with a red box, there are two places in total. The one in the upper corner is constantly refreshing the page, and the one in the lower right corner is constantly refreshing the current position. So it’s all a scene redrawn using Core Graphics, and you can see that the yellow area is small, the smaller the area, the better the performance.