How to optimize the "message" list of IM

With the popularization of mobile Internet , Whether it's IM Developers are ordinary users ,IM Instant messaging applications are essential in daily use , such as ： A social letter from an acquaintance 、IM A living fossil Q、 A nail in the enterprise scenario , Almost everyone has to pretend .

No matter which one IM, With “ news ” There are more and more data types in the list , For the sliding experience of the list, it will certainly be affected . But as a whole IM Of “ first page ”, The experience of this list directly determines the user's first impression , It's very important ！

For this reason , The mainstream of the market IM about “ news ” Sliding experience of list （ Mainly the Caton problem ） problem , Will pay special attention to and focus on Optimization .

For one IM Software ,“ news ” The list is the first interface that the user touches ,“ news ” Whether the list slides smoothly has a great impact on the user experience .

With the increasing function 、 Data accumulation ,“ news ” There is more and more information to be displayed on the list .

We found that , Every time the product is used for a period of time , For example, after playing Call Back to “ news ” When sliding the list interface , There will be a serious Caton phenomenon .

So we started talking about “ news ” A detailed analysis of the Caton situation is made in the list , Look forward to finding out the root cause of the problem , And use appropriate solutions to optimize .

What exactly is carton ？

mention APP Carlton of , Many people will say it's because UI 16ms Rendering cannot be completed within .

So why do you need to be in 16ms It will be finished in ？ And in 16ms What needs to be done within ？

With these two questions , In this section, let's take a closer look at .

The refresh rate （RefreshRate） And frame rate （FrameRate）

The refresh rate ： It refers to the number of times the screen refreshes per second , It's for hardware . At present, the refresh rate of most mobile phones is 60Hz（ The screen refreshes every second 60 Time ）, Some high-end machines adopt 120Hz（ such as iPad Pro）.

Frame rate ： Is the number of frames drawn per second , For Software . Usually as long as the frame rate is consistent with the refresh rate , The picture we see is smooth . So the frame rate is 60FPS We won't feel the card .

So what is the relationship between refresh rate and frame rate ？

Take an intuitive example and you will understand ：

    If the frame rate is per second 60 frame , The screen refresh rate is 30Hz, Then the upper half of the screen will still stay in the previous frame , The lower half of the screen renders the next frame —— This situation is called a picture 【 Tear apart 】. contrary , If the frame rate is per second 30 frame , The screen refresh rate is 60Hz, Then there will be two consecutive frames showing the same picture , And here it is 【 Carton 】.

Therefore, it is meaningless to unilaterally increase the frame rate or refresh rate , Both need to be improved at the same time .

Because at present most of Android The machine screen is adopted 60Hz The refresh rate of , In order to make the frame rate reach 60FPS, Then ask for 16.67ms Complete a frame of painting （ namely ：1000ms/60Frame = 16.666ms / Frame）.

Vertical synchronization technology

Since the display starts from the top row of pixels , Refresh down line by line , So there is a time difference from the top to the bottom . Instant messaging development

There are two common problems ：

    1） If frame rate （FPS） Greater than refresh rate , Then there will be the picture tear mentioned above ;

    2） If the frame rate is a little higher , Then the next frame hasn't been displayed yet , The data of the next frame will be covered , The middle frame is skipped , This situation is called frame skipping .

In order to solve the problem that the frame rate is greater than the refresh rate , The technology of vertical synchronization is introduced , Simply put, it's the monitor 16ms Send a vertical synchronization signal （VSYNC）, The system will wait for the arrival of the vertical synchronization signal , Before rendering a frame and updating the buffer , This locks the frame rate and refresh rate .

How does the system generate a frame

stay Android4.0 before ： Handling user input events 、 draw 、 Rasterization is by CPU Application main thread execution , It's easy to get stuck . The main reason is that the task of the main thread is too heavy , There are many events to deal with , secondly CPU Only a small amount of ALU unit （ Arithmetic logic unit ）, Not good at graphic calculation .

Android4.0 Hardware acceleration is enabled by default for future applications .

