The premise is that I have done a group sharing recently, and this idea comes from the sharing of Hujiang. I have learned some of it and shared it with other partners in the group.

### What is Caton? This starts with a RunLoop, which is a callback of 60FPS, which means that the screen is drawn every 16.7ms, which means that the buffer is created in that time. Drawing the contents of the buffer is the CPU’s job; The buffer is then handed over to the GPU for rendering, which includes the Compositing of multiple views, the rendering of textures, etc., and finally displayed on the screen. But if you do so much in 16.7ms that the CPU or GPU can’t do what it’s supposed to do in a given amount of time, then you get stutter, which is lost frames. #### users can feel the lag: 1. The FPS of the page is reduced and there is difficulty when sliding; 2. The page is stuck and cannot respond. 3. The main thread Runloop was executed for a long time; #### Possible causes of deadlock: 1. Deadlock: the main thread gets lock A, needs lock B; Child threads get lock B, need to lock A, wait for each other to cause deadlock; 2. Lock grab: The main thread needs to read DB, while the sub-thread is inserting data. 5. Large amount of UI and complex UI drawing.

### Screen imaging principle

#### Start with GPU: GPU responsibilities: Render the content provided by the CPU and output it to the screen. Among the components of Core Animation, OpenGL ES directly calls GPU for rendering. It can be rendered in two ways:

  • On-Screen Rendering
  • Off-screen Rendering: The GPU creates a new Screen buffer in addition to the current Screen buffer for Rendering.

##### Why is off-screen rendering a performance drain? 1. Create a new buffer 2. Multiple context switches ##### Trigger method of off-screen rendering 1. It also has masks in the masks. Rounded corners are also on top of opacity

### More optimizations:

  • Asynchronous rendering
  • Algorithm to optimize
  • AsyncDisplayKit
  • .

### Reference documentation

  • A session at Hujiang Technology Salon
  • Ibireme blog

###Q&A

Note 1.FPS refers to the number of frames per second transmitted by an image, generally speaking, the number of animation or video frames. FPS measures the amount of information used to save and display moving video. The more frames per second, the smoother the action will be

Note 2. Generally speaking, the CPU, GPU, and display in a computer system work together in this way. The CPU calculates the display content and submits it to THE GPU. After the GPU finishes rendering, the rendering result is put into the frame buffer. Then the video controller will read the data of the frame buffer line by line according to the VSync signal and transmit it to the display through possible digital-to-analog conversion

Note 3.. When a list view shows a large number of calayers with rounded corners and a quick swipe, you can observe that the GPU resource is full and the CPU resource consumption is low. The interface still slides normally, but the average number of frames drops to a very low level. ShouldRasterize to avoid this, try turning on the calayer.shouldrasterize property, but this will shift the off-screen rendering onto the CPU.