After hardware acceleration is turned on ：CPU I'm not good at image operation GPU To complete ,GPU Contains a large number of ALU unit , It is designed to realize a large number of mathematical operations （ So mining is generally used GPU）. After the hardware acceleration is turned on, the rendering work in the main thread will be handed over to a separate rendering thread （RenderThread）, So when the main thread synchronizes the content to RenderThread after , The main thread can be released for other work , The rendering thread completes the next work .

    1） First, in the first 16ms Inside , The display shows the second 0 The content of the frame ,CPU/GPU Finish processing the first frame ;

    2） After the arrival of vertical synchronization signal ,CPU Proceed to the processing of the second frame immediately , Give it to me when you're done GPU（ The display displays the image of the first frame ）.

There seems to be no problem with the whole process , But once the frame rate appears （FPS） Less than refresh rate , The picture will show carton .

Triple buffer （Triple Buffer）

In order to solve the frame rate （FPS） Frame drop caused by less than screen refresh rate ,Android4.1 Three level buffer is introduced .

In double buffer , because Display and GPU Each occupies a buffer , When the vertical synchronization signal arrives CPU There is no way to draw . Now add a buffer ,CPU You can draw when the vertical synchronization signal arrives .

In the second 16ms Inside , Although a frame is displayed repeatedly , But in Display Occupied A buffer ,GPU Occupied B Buffer case ,CPU Still usable C Buffer finish drawing , such CPU It has also been fully utilized . The subsequent display is also relatively smooth , Effectively avoided Jank Further aggravation .

Through the process of drawing, we know , Caton appeared because the frame fell , The reason for the frame drop is that when the vertical synchronization signal arrives , Data is not ready for display . So we have to deal with carton , We should try to shorten it CPU/GPU Time of drawing , So that we can make sure that in 16ms Complete the rendering of one frame in .

Caton problem analysis

5.1 Caton effect in medium and low-end mobile phones

With the above theoretical basis , We started to analyze “ news ” List Caton's problem . because Boss The use of Pixel5 It belongs to high-end machine , Carton is not obvious , We specially borrowed a medium and low-end computer from our test classmates .

A53 Processor It is generally used as a small core in large and small core architectures , Its main function is to save electricity , They are generally responsible for those scenarios with low performance requirements , For example, standby mode 、 Background execution, etc , and A53 It also does achieve the ultimate power consumption .

At Samsung Galaxy A20s On the cell phone , All use this Processor, And there are no large nuclei , Then the processing speed will not be very fast , This requires our APP Better optimization .

After having a general understanding of mobile phones , Let's use the tool to check the Caton point .

Analyze the Caton point

First open the system's own GPU Rendering pattern analysis tool , Yes “ news ” List to view .

  according to Google Given color correspondence table , Let's take a look at the approximate location .

First of all, we need to be clear about , Although the tool is called GPU Rendering pattern analysis tool , However, most of the operations shown here take place in CPU in .

Secondly, according to the color comparison table, you may also find , The color given by Google doesn't correspond to the color on the real machine . So we can only judge the approximate location of the time-consuming .

You can see from our screenshot , The green part accounts for a large proportion , Part of it is Vsync Delay , The other part is input processing + Animation + measurement / Layout .

Vsync The explanation given in the delay icon is the time spent in the operation between two consecutive frames .

In fact, that is SurfaceFlinger At next distribution Vsync When , Will turn out for the UI Thread MessageQueue Insert a Vsync Incoming news , The message will not be executed immediately , Instead, wait until the previous message is executed , To be executed . therefore Vsync Delay means Vsync Be put in MessageQueue Time between execution . The longer this part of the time, the better UI The more processing takes place in the thread , Some tasks need to be shunted to other threads for execution .

Input processing 、 Animation 、 measurement / This part of the layout is the arrival and execution of the vertical synchronization signal doFrame Method .

If this part is time-consuming , You need to check whether time-consuming operations are performed in the input event callback , Or is there a lot of custom animation , Or whether the layout level is too deep to cause measurement View And layout take too much time .